<template>
  <div>
    <div v-loading="loading" class="overview-map-container">
      <!--地图-->
      <cmap ref="map" :center="center" :zoom="zoom" :well-obj="wellObj" :valves="valves" :close-areas="closeAreas" class="map-demo" @ready="readyMap"/>
    </div>
    <div ref="smartdiv" class="smart-div">
      <div>
        <el-radio-group v-model="activeName" @change="handleClick">
          <el-radio-button label="first">内涝分析</el-radio-button>
          <el-radio-button label="second">燃气管线泄漏点</el-radio-button>
          <el-radio-button label="third">热力管线泄漏点</el-radio-button>
        </el-radio-group>
      </div>
      <div ref="smarttab" class="smart-tab">
        <!--<el-tabs v-model="activeName" @tab-click="handleClick">-->
        <!--<el-tab-pane label="内涝分析" name="first">-->
        <div v-show="activeName=='first'">
          <el-table
            :data="waterList"
            :max-height="maxheight"
            class="alarm-list-table"
            border
            stripe
            @row-click="waterRowClick">
            <el-table-column
              type="index"
              align="center"
              width="40"/>
            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row[column.value] }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--</el-tab-pane>-->
        <!--<el-tab-pane label="燃气管线泄漏点" name="second">-->
        <div v-show="activeName=='second'">
          <el-table
            :data="gasList"
            :max-height="maxheight1"
            class="alarm-list-table"
            border
            stripe
            @row-click="gasRowClick">
            <el-table-column
              type="index"
              align="center"
              width="40"/>
            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row[column.value] }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--</el-tab-pane>-->
        <div v-show="activeName=='third'">
          <!--<el-tab-pane label="热力管线泄漏点" name="third">-->
          <el-table
            :data="hotList"
            :max-height="maxheight2"
            class="alarm-list-table"
            border
            stripe
            @row-click="hotRowClick">
            <el-table-column
              type="index"
              align="center"
              width="40"/>
            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row[column.value] }}
              </template>
            </el-table-column>
          </el-table>
          <!--</el-tab-pane>-->
        </div>
        <!--</el-tabs>-->
      </div>
      <div v-if="wellObj!=null" class="smart-detail">
        <div class="detail-header">详情</div>
        <el-form ref="form" :model="wellObj" label-width="100px">
          <el-form-item label="井编号">
            <span class="detail-item">{{ wellObj.wellCode }}</span>
          </el-form-item>
          <el-form-item label="位置">
            <span :title="wellObj.position" class="detail-item">{{ wellObj.position }}</span>
          </el-form-item>
          <el-form-item v-if="activeName=='first'" label="液位值">
            <span class="detail-item">{{ wellObj.analysisValue }} 米</span>
          </el-form-item>
          <el-form-item v-if="activeName=='second'" label="燃气浓度">
            <span class="detail-item">{{ wellObj.analysisValue }} %LEL </span>
          </el-form-item>
          <el-form-item v-if="activeName=='third'" label="噪声值">
            <span class="detail-item">{{ wellObj.analysisValue }} mg </span>
          </el-form-item>
          <el-form-item v-if="activeName=='first'" label="溢流影响面积">
            <span class="detail-item">{{ parseFloat(wellObj.affectArea).toFixed(3) }} 平方米</span>
          </el-form-item>
          <el-form-item v-else label="泄漏影响面积">
            <span class="detail-item">{{ parseFloat(wellObj.affectArea).toFixed(3) }} 平方米</span>
          </el-form-item>
          <el-form-item v-if="valveCodes!=''" label="关阀编号">
            <span class="detail-item">{{ valveCodes }} </span>
          </el-form-item>
          <el-form-item v-if="closeAreaPlus!=0" label="关阀影响面积">
            <span class="detail-item">{{ closeAreaPlus.toFixed(5) }} 平方公里 </span>
          </el-form-item>
          <el-form-item label="报警时间">
            <span class="detail-item">{{ wellObj.alarmTime }}</span>
          </el-form-item>
        </el-form>
        <div v-show="activeName!=='first'" class="btn-group">
          <el-button type="primary" @click="showValves">查看阀门</el-button>
          <el-button type="primary" @click="showCloseArea">查看关阀影响区域</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cmap from '../../components/CMap/components/cmapSmart'
import { getWaterAlarm, getGasAlarm, getHotAlarm } from '@/api/smartAnalysis'
import { getWaterCompute, getGasCompute, getHotCompute } from '@/api/smartAnalysis'
import { getValvesByWell, getAffectAreaByWell } from '@/api/smartAnalysis'
export default {
  name: 'SmartOverview',
  components: { Cmap },
  data() {
    return {
      listQuery: {
        keywords: '', // 关键字
        wellType: '', // 井类型
        deptid: '', // 组织机构
        isAlarm: '1' // 是否报警
      }, // 筛选条件
      columns: [
        {
          text: '井编号',
          value: 'wellCode',
          align: 'center',
          width: 130
        },
        {
          text: '井类型',
          value: 'wellTypeName',
          align: 'center',
          width: 70
        },
        {
          text: '位置',
          value: 'position',
          align: 'center'
        }
      ], // 告警列表显示列
      tableShow: true, // 是否显示告警列表
      tableIcon: 'el-icon-arrow-up',
      count: 30,
      commonIcon: 'well-common-green', // 通用图标 绿
      commonIconAlarm: 'well-common-red', // 通用图标 红
      center: { lng: this.$store.getters.lng, lat: this.$store.getters.lat }, // 地图中心
      zoom: 12, // 地图缩放比例
      offset: [-10, -10], // 偏移量
      alarmOffset: [-15, -30], // 偏移量
      waterList: [], // 内涝预警列表
      gasList: [], // 燃气管线泄漏点列表
      hotList: [], // 热力管线泄漏点列表
      height: 100,
      maxheight: 0,
      maxheight1: 0,
      maxheight2: 0,
      activeName: 'first', // 当前智能分析内容:内涝first，燃气管线泄漏second，热力管线泄漏third
      wellObj: null, // 井对象
      valves: [], // 阀门列表
      closeAreas: [], // 关阀影响区域列表
      loading: false // 加载图标是否显示
    }
  },
  computed: {
    valveCodes() {
      const valveCodes = []
      for (const valve of this.valves) {
        valveCodes.push(valve.valveCode)
      }
      return valveCodes.join(',')
    },
    closeAreaPlus() {
      let result = 0
      for (const area of this.closeAreas) {
        result += area.area
      }
      return result
    }
  },
  activated() {
    this.refreshData()
  },
  mounted() {
    this.height = this.$refs.smartdiv.clientHeight - 295
    // this.$refs.smarttab.style.height = this.height + 'px'
    // const that = this
    this.$nextTick(function() {
      this.maxheight = this.$refs.smartdiv.clientHeight - 295
      this.maxheight1 = this.$refs.smartdiv.clientHeight - 377
      this.maxheight2 = this.$refs.smartdiv.clientHeight - 377
    })
  },
  methods: {
    // 地图准备好后的操作
    readyMap() {
      console.log('readyMap')
      const that = this
      that.refreshData() // 刷新报警内容
    },
    // 刷新报警列表
    refreshData() {
      this.getWaterData()
    },
    handleClick() {
      const tab = this.activeName
      if (tab === 'first') {
        this.getWaterData()
      } else if (tab === 'second') {
        this.getGasData()
      } else if (tab === 'third') {
        this.getHotData()
      }
      this.wellObj = null
    },
    getWaterData() {
      console.log('getWaterData')
      getWaterAlarm().then(response => {
        if (response.code === 200) {
          // 模拟数据
          this.waterList = response.data
        }
      })
    },
    getGasData() {
      console.log('getGasData')
      // getAlarmsNow().then(response => {
      getGasAlarm().then(response => {
        if (response.code === 200) {
          // 获取当前报警列表
          this.gasList = response.data
        }
      })
    },
    getHotData() {
      console.log('getHotData')
      getHotAlarm().then(response => {
        if (response.code === 200) {
          // 模拟数据
          this.hotList = response.data
        }
      })
    },
    // 点击内涝列表项
    waterRowClick(row, column, event) {
      const loading = this.$loading({
        lock: true,
        text: '正在飞速计算中...',
        // spinner: 'el-icon-loading',
        background: 'hsla(0,0%,100%,.9)'
      })
      // 触发计算
      const params = { wellId: row.wellId }
      getWaterCompute(params).then(response => {
        if (response.code === 200) {
          loading.close()
          this.wellObj = response.data
        }
      })
    },
    // 点击燃气泄漏点列表项
    gasRowClick(row, column, event) {
      const loading = this.$loading({
        lock: true,
        text: '正在飞速计算中...',
        // spinner: 'el-icon-loading',
        background: 'hsla(0,0%,100%,.9)'
      })
      // 触发计算
      const params = { wellId: row.wellId }
      getGasCompute(params).then(response => {
        if (response.code === 200) {
          loading.close()
          this.wellObj = response.data
        }
      })
    },
    // 点击热力泄漏点列表项
    hotRowClick(row, column, event) {
      // 触发计算
      const loading = this.$loading({
        lock: true,
        text: '正在飞速计算中...',
        // spinner: 'el-icon-loading',
        background: 'hsla(0,0%,100%,.9)'
      })
      const params = { wellId: row.wellId }
      getHotCompute(params).then(response => {
        if (response.code === 200) {
          loading.close()
          this.wellObj = response.data
        }
      })
    },
    // 查看阀门
    showValves() {
      const params = { wellId: this.wellObj.wellId }
      getValvesByWell(params).then(response => {
        if (response.code === 200) {
          this.valves = response.data
        }
      })
    },
    // 关阀影响区域
    showCloseArea() {
      const params = { wellId: this.wellObj.wellId }
      getAffectAreaByWell(params).then(response => {
        if (response.code === 200) {
          this.closeAreas = response.data
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $sideWidth: 380px;
// 查询框
.map-search-div{
  position: absolute;
  z-index: 500;
  padding: 5px 20px;
  background-color: rgba(244, 244, 244, 0.9);
  /*left: 90px;*/
  .el-form-item{
    margin-bottom: 0px;
  }
}
.smart-div{
  width: $sideWidth;
  float: left;
  height: calc(100vh - 144px);
  .smart-tab{
    margin-top:10px;
    /*overflow-y: scroll;*/
    .el-tabs__content{
      max-height: calc(100vh - 295px - 144px - 60px);
      overflow-y: scroll;
    }
    .el-tabs__nav-wrap{
      display:none;
    }

  }
  .smart-detail{
    /*margin-top: 20px;*/
    font-size:14px;
    min-height:295px;
    .detail-header{
      height: 40px;
      padding-left: 10px;
      line-height: 40px;
      background-color: #e6e6e6;
      font-size: 14px;
      color: #606266;
      font-weight: 700;
    }
    .detail-item{
      height: 40px;
      text-overflow: ellipsis;
    }
    .el-form{
      .el-form-item{
        margin-bottom: 0px;
        border-bottom: 1px solid #f0f0f0;
        .el-form-item__label{
          background-color: #ededed;
          display:inline-block;
          height:100%;
        }
        .el-form-item__content{
          /*background-color: #edf9f0;*/
          padding-left:10px;
          height: 40px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;

        }

      }
    }
    .btn-group{
      margin: 10px;
      text-align: center;
    }
  }
  .alarm-list-table thead tr th{
    /*background-color: #8cc5ff;*/
  }
}
// 报警列表
.map-alarm-div{
  position: absolute;
  z-index: 500;
  background-color: rgba(255, 234, 241,0.8);
  top: 60px;
  left: 10px;
  .map-alarm-div-header{
    line-height: 40px;
    width: 504px;
    padding-left: 10px;
    .icon-right{
      position: absolute;
      right: 15px;
    }
    .icon-right:hover{
      color: #409EFF;
      cursor: pointer;
    }
  }

  .el-scrollbar {
    /*height: 200px;*/
    width: 100%;
  }
  .moredatascollor{
    height: 200px;
  }
  .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0px !important;
}

.el-table th{
/*background-color: rgba(255, 229, 230, 0.8);*/
    padding: 7px 0px;
  }
  .el-table td{
    /*background-color: rgba(255, 234, 241, 0.8);*/
    padding: 5px 0px;
    /*line-height: 1;*/
  }
  .el-table td:hover{
    /*background-color: rgba(255, 234, 241, 0.8);*/
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
// 刷新框
.function-div{
  position: absolute;
  right: 10px;
  top: 7px;
  z-index: 1100;
  padding: 10px;
  color: #ce8b74;
  font-size: 14px;
  /*background-color: rgba(244, 233, 230, 1.0);*/
  .font-red{
    color: red;
    font-weight: bold;
  }
  .el-icon-refresh:hover{
    color: red;
    font-weight: bold;
    cursor: pointer;
  }
}
// 地图
.overview-map-container{
  width: calc(100% - 380px);
  padding: 5px;
  float: left;
  .map-demo{
    width: 100%;
    height: calc(100vh - 144px);
    .svg-icon{
      width: 20px;
      height: 20px;
    }
    .alarm-icon{
      width: 29px;
      height: 30px;
    }
    .nomal-info-window{
      background-color: pink;
    }
    .info-window{
      max-width: 250px;
      /*background-color: lightcyan;*/
      .info-header{
        padding: 10px 10px 5px 10px;
        line-height: 30px;
        font-weight: bold;
        font-size: 16px;
        /*background-color: #eaf4ff;*/
      }
      .info-body{
        padding: 0px;
        line-height: 23px;
        font-size: 14px;
      }
    }
    .alarm-window{
      max-width: 250px;
      /*background-color: #ffeaf1;*/
      .alarm-header {
        padding: 0px;
        line-height: 30px;
        color: red;
        font-weight: bold;
        font-size: 16px;
        /*background-color: #ffecec;*/
      }
      .alarm-body{
        padding: 0px;
        line-height: 23px;
        font-size: 14px;
        .alarm-red{
          color: #ff0000;
        }
        .divider{
          width:100%;
          height:5px;
          margin-bottom: 5px;
          border-bottom:solid rgb(184, 184, 184) 1px
        }
      }
    }
  }
}
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>