<!-- 管网 -->
<template>
  <div>
    <div class="video-menu">
      <layer-manager-mix id="layerBtn" title="物联设备" :isNeedIcon="false" :layer="dev" :layer-hover="devHover" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick" @menuClick="menuClick"/>
      <common-btn id="scoreBtn" :select="selectIndex==='scoreBtn'" :bg="health" :bg-hover="healthHover" width="5" height="5" text-hover="健康评分" @click="btnClick('scoreBtn')" />
      <common-btn id="alarmBtn" :select="selectIndex==='alarmBtn'" :bg="alarmBg" :bg-hover="alarmHover" width="5" height="5" text-hover="管网告警" @click="btnClick('alarmBtn')" />
      <common-btn id="eventBtn" :select="selectIndex==='eventBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5" text-hover="管网事件" @click="btnClick('eventBtn')" />
    </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" />
    <ScorePop ref="scorePopRef" v-if="showScorePop" @close="showScorePop = 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 {
  getStatistics,
  getArea,
  getAlarmList,
  getScoreList
} 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";
import ScorePop from "./scorePop.vue";

export default {
  name: 'Gw',
  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop, ScorePop, AlarmPop},
  // components: { TimeManager, LayerManagerMix, ListPage, CommonBtn },
  data() {
    return {
      isListPage: false,
      isShow: false,
      showPop: false,
      showAlarmPop: false, // 是否显示报警点位的popup
      showScorePop: 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()
      console.log('--------', e);
      this.isListPage = false
      this.showAlarmPop = false, // 是否显示报警点位的popup
      this.showScorePop = false, // 是否显示报警点位的popup
      this.selectIndex = typeof e === 'string' ? e : e.target.id
      switch (this.selectIndex) {
        case "layerBtn": // 点击健康路评分
          this.search()
          break
          case "alarmBtn": // 点击管网告警
          this.fetchAlarmList()
          break
        case "scoreBtn": // 点击健康路评分
          this.fetchScoreList()
          break
          case "eventBtn": // 事件
          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",
        }
      ]
      clearUpMap()
      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)
      }
    },
    // ----------------------------------------管网健康路评分------------------------------------------
     // 获取管网健康路评分列表
     fetchScoreList() {
      const icon = require('@/assets/images/icon/智慧管网/score.png')
      const params = {
        startTime: '',
        endTime: '',
      }
      getScoreList(params).then(response => {
        if(response.code === 200) {
          clearUpMap()
          response.data.value.forEach(item => {
            AddLabelPoint(
              item.id,
              item.name,
              icon,
              [item.lon, item.lat, 0], 'gw', item,
              this.clickScoreMarker)
          })
        }
      })
      // const temp = [
      //   {
      //     score:"1",
      //     name:"飞扬大道(2020一期)",
      //     lon:"114.894804",
      //     id:"6509",
      //     lat:"25.772637",
      //   },
      //   {
      //     score:"1",
      //     name:"金富康小区6栋1号（品味鲜小吃）",
      //     lon:"114.86770265338376",
      //     id:"8152",
      //     lat:"25.756292746101437",
      //   },
      //   {
      //     score:"1",
      //     name:"玫瑰路(2020一期)",
      //     lon:"114.904256",
      //     id:"6511",
      //     lat:"25.78952",
      //   }
      // ]
      // temp.forEach(item => {
      //       AddLabelPoint(
      //         item.id,
      //         item.name,
      //         icon,
      //         [item.lon, item.lat, 0], 'gw', item,
      //         this.clickScoreMarker)
      //   })
    },
    // 点击健康路评分点位
    clickScoreMarker(eventArg) {
      const showScorePop = (e) => {
        const item = e._data.data
        this.showScorePop = true
        this.$nextTick(() => {
          this.$refs.scorePopRef.initData(item)
        })
      }
      if (this.showScorePop) {
        this.showScorePop = false
        setTimeout(() => {
          showScorePop(eventArg)
        }, 100);
      }
      else {
        showScorePop(eventArg)
      }
    },
  }
}
</script>

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