<template>
  <div>
    <div class="video-menu">
      <layer-manager-mix title="重点防护" :layer="place" :layer-hover="placeHover" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='placeBtn'" id="placeBtn" @btnClick="btnClick" @menuClick="layer"/>
      <layer-manager-mix title="感知设备" :layer="device" :layer-hover="deviceHover" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='deviceBtn'" id="deviceBtn" @btnClick="btnClick" @menuClick="layer"/>
      <!-- <layer-manager-mix title="感知设备" :layer="device" :layer-hover="deviceHover" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='deviceBtn'" id="deviceBtn" @btnClick="btnClick" @menuClick="layer"/> -->
      <common-btn id="askBtn" :select="selectIndex==='askBtn'" :bg="askBg" :bg-hover="askHover" width="5" height="5" text-hover="交通问诊" @click="btnClick" />
      <layer-manager-mix title="交通实况" :layer="real" :layer-hover="realHover" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='realBtn'" id="realBtn" @btnClick="btnClick" @menuClick="layer"/>
      <common-btn id="parkBtn" :select="selectIndex==='parkBtn'" :bg="parkBg" :bg-hover="parkHover" 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"/>
  </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, AddLabelPoint } from '@/utils/freedo'
import {
  getHeat,
  getArea,
  getDevList,
  getStatistics,
  getCasePointList, getCaseInfo
} from "../../../../api/ywts/cszl/gd";
import {AddDivPointHighlight, AddLabel} from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";

export default {
  name: 'Jt',
  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn },
  data() {
    return {
      isListPage: false,
      ktSelect: '',
      selectIndex: 'placeBtn',
      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,
      place: require('@/assets/images/function/交通/重点场所未选中.png'),
      placeHover: require('@/assets/images/function/交通/重点场所选中.png'),
      device: require('@/assets/images/function/交通/交通设施未选中.png'),
      deviceHover: require('@/assets/images/function/交通/交通设施选中.png'),
      real: require('@/assets/images/function/交通/交通实况未选中.png'),
      realHover: require('@/assets/images/function/交通/交通实况选中.png'),
      askBg: require('@/assets/images/function/交通/交通问诊未选中.png'),
      askHover: require('@/assets/images/function/交通/交通问诊选中.png'),
      parkBg: require('@/assets/images/function/交通/智慧停车未选中.png'),
      parkHover: require('@/assets/images/function/交通/智慧停车选中.png'),
      caseBg: require('@/assets/images/function/交通/交通事故未选中.png'),
      caseHover: require('@/assets/images/function/交通/交通事故选中.png'),
      menuTab: [{
        name: '基础设施',
        value: 'place'
      }
      // , {
      //   name: '环监设备',
      //   value: 'others'
      // }
      ],
      menus: {
        place: [
        ],
        // others: [
        //   {type : "1", typename: "****设备", total: "111"},
        //   {type : "2", typename: "****设备", total: "111"}
        // ]
      }
    }
  },
  mounted() {
    getStatistics().then(response => {
      if(response.code === 200) {
        this.menus.place = response.data.value
      }
    })
    this.search()
    //  清除弹窗展示
    this.$bus.$on('clear', () => {
      this.isListPage = false
    })
  },
  methods: {
    async btnClick(e) {
      clearUpMap()
      this.isListPage = false
      this.selectIndex = e.target.id
      switch (this.selectIndex) {
        case "caseBtn":
          this.casePoint()
          break
        case "placeBtn":
          this.search()
          break
      }
    },
    // 设备图层控制
    layer(item) {
      // clearUpMap()
      const iconOnline = require('@/assets/images/icon/工地地图点位/'+item.typename.replace(/ /g,'')+'在线.png')
      const iconOffline = require('@/assets/images/icon/工地地图点位/'+item.typename.replace(/ /g,'')+'离线.png')
      getDevList({type: item.type}).then(response => {
        if(response.code === 200) {
          clearUpMap()
          response.data.value.forEach(item => {
            AddLabelPoint(
              item.id,
              '',
              item.status === '1'? iconOnline: iconOffline,
              [item.lon, item.lat, 0], 'gd-place', item,
              null)
          })
        }
      })
    },
    // 事件点位
    casePoint() {
      console.log(this.time)
      getCasePointList(this.time).then(response => {
        if(response.code === 200) {
          clearUpMap()
          const data = []
          response.data.value.forEach(item => {
            if(!data.map(da => da.id).includes(item.id) && !data.map(da => da.lon).includes(item.lon) && item.id !== null) {
              data.push(item)
            }
          })
          data.forEach(item => {
            AddLabelPoint(
              item.id,
              '',
              this.caseIcon[item.status],
              [item.lon, item.lat, 0], 'gd-case', item,
              this.clickCase)
          })
        }
      })
    },
    // 查询工地点位
    search() {
      const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
      getArea({}).then(response => {
        if(response.code === 200) {
          clearUpMap()
          response.data.value.forEach(item => {
            // console.log(item.areaboundary)
            // todo : 画范围
            AddLabelPoint(
              item.id,
              item.name,
              item.status === '2' ? iconDoing: iconDone,
              [item.lon, item.lat, 0], 'gd', item,
              this.clickHw)
          })
        }
      })
    },
    // 智慧工地-工地近1月综合得分
    score() {
      getArea({}).then(response => {
        if(response.code === 200) {
          response.data.value.forEach(item => {
            console.log(item.areaboundary)
            // todo : 画范围
          })
        }
      })
    },
    // 点击事件icon
    clickCase(eventArg) {
      const item = eventArg._data.data
      // 恢复上一个marker
      if(this.preCase !== null ) {
        window.mmManager.removeById(this.preCase.id)
        AddLabelPoint(
          this.preCase.id,
          '',
          this.caseIcon[this.preCase.status],
          [this.preCase.lon, this.preCase.lat, 0], 'gd-case', this.preCase,
          this.clickCase)
      }
      // 保存当前marker
      this.preCase = item
      // 高亮当前marker
      window.mmManager.removeById(item.id)
      AddDivPointHighlight(item, this.caseColor[item.status])

      // 查询事件详情
      this.isListPage = true
      this.caseListQuery = {
        startTime: this.time.startTime,
        endTime: this.time.endTime,
        id: item.id,
        pageNo: 0,
        pageSize: 5
      }
      this.searchCaseMarkerList()
    },
    // 事件换页
    changePage(val) {
      if (val && val.page) {
        this.caseListQuery.pageNo = val.page
      }
      this.searchCaseMarkerList()
    },
    searchCaseMarkerList() {
      // getCaseInfo(this.caseListQuery).then(response => {
      getCaseInfo(this.caseListQuery).then(response => {
        if(response.code === 200) {
          console.log(response.data.value)
          // 右侧看板
          this.caseList  = response.data.value
          // todo
          // this.caseTotal  = response.data.value.length
          this.caseTotal  = 12
        }
      })
    },
    changeState(v) {
      this.ktSelect = v
    },
    handleTimeRange(time) {
      this.isListPage = false
      if(this.time.startTime !== '') {
        this.time = time
        this.casePoint()
      } 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>