<template>
  <div>
    <div class="video-menu">
      <common-btn id="schoolBtn" :select="selectIndex === 'schoolBtn'" :bg="school" :bg-hover="schoolHover" width="5"
        height="5" text-hover="学校" @click="btnClick" />
      <common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
        height="5" text-hover="师生热力" @click="btnClick" />
      <layer-manager-mix title="学校设备" :icons="icons" :menu-tab="menuTab" :menus="menus"
        :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
      <keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
        @click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
    </div>
    <school-pop ref="schoolPop" v-if="isShow" @close="isShow = false" />
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn"
import LayerManagerMix from "@/components/LayerManagerMix"
import KeywordManager from "@/components/KeywordManager"
import TimeManager from "@/components/TimeManager"
import SchoolPop from "./schoolPop"
import { getStatistics, getPointList, getPointInfo, getHeat, getDevice } from '@/api/ywts/shms/jy'
import { AddLabelPoint } from '@/utils/freedo'
import { heat } from '@/utils/freedo/heat'
import { clearUpMap, initPosition } from '@/utils/freedo'
import { focusPoint } from "../../../../utils/freedo";
import gridJson from "@/assets/mapJson/grid.json";
import mapJson from "@/assets/mapJson/map.json";
import modelJson from "@/assets/mapJson/school.json";
import { eventBus } from "../../../../main";

export default {
  name: 'Jy',
  components: { SchoolPop, TimeManager, KeywordManager, LayerManagerMix, CommonBtn },
  data() {
    return {
      isShow: false,
      ktSelect: '',
      keyword: '',
      keywordList: [],
      selectIndex: 'schoolBtn',
      personBg: require('@/assets/images/function/教育/热力图未选中.png'),
      personHover: require('@/assets/images/function/教育/热力图选中.png'),
      school: require('@/assets/images/function/教育/学校未选中.png'),
      schoolHover: require('@/assets/images/function/教育/学校选中.png'),
      menuTab: [{
        name: '学校设备',
        value: 'device'
      }],
      icons: {
        device: [
          require('@/assets/images/left/icon/雷达.png'),
          require('@/assets/images/left/icon/卡口.png')
        ]
      },
      menus: {
        device: [
          { type: "1", typename: "视频设备", total: "111" },
          { type: "2", typename: "门禁设备", total: "111" }
        ]
      }
    }
  },
  mounted() {
    this.search()
    // 教育网格
    window.imageryManager.addByPMTS({
      url: gridJson['智慧教育'],
      name: 'jy',
      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: 41, 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
    // )
    // // CIM2 楼
    // window.pmtsManager.add({
    //   url: mapJson['CIM2']['CIM2建筑（带纹理）'],
    //   show: true,
    //   name: 'CIM2建筑（带纹理）',
    //   autoFlyto: false
    // })
    // window.pmtsManager.add({
    //   url: mapJson['CIM2']['CIM2建筑（带纹理）'],
    //   show: true,
    //   name: 'CIM2建筑（带纹理）',
    //   autoFlyto: false,
    //   alpha: 0.5,
    //   color: '#002d7a'
    // })
    // for(let key in modelJson) {
    //   window.pmtsManager.add({
    //       id: key,
    //       // url: mapJson.CIM4["智慧教育-手工模型"],
    //       url: modelJson[key],
    //       show: true,
    //       maximumScreenSpaceError: 32,
    //       maximumMemoryUsage: 64,
    //       maximumAbsoluteMemoryUsage: 8192,
    //       autoFlyto: true
    //     },
    //     undefined
    //   )
    // }
  },
  methods: {
    async btnClick(e) {
      console.log(e.target.id, 'e.target.id')
      clearUpMap(true)
      initPosition()
      this.isShow = false
      this.selectIndex = e.target.id
      switch (this.selectIndex) {
        case "schoolBtn":
          this.search()
          break
        case "personBtn":
          getHeat().then(res => {
            if (res.code === 200) {
              heat(res.data.value.filter(item => item.lng !== "" && item.lng !== null)) // 热力图
            }
          })
          break
        case 'layerBtn':
          this.searchDevice()
          break
      }
    },
    // 点击icon事件
    clickJY(eventArg) {
      const item = eventArg._data.data
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.schoolPop.initData(item)
      })
    },
    // 查询学校点位
    search() {
      const icon = require('@/assets/images/icon/教育地图点位/学校.png')
      const icon1 = require('@/assets/images/icon/事件/已撤案.png')
      const wgs84 = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs'
      const nad83 = '+proj=longlat +datum=NAD83 +no_defs'
      const cgcs2000 = '+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs';
      const transform = proj4(wgs84, nad83)

      getPointList({ keywords: this.keyword }).then(response => {
        if (response.code === 200) {
          this.keywordList = response.data.value
          response.data.value.forEach(item => {
            const transformedCoords = transform.forward([Number(item.lon), Number(item.lat)])
            if (transformedCoords[0] !== 0) {
              // console.log([item.lon, item.lat, 0], 'before')
              // console.log([transformedCoords[0], transformedCoords[1], 0],'after')
              AddLabelPoint(item.id, item.name, icon, [transformedCoords[0], transformedCoords[1], 0], 'jy', item, this.clickJY)
            }
          })
        }
      })
    },
    changeState(v) {
      this.ktSelect = v
    },
    handleKeyword(keyword) {
      this.keyword = keyword
      const item = {
        target: {
          id: this.selectIndex
        }
      }
      initPosition()
      this.search()
      this.btnClick(item)
      this.ktSelect = 'keywordBtn'
    },
    localPoint(item) {
      focusPoint(item.lon, item.lat)
    },
    // 搜索学校设备
    searchDevice() {
      getDevice({}).then(res => {
        console.log('学校数据')
      })
    }
  }
}
</script>

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