<!-- 管网 -->
<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="btnClick" />
      <common-btn id="alarmBtn" :select="selectIndex==='alarmBtn'" :bg="alarmBg" :bg-hover="alarmHover" width="5" height="5" text-hover="管网告警" @click="btnClick" />
      <common-btn id="caseBtn" :select="selectIndex==='caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5" text-hover="管网事件" @click="btnClick" />
    </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" />
  </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
} from "../../../../api/ywts/cszl/gw";
import {AddDivPointHighlight, AddLabel} from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import Pop from "./pop.vue";
import { TEXT_STYLE_OPTIONS } from "echarts/lib/util/model";

export default {
  name: 'Gw',
  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop},
  // components: { TimeManager, LayerManagerMix, ListPage, CommonBtn },
  data() {
    return {
      isListPage: false,
      isShow: false,
      showPop: false,
      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'
      }
      // , {
      //   name: '环监设备',
      //   value: 'others'
      // }
      ],
      menus: {
        device: [
        ],
        // others: [
        //   {type : "1", typename: "****设备", total: "111"},
        //   {type : "2", typename: "****设备", total: "111"}
        // ]
      }
    }
  },
  mounted() {
    clearResetMap()
    // 获取概况统计
    getStatistics().then(response => {
      if(response.code === 200) {
        this.menus.device = response.data.value
      }
    })
    this.search()
  },
  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
      }
    },
    // 查询管网物联设备点位
    search() {
      const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
      // getArea({
      //   deviceType: '',
      //   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()
    },
  }
}
</script>

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