<template>
  <div>
    <!--筛选条件-->
    <div class="map-search-div">
      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
        <el-row>
          <el-form-item label="搜索：">
            <el-input v-model.trim="listQuery.keywords" placeholder="窨井编号/地址" clearable/>
          </el-form-item>
          <el-form-item v-if="wellTypeList.length>1">
            <el-select v-model="listQuery.wellType" placeholder="选择窨井类型" clearable>
              <el-option
                v-for="item in wellTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <dept-select v-model="listQuery.deptid" :need-top="deptShowTop" dept-type="03" placeholder="选择权属单位"/>
          </el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button v-show="showClearBtn" class="filter-item" @click="clearSearch">清除查询</el-button>
          <el-form-item style="margin-left:10px">
            <el-checkbox v-model="showAll">显示全部窨井</el-checkbox>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!--倒计时刷新-->
    <div v-if="refreshType=='clock'" class="refresh-div">
      <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="clickRefreshIcon"/>
      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="changeAlarm"/>
    </div>
    <div v-if="refreshType=='websocket'" class="function-div">
      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
    </div>
    <div v-if="showAlarm && alarmWells.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-click="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 v-loading="loading" class="overview-map-container">
      <!--地图-->
      <!-- <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/> -->
      <leaflet-map
        id="map"
        ref="map"
        :show-all="showAll"
        :show-larm="showAlarm"
        :alarm-markers="alarmWells"
        :normal-markers="normalWells"
        :center="leftLetForm.center"
        :zooms="leftLetForm.zooms"
        :zoom="leftLetForm.zoom"
        :basemaps="leftLetForm.basemaps"
        @onload="readyMap"
        @popupCenter="popupCenter"
      >
        <!-- <graphic-layer id="lamp" :data="lampList"> -->
        <!-- <simple-popup slot="popup"/> -->
        <!-- </graphic-layer> -->
        <!--      <polyline-layer :routes="routes" color="#5EA279" weight="3"/>-->
        <!-- <animate-routes-layer ref="routeLayer" :routes="routes" :weight="3" :icon="truckIcon" :icon-size="truckSize" :popup-anchor="truckPopupAnchor" :icon-anchor="truckAnchor" color="#5EA279"/> -->
      </leaflet-map>
    </div>
  </div>
</template>

<script>
import SelectTree from '@/components/SelectTree/singleSelect'
import { getWellType } from '@/api/well'
import { getWellList } from '@/api/overview'
import { getAlarmsNow } from '@/api/overview'
import DeptSelect from '../../components/DeptSelect/index'
import Cmap from '../../components/CMap/components/cmap'
import CmapMarker from '../../components/CMap/components/cmapMarker'
import LeafletMap from '../../components/leaftletMap/leafletMap.vue'
import { deepCopy } from '../../utils/index'

export default {
  name: 'Overview',
  components: { CmapMarker, Cmap, DeptSelect, SelectTree, LeafletMap },
  data() {
    return {
      leftLetForm: {
        center: [39.9, 116.4], // 地图中心-北京
        zooms: [8, 18], // 缩放范围
        zoom: 12, // 缩放
        basemaps: [
          // ------------------------------亦庄----------------------------
          // { name: 'tdtMap', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=map&x={x}&y={y}&z={z}&srs=EPSG%3A3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] },
          // { name: 'tdtLabel', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=maplabel&x={x}&y={y}&z={z}&srs=EPSG:3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] }
          // -----------------------------天地图---------------------------
          { name: 'tdtMap', group: '矢量地图', show: true, url: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
          { name: 'tdtLabel', group: '矢量地图', show: true, url: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
          // { name: 'satellite', group: '影像地图', show: false, url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
          // { name: 'satelliteLabel', group: '影像地图', show: false, url: 'http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] }
        ]
      },
      refreshType: 'clock', // 刷新数据方式：clock或websocket
      listQuery: {
        keywords: '', // 关键字
        wellType: '', // 井类型
        deptid: '', // 组织机构
        isAlarm: '1' // 是否报警
      }, // 筛选条件
      columns: [
        {
          text: '窨井编号',
          value: 'wellCode',
          width: 100,
          align: 'center'
        },
        {
          text: '设备编号',
          value: 'devcode',
          width: 120,
          align: 'center'
        },
        {
          text: '告警原因',
          value: 'alarmContent',
          align: 'center',
          width: 120
        },
        {
          text: '时间',
          value: 'alarmTime',
          width: 180,
          align: 'center'
        }
      ], // 告警列表显示列
      tableShow: true, // 是否显示告警列表
      tableIcon: 'el-icon-arrow-up',
      showWellType: this.showWellType(), // 是否显示井类型下拉
      wellTypeList: [], // 井类型列表
      deptProps: {
        parent: 'pid',
        value: 'id',
        label: 'name',
        children: 'children'
      }, // 权属单位树形下拉菜单
      deptTreeList: null, // 组织树列表数据
      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
      commonIcon: 'well-common-green', // 通用图标 绿
      commonIconAlarm: 'well-common-red', // 通用图标 红
      center: { lng: this.$store.getters.lng, lat: this.$store.getters.lat }, // 地图中心
      zoom: 12, // 地图缩放比例
      markers: [], // 井列表标注marker
      alarmList: [], // 报警列表
      alarmListOri: [], // 报警列表
      alarmWells: [], // 显示报警井列表
      normalWells: [], // 正常井列表
      normalAllWells: [], // 全部正常井
      alarmWellsOri: [], // 原始报警井列表
      offset: [-10, -10], // 偏移量
      alarmOffset: [-15, -30], // 偏移量
      wellInfo: {
        wellCode: '',
        position: '',
        wellTypeName: '',
        deptName: '',
        bfztName: '',
        deep: ''
      }, // 显示井详细信息气泡内容
      alarmInfo: {
        wellCode: '',
        deptName: '',
        position: '',
        deep: '',
        alarms: []
      }, // 显示报警详情气泡内容
      currentWindow: {
        visible: false, // 窗体显示与否
        position: { lng: this.$store.getters.lng, lat: this.$store.getters.lat },
        windowType: 'info' // 窗体类型：详情info或报警alarm
      }, // 当前窗体属性
      infoWindowClass: 'nomal-info-window',
      deptShowTop: false, // 是否显示顶级
      clock: null, // 计时器
      count: 30, // 倒计时
      refreshTimes: 30, // 多少s数据
      showAlarm: true, // 是否显示报警
      hasAlarm: false, // 是否有报警,
      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
      // showAll: true, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
      firstAmount: true, // 是否第一次加载井数据
      loading: false, // 加载图标是否显示
      massMarks: null, // 海量点
      showClearBtn: false // 是否显示清除查询按钮
    }
  },
  watch: {
    showAll(val) {
      if (val) { // 显示全部井（包含报警和不报警，为false时只显示报警）
        this.$refs.map.closePopup() // 关闭已打开的弹窗
        this.listQuery.isAlarm = '0' // 是否报警
        // 先清空查询条件
        this.listQuery.deptid = '' // 组织机构
        this.listQuery.keywords = '' // 关键字
        this.listQuery.wellType = '' // 井类型
        // 加载海量点
        // this.$refs.map.renderPoi()
        if (this.normalAllWells && this.normalAllWells.length) {
          this.normalWells = deepCopy(this.normalAllWells)
        } else {
          this.fetchWellList() // 获取井信息
        }
        this.refreshAlarm()
        // }
      } else { // 仅显示报警
        this.listQuery.isAlarm = '1'
        // 清除海量点
        // this.$refs.map.cleanPoi()
      }
    },
    showAlarm(val) {
      if (val) {
        // this.alarmWells = this.alarmWellsOri
        // this.alarmList = this.alarmListOri
      } else {
        this.alarmWells = []
        this.alarmList = []
      }
    },
    alarmWells: {
      handler: function(newV, oldV) {
        const tempArr = []
        newV.forEach(element => {
          this.alarmListOri.forEach(item => {
            if (element.wellId === item.wellId) {
              tempArr.push(item)
            }
          })
        })
        this.alarmList = tempArr
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    const that = this
    that.fetchWellType()
  },
  activated() {
    this.refreshAlarm()
  },
  methods: {
    popupCenter(val) {
      this.leftLetForm.center = val
    },
    // 地图准备好后的操作
    readyMap() {
      console.log('readyMap')
      const that = this
      // that.fetchWellList() // 获取井信息
      that.refreshAlarm() // 刷新报警内容
      if (this.showAll) {
        this.$refs.map.renderPoi() // 加载海量点
      }
      if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
        setTimeout(function() {
          that.countDown()
        }, 1000)
      }
    },
    // 获取井类型，显示井类型下拉
    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
        }
      })
    },
    // 点击查询-数据查询
    search(showMessage = true) {
      this.$refs.map.closePopup() // 关闭已打开的弹窗
      const keywords = this.listQuery.keywords
      const deptid = this.listQuery.deptid
      const wellType = this.listQuery.wellType
      if (keywords === '' && deptid === '' && wellType === '') {
        this.$message.warning('查询条件不能为空')
      } else {
        this.showClearBtn = true
        // this.filterIcon(showMessage)
        this.fetchWellList() // 获取井列表
        this.fetchWellList('1') // 刷新报警列表
      }
    },
    // 清除查询
    clearSearch() {
      this.$refs.map.closePopup() // 关闭已打开的弹窗
      this.listQuery.wellType = ''
      this.listQuery.deptid = ''
      this.listQuery.keywords = ''
      // this.fetchWellList() // 获取井列表
      // if (this.normalAllWells.length) {
      //   this.normalWells = deepCopy(this.normalAllWells) // 全部正常井信息
      // } else {
      if (this.showAll) {
        this.fetchWellList()
      }
      // }
      this.refreshAlarm() // 刷新报警列表
      this.showClearBtn = false
    },
    // 刷新报警列表
    refreshAlarm() {
      console.log('refresh Alarm')
      this.count = this.refreshTimes
      getAlarmsNow().then(response => {
        if (response.code === 200) {
          // 获取当前报警列表
          this.alarmListOri = response.data
          if (this.alarmList.length > 0) {
            this.hasAlarm = true
          }
          if (this.showAlarm) {
            this.alarmList = this.alarmListOri
          }
          const alarmWellSets = []
          for (const alarm of response.data) {
            const index = alarmWellSets.findIndex(item => {
              return item.wellCode === alarm.wellCode
            })
            if (index === -1) {
              alarmWellSets.push({
                wellCode: alarm.wellCode,
                wellId: alarm.wellId,
                position: { lng: parseFloat(alarm.coordinateX), lat: parseFloat(alarm.coordinateY) },
                wellType: alarm.wellType,
                deptid: alarm.deptid,
                positionInfo: alarm.position,
                visible: true
              })
            }
          }
          this.alarmWellsOri = alarmWellSets
          // 如果当前页面关闭了显示报警，则不更新alarmWells
          if (this.showAlarm) {
            this.alarmWells = alarmWellSets
          }
        }
      })
    },
    // 点击报警列表项
    alarmRowClick(row, column, event) {
      const wellId = row.wellId
      this.$refs.map.openAlarmInfoWindow(wellId)
    },
    // 点击刷新icon
    clickRefreshIcon() {
      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '') {
        console.log('全部888')
        this.refreshAlarm()
      } else {
        this.fetchWellList('1')
      }
      this.$refs.map.closePopup()
    },
    changeAlarm() {
      this.showAlarm = !this.showAlarm
      if (this.showAlarm) {
        this.clickRefreshIcon()
      }
    },
    // 倒计时函数
    countDown() {
      if (this.clock == null) {
        this.clock = window.setInterval(() => {
          this.count--
          if (this.count < 0) { // 当倒计时小于0时清除定时器
            if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '') {
              this.refreshAlarm()
            } else {
              this.fetchWellList('1')
            }
            this.count = this.refreshTimes
          }
        }, 1000)
      }
    },
    // 获取井列表
    fetchWellList(isAlarm = '0') {
      console.log('获取正常井的列表')
      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '') {
        this.loading = true
      }
      const listQuery = {
        keywords: this.listQuery.keywords, // 关键字
        wellType: this.listQuery.wellType, // 井类型
        deptid: this.listQuery.deptid, // 组织机构
        isAlarm: isAlarm // 没报警
      }
      getWellList(listQuery).then(response => {
        this.loading = false
        if (response.code === 200) {
          if (isAlarm === '0') {
            this.normalWells = response.data
            const keywords = this.listQuery.keywords
            const deptid = this.listQuery.deptid
            const wellType = this.listQuery.wellType
            if (keywords === '' && deptid === '' && wellType === '') {
              this.normalAllWells = response.data
            }
          } else {
            this.alarmWells = response.data.map(item => {
              return {
                ...item,
                wellCode: item.wellCode,
                wellId: item.id,
                position: { lng: parseFloat(item.coordinateX), lat: parseFloat(item.coordinateY) }
              }
            })
            if (!this.alarmWells.length) {
              this.$refs.map.closePopup()
              this.$message.warning('无结果')
              return
            }
          }
          this.loading = false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
// 查询框
.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;
  }
}
// 报警列表
.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;
  }
}
// 刷新框
.refresh-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: 100%;
  padding: 5px;
  .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{
        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>