<!--
 * @Description: 监控图层
 * @Author: 王晓颖
 * @Date: 2021-09-15 10:04:45
 -->
<template>
  <div>
    <!--<div v-if="videoShow" :class="{'video-dialog': !maxWindow, 'max-window': maxWindow}">-->
      <!--<div style="height:30px;color:white;margin-top:20px;width:100%;text-align:center;font-size: 18px;">实时监控</div>-->
      <!--<img :src="require('@/assets/img/map/maximum.png')" width="20" height="20" class="max-btn" @click="maxWindow = !maxWindow">-->
      <!--<img :src="require('@/assets/img/map/close.png')" width="20" height="20" class="close-btn" @click="closeVideo">-->
      <!--<div class="video-div">-->
        <!--<video :src="videoSrc" autoPlay="" width="100%"></video>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script>
import Leaflet from 'leaflet'
import commonMixin from '@/components/leafletMap/base/mixins/common.js'
import {getAlarmsNow} from "@/api/overview"
export default {
  name: 'AlarmLayer',
  mixins: [commonMixin('layer')],
  props: {
    show: {
      type: Boolean,
      default: true
    }, // 是否显示
    iconSize: {
      type: Array,
      default: () => {
        return [30, 30]
      }
    }, // 图标大小
    iconAnchor: {
      type: Array,
      default: () => {
        return [15, 30]
      }
    }, // 图标位移
    popupAnchor: {
      type: Array,
      default: () => {
        return [0, -30]
      }
    }, // 弹窗位移
    refreshTime: {
      type: Number,
      default: 60
    } // 定时刷新时间
  },
  data () {
    return {
      maxWindow:false, // 窗口最大化
      videoShow: false,
      alarmList: [], // 路灯亮列表
      alarmLayer: null, // 路灯亮图层
      layerGroup: [], // 图层组
      alarmIcon: require('@/assets/img/map/alarm.png'),
      timer: null // 定时器
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.initLayer()
      } else {
        this.clearLayer()
      }
    }
  },
  methods: {
    load () {
      if (this.show) {
        this.initLayer()
      }
    },
    // 初始化图层
    initLayer () {
      const {map} = this
      this.layerGroup = [] // 先清空LayerGroup
      // 初始化图层组
      /* eslint-disable new-cap */
      this.alarmLayer = new Leaflet.layerGroup().addTo(map)
      this.layerGroup.push(this.alarmLayer)
      console.log('initLayer')
      this.loadData()
    },
    // 清除图层
    clearLayer () {
      console.log('clearLayer')
      const {map, layerGroup} = this
      layerGroup.forEach(item => map.removeLayer(item))
    },
    // 加载全部数据
    loadData () {
      const {alarmIcon} = this
      // 获取报警列表
      getAlarmsNow().then(res=>{
        this.alarmList = res.data.map(item=>{
          item.longitude = parseFloat(item.coordinateX)
          item.latitude = parseFloat(item.coordinateY)
          item.alarmMsg = item.alarmContent
          item.alarmTime  = item.alarmTimeDate
          return item
        })
        this.addPointOnMap(this.alarmList, this.alarmLayer, alarmIcon)
      })

      // this.alarmList = [
      //   {devcode:'412021041201', deviceType:'井盖状态监测仪', latitude:22.294056 , longitude:113.488988, position:'105国道', alarmMsg:'井盖开启', alarmTime:'2021-09-16 08:30:29'},
      //   {devcode:'412021041202', deviceType:'井盖状态监测仪', latitude:22.294256 , longitude:113.489450, position:'105国道', alarmMsg:'井盖开启', alarmTime:'2021-09-16 10:11:56'},
      //   {devcode:'112021041234', deviceType:'液位监测仪', latitude:22.294390 , longitude:113.489350, position:'105国道', alarmMsg:'水位超限', alarmTime:'2021-09-16 11:27:29'},
      //   {devcode:'412021041203', deviceType:'井盖状态监测仪', latitude:22.294299 , longitude:113.488800, position:'105国道', alarmMsg:'井盖开启', alarmTime:'2021-09-16 13:01:12'},
      //   {devcode:'512021041234', deviceType:'有害气体监测仪', latitude:22.294956 , longitude:113.488930, position:'105国道', alarmMsg:'一氧化碳超标', alarmTime:'2021-09-16 14:01:49'},
      //   {devcode:'412021041204', deviceType:'井盖状态监测仪', latitude:22.294556 , longitude:113.488580, position:'105国道', alarmMsg:'井盖开启', alarmTime:'2021-09-16 04:35:43'},
      //   {devcode:'612021041234', deviceType:'噪声记录仪', latitude:22.292756 , longitude:113.490100, position:'105国道', alarmMsg:'噪声超限', alarmTime:'2021-09-16 12:53:34'},
      // ]

    },
    // 将点加到地图上
    addPointOnMap(dataList, layer, iconType) {
      const {iconSize, iconAnchor, popupAnchor} = this
      layer.clearLayers()
      // 图标
      const icon = Leaflet.icon({
        iconUrl: iconType,
        iconSize: iconSize,
        iconAnchor: iconAnchor,
        popupAnchor: popupAnchor
      })
      dataList.forEach(item => {
        let popupStr = '<div class="popup-div">' +
          '<div class="popup-title">'+item.alarmMsg+'</div>' +
          '<div class="dashed-line"></div>' +
          '<div class="popup-item"><label>设备编号</label>'+item.devcode+'</div>' +
          '<div class="popup-item"><label>设备类型</label>'+item.deviceType+'</div>' +
          '<div class="popup-item"><label>位置</label>'+item.position+'</div>' +
          '<div class="popup-item"><label>时间</label>'+item.alarmTime+'</div>'
          // '<div class="popup-button" id="real-video">查看实时监控</div>'
        popupStr += '</div>'
        const popup = Leaflet.popup().setContent(popupStr)
        if (item.longitude > 0 && item.latitude > 0) {
          // 添加marker
          Leaflet.marker([item.latitude, item.longitude], { icon: icon, id: item.lampId }).addTo(layer).bindPopup(popup)
        }
      })
    },
    // 播放视频
    openVideo(){
      this.videoShow = true
    },
    closeVideo(){
      this.videoShow = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .video-dialog{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:1000;
    width: 600px;
    height: 400px;
    background-color: rgba(7,10,23,0.8);
    border-radius: 10px;
    .max-btn{
      position: absolute;
      top:20px;
      right:60px;
    }
    .close-btn{
      position: absolute;
      top:20px;
      right:20px;
    }
    .close-btn:hover{
      animation:turn 1s linear infinite;
    }
    .video-div{
      width: 100%;
      padding: 0px 20px;
    }
  }
  .max-window{
    position: fixed;
    top: 0;
    left:0;
    z-index:1000;
    width: 100%;
    height: 100%;
    background-color: rgba(7,10,23,0.8);
    border-radius: 10px;
    .max-btn{
      position: absolute;
      top:20px;
      right:60px;
    }
    .close-btn{
      position: absolute;
      top:20px;
      right:20px;
    }
    .close-btn:hover{
      animation:turn 1s linear infinite;
    }
    .video-div{
      width: 100%;
      padding: 0px 20px;
    }
  }
  @keyframes turn{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
  }
</style>
<style rel="stylesheet/scss" lang="scss" >
  .leaflet-popup-content-wrapper, .leaflet-popup-tip{
    color: white;
    background-color: rgba(10,26,123,0.8);
  }
  .leaflet-popup-content {
    .popup-div {
      font-size: 14px;
      padding: 5px;

    }
    .popup-title {
      font-weight: bold;
    }
    .dashed-line {
      border-bottom: 1px dashed #dddddd;
      margin: 10px -10px;
    }
    .popup-item {
      padding-bottom: 6px;
      label {
        font-weight: bold;
        padding-right: 15px;
      }
    }
    .popup-subitem {
      padding-bottom: 6px;
      font-size: 12px;
    }
    .popup-button{
      color:#67E0E3;
      text-align: center;
      margin-top: 5px;
      text-decoration: underline;
    }
    .popup-button:hover{
      color: #36b7ff;
      cursor: pointer;
    }
  }
</style>