<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'" />
    </div>
    <!-- <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage"
      v-show="isListPage" @close="isListPage = 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 } from '@/api/ywts/zyhj/hb'

export default {
  name: 'Hb',
  components: {  TimeManager, LayerManagerMix, ListPage, CommonBtn },
  data() {
    return {
      isListPage: false,
      ktSelect: '',
      isShow: false,
      isShowMM: false,
      selectIndex: 'ylBtn',
      currentSelect: '',
      caseList: [],
      caseListQuery: {
        startTime: '',
        endTime: '',
        id: '',
        pageNo: 0,
        pageSize: 5
      },
      caseTotal: 0,
      showPop: false,
      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'),
      menuTab: [{
        name: '监测站点',
        value: 'device'
      }
      ],
      menus: {
        device: [
        ],
      }
    }
  },
  mounted() {
    clearResetMap()
    this.fetchData()
  },
  methods: {
    async btnClick(e) {
      this.selectIndex = e.target.id
      console.log(this.selectIndex, 'this.selectIndex')
    },
    // 获取概括统计
    fetchData() {
      getPointList({}).then(res => {
        console.log(res.data, '概括统计')
      })
    }
  }
}
</script>

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