<template>
  <div>
    <div class="video-menu">
      <!-- <common-btn id="ylBtn" :select="selectIndex === 'ylBtn'" :bg="offline" :bg-hover="offlineHover" width="5" height="5"
        text-hover="监测站点" @click="btnClick" /> -->
      <layer-manager-mix title="监测站点" :isNeedIcon="false" :menu-tab="menuTab" :menus="menus"
        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" @menuClick="menuClick" />
      <common-btn id="alarmBtn" :select="selectIndex === 'alarmBtn'" :bg="alarm" :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" />
      <time-manager v-show="selectIndex === 'caseBtn'" @handleTimeRange="handleTimeRange" />
    </div>
    <!-- <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage"
      v-show="isListPage" @close="isListPage = false" /> -->
    <!-- 信息窗体 -->
    <pointPop ref="popRef" v-if="showPop" @close="showPop = false" />
    <alarmPop ref="alarmRef" v-show="showAlarm" @close="showAlarm = false" />
    <casePop ref="caseRef" v-show="showCase" @close="showCase = 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 { AddDivPointHighlight, AddLabel } from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import { getOverviewStatistics, getPointList, getAlarmList, getCaseList } from '@/api/ywts/zyhj/hb'
import pointPop from './ponitPop.vue'
import alarmPop from './alarmPop.vue'
import casePop from './casePop.vue'
import { eventBus } from "../../../../main";
export default {
  name: 'Hb',
  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, pointPop, alarmPop, casePop },
  data() {
    return {
      showPop: false,
      showAlarm: false,
      showCase: false,
      isListPage: false,
      ktSelect: '',
      isShow: false,
      isShowMM: false,
      selectIndex: 'ylBtn',
      currentSelect: '',
      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: '',
      },
      markerList: [],
      markerListBak: [],
      preCase: null,
      alarm: require('@/assets/images/function/物联网/物联告警未选中.png'),
      alarmHover: require('@/assets/images/function/物联网/物联告警选中.png'),
      offline: require('@/assets/images/function/视频云/离线视频点位未选中.png'),
      offlineHover: require('@/assets/images/function/视频云/离线视频点位选中.png'),
      yl: require('@/assets/images/function/园林/园林未选中.png'),
      ylHover: require('@/assets/images/function/园林/园林选中.png'),
      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
      alarmIcon: require('@/assets/images/icon/视频云/坐标.png'),
      menuTab: [{
        name: '监测站点',
        value: 'device'
      }
      ],
      menus: {
        device: [
        ],
      }
    }
  },
  mounted() {
    clearResetMap()
    this.selectIndex = 'layerBtn'
    this.fetchData()

    //  清除弹窗展示
    this.$bus.$on('clear', () => {
      this.showPop = false
      this.showAlarm = false
      this.showCase = false
    })

    // 设置默认选中图层
    eventBus.$emit('change-layer', { id: 41, checked: false });  // 智慧教育-手工模型
    eventBus.$emit('change-layer', { id: 42, checked: false });// 智慧停车云-手工模型
    eventBus.$emit('change-layer', { id: 43, checked: false });//智慧社区-手工模型
    eventBus.$emit('change-layer', { id: 44, checked: false });// 智慧工地-手工模型
    eventBus.$emit('change-layer', { id: 45, checked: false });// 智慧交通-手工模型
    eventBus.$emit('change-layer', { id: 46, checked: false });// 智慧园林-手工模型
    eventBus.$emit('change-layer', { id: 31, checked: false }); // 倾斜
    eventBus.$emit('change-layer', { id: 21, checked: false }); //CIM2建筑（带纹理）
    eventBus.$emit('change-layer', { id: 22, checked: false }); //CIM2建筑（纯白色）
    eventBus.$emit('change-layer', { id: 12, checked: true });  // 蓉江新区正射影像
    eventBus.$emit('change-layer', { id: 13, checked: true });  // 蓉江新区边界
  },
  methods: {
    async btnClick(e) {
      clearResetMap()
      this.selectIndex = e.target.id
      this.showPop = false
      this.showAlarm = false
      this.showCase = false
      switch (this.selectIndex) {
        case "layerBtn":
          this.fetchData()
          break
        case "alarmBtn":
          this.fetchAlarm()
          break
        case "caseBtn":
          this.fetchCase()
          break

      }
    },
    menuClick(e) {
      console.log(e, 'e')
      clearResetMap()
      this.markerList = this.markerListBak.filter(item => item.typename === e.type)
      console.log(this.markerList)
      this.markerList.forEach((item) => {
        AddLabelPoint(
          item.id,
          `${item.name}`,
          undefined,
          [item.lon, item.lat, 0], 'yl-dev', item,
          this.clickMarker)
      })
    },
    // 获取概括统计
    fetchData() {
      this.menuTab = [
        {
          name: '基础设施',
          value: 'device'
        }
      ]
      this.menus = {
        device: [
          {
            type: '1', typename: '大气环境', total: 0,
          },
          {
            type: '2', typename: '噪声环境', total: 0,
          },
          {
            type: '3', typename: '污染源', total: 0,
          },
          {
            type: '4', typename: '工地扬尘', total: 0,
          },
        ]
      }
      // getPointList({}).then(res => {
      //   console.log(res.data, '概括统计')
      // })
      getOverviewStatistics({}).then(res => {
        console.log(res.data, '概括统计')
        this.menus.device = res.data.value.map(item => ({
          typename: item.typename,
          type: item.type,
          total: item.total,
        }))
        // 获取点位列表
        getPointList({ pageNo: 1, pageSize: 5 }).then(res => {
          this.markerList = [
            {
              "name": "大气环境",
              "lon": "114.859995",
              "location": "江西省赣州市南康区三江乡",
              "id": "1676397864375291905",
              "lat": "25.802129",
              "typename": "1"
            },
            {
              "name": "噪声环境",
              "lon": "114.861027",
              "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
              "id": "1676398916763914241",
              "lat": "25.757553",
              "typename": "2"
            },
            {
              "name": "污染源",
              "lon": "114.880246",
              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
              "id": "1676414593390350337",
              "lat": "25.753119",
              "typename": "3"
            },
            {
              "name": "污染源",
              "lon": "114.879855",
              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
              "id": "1676414955455254529",
              "lat": "25.752771",
              "typename": "3"
            },
            {
              "name": "污染源",
              "lon": "114.875438",
              "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
              "id": "1676418661630349312",
              "lat": "25.748733",
              "typename": "3"
            },
            {
              "name": "污染源",
              "lon": "114.867371",
              "location": "江西省赣州市章贡区105国道135号靠近松岭上",
              "id": "1676422908220542977",
              "lat": "25.750388",
              "typename": "1"
            },
            {
              "name": "工地扬尘",
              "lon": "114.878448",
              "location": "江西省赣州市章贡区潭东镇生态大道",
              "id": "1676434916261236737",
              "lat": "25.737305",
              "typename": "4"
            },
          ]
          this.markerListBak = JSON.parse(JSON.stringify(this.markerList))
          this.markerList.forEach((item) => {
            AddLabelPoint(
              item.id,
              `${item.name}`,
              undefined,
              [item.lon, item.lat, 0], 'yl-dev', item,
              this.clickMarker)
          })
        })
      })
    },
    // 点击点位
    clickMarker(eventArg) {
      const item = eventArg._data.data
      this.showPop = true
      this.$nextTick(() => {
        this.$refs.popRef.initData(item)
      })
    },
    // 获取告警
    fetchAlarm() {
      console.log('获取告警')
      getAlarmList({ pageNo: '1', pageSize: '99' }).then(res => {
        console.log(res.data, '告警列表')
        res.data.value.forEach((item) => {
          AddLabelPoint(
            item.id,
            `${item.devicetypename}`,
            this.alarmIcon,
            [item.lon, item.lat, 0], 'yl-dev', item,
            this.clickAlarmIcon)
        })
      })
    },
    // 点击告警点位
    clickAlarmIcon(eventArg) {
      const item = eventArg._data.data
      this.showAlarm = true
      this.$nextTick(() => {
        this.$refs.alarmRef.initData(item)
      })
    },
    // 获取事件
    fetchCase() {
      console.log('获取事件')
      getCaseList({ pageNo: '1', pageSize: '99', ...this.time }).then(res => {
        console.log(res.data, '事件列表')
        res.data.value.forEach((item) => {
          console.log(this.caseIcon[item.eventstatus.trim()])
          const icon = this.caseIcon[item.eventstatus.trim()] || ''
          AddLabelPoint(
            item.id,
            `${item.eventypename}`,
            icon,
            [item.lon, item.lat, 0], 'yl-dev', item,
            this.clickCase)
        })
      })
    },
    // 事件图标点击
    clickCase(eventArg) {
      const item = eventArg._data.data
      this.showCase = true
      this.$nextTick(() => {
        this.$refs.caseRef.initData(item)
      })
    },
    // 事件时间查询条件
    handleTimeRange(time) {
      // this.isListPage = false
      if (this.time.startTime !== '') {
        this.time = time
        clearResetMap()
        this.fetchCase()
      } else {
        this.time = time
      }
    },
  }
}
</script>

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