<template>
  <div>
    <div class="video-menu">
      <layer-manager-mix title="基础设施" :layer="dev" :layer-hover="devHover" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick" @menuClick="layer"/>
      <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" />
      <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: 'Gw',
  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn },
  data() {
    return {
      isListPage: false,
      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() {
    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
      }
    },
    // 设备图层控制
    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-dev', 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>