<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" @menuClick="menuClick" />
      <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" />
    <!-- 信息窗体 -->
    <devicePop ref="deviceRef" v-if="showDevice" @close="showDevice = 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";
import devicePop from './devicePop.vue'

export default {
  name: 'Jy',
  components: { SchoolPop, TimeManager, KeywordManager, LayerManagerMix, CommonBtn, devicePop },
  data() {
    return {
      isShow: false,
      showDevice: 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: "0" },
          { type: "2", typename: "门禁设备", total: "0" }
        ]
      },
      markerList: [],
      markerBakList: [],
      videoIcon: require('@/assets/images/icon/视频云/枪机未赋能在线.png'),
      controlIcon: require('@/assets/images/icon/一卡通/门禁.png'),

    }
  },
  mounted() {
    this.search()
    // 教育网格
    window.imageryManager.addByPMTS({
      url: gridJson['智慧教育'],
      name: 'jy',
      autoFlyto: true,
    })
    // 设置默认选中图层
    eventBus.$emit('change-layer', { id: 41, checked: true });  // 智慧教育-手工模型
    eventBus.$emit('change-layer', { id: 42, checked: false });// 智慧停车云-手工模型
    eventBus.$emit('change-layer', { id: 43, checked: false });//智慧社区-手工模型
    eventBus.$emit('change-layer', { id: 44, checked: false });// 智慧工地-手工模型
    eventBus.$emit('change-layer', { id: 45, checked: false });// 智慧交通-手工模型
    eventBus.$emit('change-layer', { id: 46, checked: false });// 智慧园林-手工模型
    eventBus.$emit('change-layer', { id: 31, checked: false }); // 倾斜
    eventBus.$emit('change-layer', { id: 21, checked: true }); //CIM2建筑（带纹理）
    eventBus.$emit('change-layer', { id: 22, checked: false }); //CIM2建筑（纯白色）
    eventBus.$emit('change-layer', { id: 12, checked: true });  // 蓉江新区正射影像
    eventBus.$emit('change-layer', { id: 13, checked: true });  // 蓉江新区边界

    //  清除弹窗展示
    this.$bus.$on('clear', () => {
      this.isShow = false
      this.showDevice = false

    })
  },
  methods: {
    async btnClick(e) {
      console.log(e.target.id, 'e.target.id')
      clearUpMap(true)
      initPosition()
      this.isShow = false
      this.showDevice = 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({ keywords: '' }).then(res => {
        this.markerList = [
          {
            "name": "设备1",
            "lon": "114.859995",
            "location": "江西省赣州市南康区三江乡",
            "id": "1676397864375291905",
            "lat": "25.802129",
            "type": "1",
            "typename": "视频设备",
            statusName: '正常',
            time: '2025-06-16 09:05:05',
            in: '0',
            out: '0',
          },
          {
            "name": "设备2",
            "lon": "114.861027",
            "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
            "id": "1676398916763914241",
            "lat": "25.757553",
            "type": "2",
            "typename": "门禁设备",
            statusName: '正常',
            time: '2025-06-16 09:05:05',
            in: '0',
            out: '0',
          },
          {
            "name": "设备3",
            "lon": "114.880246",
            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
            "id": "1676414593390350337",
            "lat": "25.753119",
            "type": "1",
            "typename": "视频设备",
            statusName: '正常',
            time: '2025-06-16 09:05:05',
            in: '0',
            out: '0',
          },
          {
            "name": "设备4",
            "lon": "114.879855",
            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
            "id": "1676414955455254529",
            "lat": "25.752771",
            "type": "1",
            "typename": "视频设备",
            statusName: '正常',
            time: '2025-06-16 09:05:05',
            in: '0',
            out: '0',
          },
          {
            "name": "设备5",
            "lon": "114.875438",
            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
            "id": "1676418661630349312",
            "lat": "25.748733",
            "type": "2",
            "typename": "门禁设备",
            statusName: '正常',
            time: '2025-06-16 09:05:05',
            in: '0',
            out: '0',
          },
          {
            "name": "设备6",
            "lon": "114.867371",
            "location": "江西省赣州市章贡区105国道135号靠近松岭上",
            "id": "1676422908220542977",
            "lat": "25.750388",
            "typename": "2",
            "typename": "门禁设备",
            statusName: '正常',
            time: '2025-06-16 09:05:05',
            in: '0',
            out: '0',
          },
        ]
        this.markerBakList = JSON.parse(JSON.stringify(this.markerList))
        this.menus.device[0].total = this.markerList.filter((item) => item.type === '1').length
        this.menus.device[1].total = this.markerList.filter((item) => item.type === '2').length
        // 绘制点位
        this.markerList.forEach((item) => {
          AddLabelPoint(
            item.id,
            `${item.name}`,
            item.type === '1' ? this.videoIcon : this.controlIcon,
            [item.lon, item.lat, 0], 'yl-dev', item,
            this.clickDevice)
        })
      })
    },
    menuClick(e) {
      clearResetMap()
      this.markerList = this.markerBakList.filter(item => item.type === e.type)
      this.markerList.forEach((item) => {
        AddLabelPoint(
          item.id,
          `${item.name}`,
          item.type === '1' ? this.videoIcon : this.controlIcon,
          [item.lon, item.lat, 0], 'yl-dev', item,
          this.clickDevice)
      })
    },
    // 设备点位点击
    clickDevice(eventArg) {
      const item = eventArg._data.data
      this.showDevice = true
      this.$nextTick(() => {
        this.$refs.deviceRef.initData(item)
      })
    },
  }
}
</script>

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