<!-- 管网 -->
<template>
  <div>
    <div class="video-menu">
      <layer-manager-mix title="物联设备" :isNeedIcon="false" :layer="dev" :layer-hover="devHover" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick" @menuClick="menuClick"/>
      <common-btn id="healthBtn" :select="selectIndex==='healthBtn'" :bg="health" :bg-hover="healthHover" width="5" height="5" text-hover="健康评分" @click="handleClickButton('score')" />
      <common-btn id="alarmBtn" :select="selectIndex==='alarmBtn'" :bg="alarmBg" :bg-hover="alarmHover" width="5" height="5" text-hover="管网告警" @click="handleClickButton('alarm')" />
      <common-btn id="caseBtn" :select="selectIndex==='caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5" text-hover="管网事件" @click="handleClickButton('event')" />
    </div>
    <!-- <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage" v-show="isListPage"  @close="isListPage=false"/> -->
    <!-- 信息窗体 -->
    <Pop ref="pop" v-if="showPop" @close="showPop = false" />
    <AlarmPop ref="alarmPopRef" v-if="showAlarmPop" @close="showAlarmPop = false" />
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import TimeManager from "@/components/TimeManager";
import { heat } from '@/utils/freedo/heat'
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import {
  getHeat,
  getDevList,
  getCasePointList, getCaseInfo
} from "../../../../api/ywts/cszl/gd";
import {
  getStatistics,
  getArea,
  getAlarmList
} from "../../../../api/ywts/cszl/gw";
import {AddDivPointHighlight, AddLabel} from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import Pop from "./popup.vue";
import AlarmPop from "./alarmPop.vue";

export default {
  name: 'Gw',
  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop, AlarmPop},
  // components: { TimeManager, LayerManagerMix, ListPage, CommonBtn },
  data() {
    return {
      isListPage: false,
      isShow: false,
      showPop: false,
      showAlarmPop: false, // 是否显示报警点位的popup
      listQuery: {
        deviceType: '',
        startTime: '',
        endTime: '',
        isAlarm: '',
        hasOrder: '',
        keywords: '',
      },
      ktSelect: '',
      selectIndex: 'layerBtn',
      caseList: [],
      caseListQuery: {
        startTime: '',
        endTime: '',
        id: '',
        pageNo: 0,
        pageSize: 5
      },
      caseTotal: 0,
      caseIcon: {
          1: require('@/assets/images/icon/事件/已撤案.png'),
          2: require('@/assets/images/icon/事件/指派中.png'),
          3: require('@/assets/images/icon/事件/处置中.png'),
          4: require('@/assets/images/icon/事件/已办结.png'),
          5: require('@/assets/images/icon/事件/已结案.png'),
        },
      caseColor: {
          1: '#ffffff',
          2: '#fdeb56',
          3: '#85c8ff',
          4: '#ffba74',
          5: '#87f6b3',
        },
      time: {
        startTime: '',
        endTime: '',
      },
      preCase: null,
      dev: require('@/assets/images/function/环卫/基础设施未选中.png'),
      devHover: require('@/assets/images/function/环卫/基础设施选中.png'),
      health: require('@/assets/images/function/管网/健康路评分未选中.png'),
      healthHover: require('@/assets/images/function/管网/健康路评分选中.png'),
      alarmBg: require('@/assets/images/function/物联网/物联告警未选中.png'),
      alarmHover: require('@/assets/images/function/物联网/物联告警选中.png'),
      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
      menuTab: [{
        name: '物联设备',
        value: 'device'
      }
      ],
      menus: {
        device: [
        ],
      }
    }
  },
  mounted() {
    clearResetMap()
    // 获取概况统计
    getStatistics().then(response => {
      if(response.code === 200) {
        this.menus.device = response.data.value
        if(response.data.value && Array.isArray(response.data.value) && response.data.value.length) {
          this.search(response.data.value[0].type)
        }
      }
    })
  },
  methods: {
    async btnClick(e) {
      clearUpMap()
      this.isListPage = false
      this.selectIndex = e.target.id
      switch (this.selectIndex) {
        case "caseBtn":
          this.casePoint()
          break
        case "devBtn":
          this.search()
          break
      }
    },
    // 点击按钮
    handleClickButton(type) {
      clearUpMap()
      switch (type) {
        case "alarm": // 点击管网告警
          this.fetchAlarmList()
          break
      }
    },
    // 查询管网物联设备点位
    search(type = '') {
      const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
      getArea({
        deviceType: type,
        startTime: '',
        endTime: '',
        isAlarm: '',
        hasOrder: '',
        keywords: '',
      }).then(response => {
        if(response.code === 200) {
          clearUpMap()
          response.data.value.forEach(item => {
            // console.log(item.areaboundary)
            // todo : 画范围
            AddLabelPoint(
              item.id,
              item.name,
              item.deviceStatus === '2' ? iconDoing: iconDone,
              [item.lon, item.lat, 0], 'gw', item,
              this.clickGw)
          })
        }
      })
        // const res = {
        // data: {
        //   value: [
        //     {
        //       id: '1',
        //       name: '111',
        //       deviceStatus: '2',
        //       lon: '114.87665',
        //       lat: '25.76418',
        //     },
        //     {
        //       id: '2',
        //       name: '122211',
        //       deviceStatus: '1',
        //       lon: '114.87365',
        //       lat: '25.76118',
        //     }
        //   ]
        // }}
        // const tempData = res.data.value
        // tempData.forEach(item => {
        //   AddLabelPoint(
        //     item.id,
        //     item.name,
        //     item.deviceStatus === '2' ? iconDoing : iconDone,
        //     [item.lon, item.lat, 0], 'gw', item,
        //     this.clickMarker)
        // })
    },
    // 点击icon事件
    clickGw(eventArg) {
      const item = eventArg._data.data
      this.isShow = true
      console.log('点击icon', item);
      this.$nextTick(() => {
        this.$refs.gwPop.initData(item)
      })
    },
    // 点击点位
    clickMarker(eventArg) {
      const showPop = (e) => {
        const item = e._data.data
        this.showPop = true
        // console.log(this.$refs.popRef)
        this.$nextTick(() => {
          this.$refs.pop.initData(item)
        })
      }
      if (this.showPop) {
        this.showPop = false
        setTimeout(() => {
          showPop(eventArg)
        }, 100);
      }
      else {
        showPop(eventArg)
      }
    },
    // 点击menu
    menuClick(e) {
      console.log(e, 'menuClick')
      clearResetMap()
      this.search(e.type.trim())
    },
    // ----------------------------------------管网告警------------------------------------------
    // 获取官网告警列表
    fetchAlarmList() {
      const icon = require('@/assets/images/icon/智慧管网/alarm.png')
      const params = {
        pageNo: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
        keywords: '',
      }
      getAlarmList(params).then(response => {
        if(response.code === 200) {
          clearUpMap()
          response.data.value.forEach(item => {
            AddLabelPoint(
              item.id,
              item.devicetypename,
              icon,
              [item.lon, item.lat, 0], 'gw', item,
              this.clickAlarmMarker)
          })
        }
      })
      const temp = [
        {
          createtime:"2023-04-18 06:01:42",
          code:null,
          orderid:null,
          alarmstatusname:"历史告警",
          alarmcontent:null,
          lotid:"112021020027",
          lon:"114.87665",
          devicetype:"5",
          alarmstatus:"0",
          imgurl:null,
          location:"刺桐路",
          id:"1353824",
          devicetypename:"液位监测仪",
          lat:"25.76418",
        },
        {
          createtime:"2023-04-18 06:01:38",
          code:null,
          orderid:null,
          alarmstatusname:"历史告警",
          alarmcontent:null,
          lotid:"112019020098",
          lon:"114.899962",
          devicetype:"5",
          alarmstatus:"0",
          imgurl:null,
          location:"佳辰路",
          id:"1353818",
          devicetypename:"液位监测仪",
          lat:"25.807828",
        }
      ]
      // temp.forEach(item => {
      //       AddLabelPoint(
      //         item.id,
      //         item.devicetypename,
      //         icon,
      //         [item.lon, item.lat, 0], 'gw', item,
      //         this.clickAlarmMarker)
      //   })
    },
    // 点击点位
    clickAlarmMarker(eventArg) {
      const showAlarmPop = (e) => {
        const item = e._data.data
        this.showAlarmPop = true
        this.$nextTick(() => {
          console.log('ppp[p]', item);
          this.$refs.alarmPopRef.initData(item)
        })
      }
      if (this.showAlarmPop) {
        this.showAlarmPop = false
        setTimeout(() => {
          showAlarmPop(eventArg)
        }, 100);
      }
      else {
        showAlarmPop(eventArg)
      }
    },
  }
}
</script>

<style scoped>
.video-menu {
  display: flex;
  z-index: 111111111;
  width: 40rem;
  height: 5rem;
  position: absolute;
  left: 20px;
  top: 1rem;
}
</style>