<template>
  <div>
    <!--筛选条件-->
    <div class="map-search-div">
      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
        <el-row>
          <el-form-item>
            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/地址" clearable size="small"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="listQuery.wellType" placeholder="选择井类型" clearable size="small">
              <el-option
                v-for="item in wellTypeList"
                :key="'welltype_'+item.value"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>

          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getWellList" size="small" style="margin-top: 2px">搜索</el-button>
          <el-form-item style="margin-left:10px">
            <el-checkbox v-model="showAll">显示全部井</el-checkbox>
          </el-form-item>
          <el-form-item style="margin-left:5px">
            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="resetMapCenter"/>
          </el-form-item>
          <el-form-item style="margin-left:5px">
            <el-button type="primary" size="small" icon="el-icon-refresh" circle @click="fetchAlarmList"/>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <div class="function-div">
      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
    </div>
    <div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
      <div class="map-alarm-div-header">
        告警列表
        <span class="icon-right" @click="tableShow=!tableShow">
          <i v-if="tableShow" class="el-icon-arrow-up"/>
          <i v-else class="el-icon-arrow-down"/>
        </span>
      </div>
      <transition name="el-collapse-transition">
        <el-scrollbar
          v-show="tableShow"
          :style="{visibility: tableShow?'visible':'hidden'}"
          :class="{moredatascollor:alarmList.length>6}"
          :native="false">
          <el-table
            :data="alarmList"
            class="alarm-list-table"
            border
            @row-dblclick="alarmRowClick">
            <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-scrollbar>
      </transition>
    </div>

    <div id="map2D" class="map-container">
      <leaflet-map ref="mapContainer" onload="mapReady" :satellite="true" :show-all-well="showAll" />
    </div>
  </div>
</template>

<script>
import LeafletMap from '@/components/mapWindow/leafletMap'
import { getWellType } from '@/api/well'
import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview'

export default {
  name: 'OverviewSmartWell',
  components: {
    LeafletMap
  },
  data() {
    return {
      showAlarm: true, // 是否显示报警
      showAll: false, // 是否显示全部井
      listQuery: {
        keywords: '', // 关键字
        wellType: '', // 井类型
      }, // 筛选条件
      columns: [
        {
          text: '井编号',
          value: 'wellCode',
          width: 220,
          align: 'center'
        },
        {
          text: '设备编号',
          value: 'devcode',
          width: 120,
          align: 'center'
        },
        {
          text: '告警原因',
          value: 'alarmContent',
          align: 'center',
          width: 120
        },
        {
          text: '时间',
          value: 'alarmTime',
          width: 160,
          align: 'center'
        }
      ], // 告警列表显示列
      tableShow: true, // 是否显示告警列表
      tableIcon: 'el-icon-arrow-up',
      showWellType: [
        {
          "name":"雨水井",
          "id":"61",
          "value":"1"
        },
        {
          "name":"污水井",
          "id":"62",
          "value":"2"
        }
      ],
      wellTypeList: [], // 井类型列表
      alarmList: [], // 报警列表
      alarmInfo: {
        wellCode: '',
        deptName: '',
        position: '',
        deep: '',
        alarms: []
      }, // 显示报警详情气泡内容
    }
  },
  mounted() {
    this.fetchWellList()
    this.fetchAlarmList()
  },
  created() {
    this.fetchWellType()
  },
  watch: {
    showAll(val) {
      this.$refs.mapContainer.showOrHideAllWell(val)
    },
    showAlarm(val) {
      this.$refs.mapContainer.showOrHideAlarmWell(val)
    }
  },
  methods: {
    // 查询报警列表
    fetchAlarmList() {
      getAlarmsNow().then(response => {
        if (response.code === 200) {
          this.alarmList = response.data
          this.$refs.mapContainer.addAlarmWellLayer(this.alarmList)
          if (this.alarmList.length > 0) {
            this.hasAlarm = true
          }
        }
      })
    },
    // 查询井
    fetchWellList() {
      getWellList({ keywords: '', wellType: ''}).then(response => {
        if (response.code === 200) { // todo
          this.$refs.mapContainer.addWellLayer(response.data)
        }
      })
    },
    // 获取井类型，显示井类型下拉
    fetchWellType() {
      getWellType().then(response => {
        this.wellTypeList = []
        // 如果该用户支持的井类型只有一个，则不显示该筛选框
        // const wellTypes = this.$store.getters.wellTypes
        for (const wellType of response.data) {
          // if (wellTypes.indexOf(wellType.value) !== -1) {
            this.wellTypeList.push(wellType)
          // }
        }
        if (this.wellTypeList.length <= 1) {
          this.showWellType = false
        }
      })
    },
    // 获取全部井列表
    getWellList() {
      getWellList(this.listQuery).then(response => {
        if (response.code === 200) { // todo
          this.$message.success(`查询到 ${response.data.length} 个井`)
          this.$refs.mapContainer.addWellLayer(response.data)
        }
      })
    },
    resetMapCenter() {
      this.$refs.mapContainer.resetMapView()
    },
    // 点击报警列表
    alarmRowClick(row) {
      this.$refs.mapContainer.locateWell(row.wellCode)
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .mars3d-popup-content {
    margin: 20px;
    line-height: 1.9;
    font-size: 18px;
  }

  // 查询框
  .map-search-div{
    position: absolute;
    z-index: 1000;
    padding: 0px 10px;
    background-color: rgba(244, 244, 244, 0.9);
    /*left: 90px;*/
    .el-form-item{
      margin-bottom: 0px;
    }
  }
  // 刷新框
  .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;
    }
  }
  // 报警列表
  .map-alarm-div{
    position: absolute;
    z-index: 1000;
    background-color: rgba(255, 234, 241,0.8);
    top: 40px;
    left: 0px;
    .map-alarm-div-header{
      line-height: 35px;
      width: 621px;
      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;
      padding:0px !important;
      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;
    }
  }
  // 刷新框
  .refresh-div{
    position: absolute;
    right: 10px;
    top: 7px;
    z-index: 100;
    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;
    }
  }
  // 地图
  .el-divider--horizontal{
    margin: 5px 0;
  }
  /*按钮样式*/
  .add-button{
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .map-alarm-div {
    .el-scrollbar__wrap {
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0px !important;
      margin-bottom: 0px !important;
    }
  }
  .mars3d-container {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
  }
</style>

<style>
  .leaflet-container a.leaflet-popup-close-button {
    top: 5px; /* 修改弹窗关闭按钮样式 */
    right: 10px; /* 修改弹窗关闭按钮样式 */
  }

  .leaflet-popup-content .popup-div {
    font-size: 15px;
    padding: 6px;
  }

  .leaflet-popup-content .popup-title {
    font-weight: bold;
  }

  .leaflet-popup-content .dashed-line {
    border-bottom: 1px dashed #dddddd;
    margin: 10px -10px;
  }

  .leaflet-popup-content .popup-item {
    padding-bottom: 6px;
  }

  .leaflet-popup-content .popup-item label {
    font-weight: bold;
    padding-right: 15px;
  }

  .leaflet-popup-content .popup-subitem {
    padding-bottom: 6px;
    font-size: 12px;
  }
</style>