<template>
  <div>
    <div class="video-menu">
      <common-btn id="gdBtn" :select="selectIndex==='gdBtn'" :bg="gd" :bg-hover="gdHover" width="5" height="5" text-hover="工地" @click="btnClick" />
      <!-- <layer-manager-mix title="工地设备" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick" @menuClick="layer"/> -->
      <common-btn id="personBtn" :select="selectIndex==='personBtn'" :bg="personBg" :bg-hover="personHover" width="5" height="5" text-hover="人员热力" @click="btnClick" />
      <common-btn id="scoreBtn" :select="selectIndex==='scoreBtn'" :bg="scoreBg" :bg-hover="scoreHover" 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'" :select="ktSelect==='timeBtn'" @handleTimeRange="handleTimeRange" @click="ktSelect='timeBtn'"/>
      <keyword-manager
        :resultList="keywordList"
        :select="selectIndex==='keywordBtn'"
        @handleKeyword="handleKeyword"
        @click="selectIndex='keywordBtn'"
        @localPoint="localPoint"/>
    </div>
    <gd-pop ref="gdPop" v-if="isShow" @close="isShow=false"/>
    <list-page
      ref="caseListPage"
      title="工地事件"
      :list="caseList"
      :query="caseListQuery"
      :total="caseTotal"
      @change="changePage"
      v-show="isListPage"
      @close="isListPage=false"
      info-url="jxhsj-jxhsjsttj/jxhsjst/lczzxq"/>
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import TimeManager from "@/components/TimeManager";
import GdPop from "./gdPop";
import { heat } from '@/utils/freedo/heat'
import { clearUpMap,  clearResetMap ,AddLabelPoint, initPosition } from '@/utils/freedo'
import {
  getHeat,
  getArea,
  getMonthGdScore,
  getDevList,
  getStatistics,
  getCasePointList, getCaseInfo
} from "../../../../api/ywts/cszl/gd";
import {AddDivPointCase, AddDivPointHighlight, AddLabel, focusPoint} from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import KeywordManager from "../../../../components/KeywordManager";
import gridJson from "@/assets/mapJson/grid.json";
import mapJson from "@/assets/mapJson/map.json";
import {eventBus} from "../../../../main";


export default {
  name: 'Gd',
  components: {KeywordManager, GdPop, TimeManager, LayerManagerMix, ListPage, CommonBtn },
  data() {
    return {
      isListPage: false,
      keyword: '',
      keywordList: [],
      isShow: false,
      selectIndex: 'gdBtn',
      ktSelect: '',
      caseList: [],
      caseListQuery: {
        startTime: '',
        endTime: '',
        id: '',
        pageNo: 0,
        pageSize: 5
      },
      caseTotal: 0,
      layerManager: null,
      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: '#ffffff88',
          2: '#fdeb5688',
          3: '#85c8ff88',
          4: '#ffba7488',
          5: '#87f6b388',
        },
      time: {
        startTime: '',
        endTime: '',
      },
      preCase: null,
      personBg: require('@/assets/images/function/精细化平台/热力图未选中.png'),
      personHover: require('@/assets/images/function/精细化平台/热力图选中.png'),
      gd: require('@/assets/images/function/工地/工地未选中.png'),
      gdHover: require('@/assets/images/function/工地/工地选中.png'),
      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
      scoreBg: require('@/assets/images/function/工地/工地得分未选中.png'),
      scoreHover: require('@/assets/images/function/工地/工地得分选中.png'),
      alarm: require('@/assets/images/function/物联网/物联告警未选中.png'),
      alarmHover: 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()

    // 工地网格
    window.imageryManager.addByPMTS({
      url: gridJson['智慧工地'],
      name: 'gd',
      autoFlyto: true,
    })

    eventBus.$emit('change-layer', { id:1, checked: false});
    eventBus.$emit('change-layer', { id:2, checked: false});
    eventBus.$emit('change-layer', { id:3, checked: false});
    eventBus.$emit('change-layer', { id:4, checked: false});
    eventBus.$emit('change-layer', { id:5, checked: true});
    eventBus.$emit('change-layer', { id:44, checked: true});
    eventBus.$emit('change-layer', { id:21, checked: true});
    eventBus.$emit('change-layer', { id:12, checked: true});


    // window.pmtsManager.add({
    //     id: "智慧工地-手工模型",
    //     url: mapJson.CIM4["智慧工地-手工模型"],
    //     show: true,
    //     maximumScreenSpaceError: 32,
    //     maximumMemoryUsage: 64,
    //     maximumAbsoluteMemoryUsage: 8192,
    //     autoFlyto: true
    //   },
    //   undefined
    // )
    // window.terrainManager.visible = true
  },
  methods: {
    async btnClick(e) {
      // clearUpMap(true)
      clearResetMap()
      initPosition()
      this.isListPage = false
      this.isShow = false
      this.selectIndex = e.target.id
      this.ktSelect = ''
      switch (this.selectIndex) {
        case "caseBtn":
          this.casePoint()
          break
        case "gdBtn":
          this.search()
          break
        case "scoreBtn":
          this.score()
          break
        case "personBtn":
          getHeat().then(res => {
            if(res.code === 200) {
              console.log(res.data, '热力')
              const arr = res.data.value.filter(item => item.lng !== "" && item.lng !== null)
              // arr.splice(0,1) // todo: 测试第一个错误数据
              heat(arr)
            }
          })
          break
      }
    },
    // 设备图层控制
    layer(item) {
      // clearUpMap(true)
      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(true)
          this.keywordList = response.data.value
          response.data.value.forEach(item => {
            AddLabelPoint(
              item.id,
              '',
              item.status === '1'? iconOnline: iconOffline,
              [item.lon, item.lat, 0], 'gd-dev', item,
              null)
          })
        }
      })
    },
    // 事件点位
    casePoint() {
      const param = {
        ...this.time,
        // keywords: this.keyword
      }
      getCasePointList(param).then(response => {
        if(response.code === 200) {
          clearUpMap(true)
          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)
            }
          })
          this.keywordList = data
          data.forEach(item => {
            // if(item.total === '1') {
              AddLabelPoint(
                item.id,
                '',
                this.caseIcon[item.eventstatus],
                [item.lon, item.lat, 0], 'gd-case', item,
                this.clickCase)
            // } else {
            //   AddDivPointCase(item, this.caseColor[item.status], item.total, this.clickCase)
            // }
          })
        }
      })
    },
    // 查询工地点位
    search() {
      const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
      getArea({keywords: this.keyword}).then(response => {
        if(response.code === 200) {
          clearUpMap(true)
          this.keywordList = response.data.value
          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.clickGd)
          })
        }
      })
    },
    // 智慧工地-工地近1月综合得分
    score() {
      const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
      getArea({keywords: this.keyword}).then(response => {
        if(response.code === 200) {
          this.keywordList = response.data.value
          response.data.value.forEach(item => {
            // console.log(item,'321123')
            // todo : 画范围
            // AddLabelPoint(
            //   item.id,
            //   item.name,
            //   item.status === '2' ? iconDoing: iconDone,
            //   [item.lon, item.lat, 0], 'gd', item,
            //   this.clickGd)
          })
        }
      })
      getMonthGdScore({keywords: this.keyword}).then(response => {
        if(response.code === 200) {
          response.data.value.filter(item => item.lng !== "" && item.lng !== null).forEach(item => {
            AddLabel(
              item.id,
              item.score,
              [item.lon, item.lat, 0], 'gdScore', item,
              this.clickGd)
          })
        }
      })
    },
    // 点击icon事件
    clickGd(eventArg) {
      const item = eventArg._data.data
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.gdPop.initData(item)
      })
    },
    // 点击事件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)
      }
      if(item.total === '1') {
        // 保存当前marker
        this.preCase = item
        // 高亮当前marker
        window.mmManager.removeById(item.id)
        AddDivPointHighlight(item, this.caseColor[item.status])
      } else {
        this.preCase = null
      }
      // 查询事件详情
      this.caseTotal  = Number(item.total)
      this.isListPage = true
      this.$refs.caseListPage.initDialog()
      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
        }
      })
    },
    handleTimeRange(time) {
      this.isListPage = false
      if(this.time.startTime !== '') {
        this.time = time
        this.casePoint()
      } else {
        this.time = time
      }
    },
    handleKeyword(keyword) {
      this.keyword = keyword
      const item = {
        target: {
          id: this.selectIndex
        }
      }
      this.search()
      this.btnClick(item)
      this.ktSelect = 'keywordBtn'
    },
    localPoint(item) {
      focusPoint(item.lon, item.lat)
    }
  }
}
</script>

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