<template>
  <div>
    <div class="video-menu">
      <common-btn id="communityBtn" :select="selectIndex === 'communityBtn'" :bg="communityBg"
        :bg-hover="communityHover" 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" />
      <common-btn id="carBtn" :select="selectIndex === 'carBtn'" :bg="parkBg" :bg-hover="parkHover" 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" />

      <!-- 信息窗体 -->
      <devicePop ref="deviceRef" v-show="showDevice" @close="showDevice = false" />
      <carPop ref="carRef" v-show="showCar" @close="showCar = false" />
    </div>
    <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage"
      v-show="isListPage" @close="isListPage = false" />
    <communityPop ref="communityPop" 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 ListPage from "@/components/ListPage";
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import { getCommunityList, getHeat, getDevice, getCar, getCase, getCaseList } from '@/api/ywts/shms/sq'
import { heat } from '@/utils/freedo/heat'
import devicePop from './devicePop.vue'
import carPop from './carPop.vue'
import communityPop from './communityPop.vue'
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: 'Sq',
  components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, devicePop, carPop, ListPage, communityPop },
  data() {
    return {
      isShow: false,
      selectIndex: 'communityBtn',
      communityBg: require('@/assets/images/function/一卡通/场所未选中.png'),
      communityHover: require('@/assets/images/function/一卡通/场所选中.png'),
      communityIcon: require('@/assets/images/icon/一卡通/场所.png'),
      communityList: [],
      personBg: require('@/assets/images/function/教育/热力图未选中.png'),
      personHover: require('@/assets/images/function/教育/热力图选中.png'),
      menuTab: [{
        name: '社区设备',
        value: 'device'
      }],
      menus: {
        device: [
          { type: "1", typename: "视频设备", total: "0" },
          { type: "2", typename: "门禁设备", total: "0" }
        ]
      },
      icons: {
        device: [
          require('@/assets/images/left/icon/雷达.png'),
          require('@/assets/images/left/icon/卡口.png')
        ]
      },
      markerList: [],
      markerBakList: [],
      videoIcon: require('@/assets/images/icon/视频云/枪机未赋能在线.png'),
      controlIcon: require('@/assets/images/icon/一卡通/门禁.png'),
      heatData: [],
      showDevice: false,
      parkBg: require('@/assets/images/function/交通/智慧停车未选中.png'),
      parkHover: require('@/assets/images/function/交通/智慧停车选中.png'),
      carList: [],
      showCar: false,
      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
      isListPage: false,
      time: {
        startTime: '',
        endTime: '',
      },
      caseListQuery: {
        startTime: '',
        endTime: '',
        id: '',
        pageNo: 0,
        pageSize: 5
      },
      caseTotal: 0,
      caseList: [],
      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',
      }
    }
  },
  mounted() {
    clearResetMap()
    this.selectIndex = 'communityBtn'
    this.fetchCommunityList()
    window.imageryManager.addByPMTS({
      url: gridJson['智慧社区'],
      name: 'jy',
      autoFlyto: true,
    })
    // 设置默认选中图层
    eventBus.$emit('change-layer', { id: 41, checked: false });  // 智慧教育-手工模型
    eventBus.$emit('change-layer', { id: 42, checked: false });// 智慧停车云-手工模型
    eventBus.$emit('change-layer', { id: 43, checked: true });//智慧社区-手工模型
    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.showCar = false
      this.showDevice = false
      this.isListPage = false
    })
  },
  methods: {
    async btnClick(e) {
      clearResetMap()
      this.isShow = false
      this.showCar = false
      this.showDevice = false
      this.isListPage = false
      this.selectIndex = e.target.id
      switch (this.selectIndex) {
        case "communityBtn":
          this.fetchCommunityList()
          break
        case "personBtn":
          this.fetchHeat()
          break
        case "layerBtn":
          this.fetchDevice()
          break
        case "carBtn":
          this.fetchCar()
          break
        case "caseBtn":
          this.fetchCase()
          break
      }
    },
    // 获取社区列表
    fetchCommunityList() {
      const drawMarker = (list) => {
        const communityIcon = require('@/assets/images/icon/一卡通/场所.png')
        list.forEach(item => {
          if (item.lat && item.lon) {
            AddLabelPoint(
              item.id,
              item.name,
              communityIcon,
              [item.lon, item.lat, 0], 'sq', item,
              this.clickMarker)
          }
        })
      }
      if (this.communityList.length) {
        drawMarker(this.communityList)
        return
      }
      getCommunityList({}).then(res => {
        this.communityList = res.data.value
        drawMarker(this.communityList)

      })
    },
    // 点击社区
    clickMarker(eventArg) {
      const item = eventArg._data.data
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.communityPop.initData(item)
      })
    },
    // 获取人员热力
    fetchHeat() {
      if (this.heatData.length) {
        heat(this.heatData)
        return
      }
      // 获取人员热力
      getHeat({}).then(res => {
        this.heatData = res.data.value.filter((item) => item.lat && item.lng && item.value)
        // 绘制热力图
        heat(this.heatData)
      })
    },
    // 获取设备点位
    fetchDevice() {
      if (this.markerBakList.length) {
        this.markerList = JSON.parse(JSON.stringify(this.markerBakList))
        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)
        })
        return
      }
      getDevice({}).then(res => {
        // console.log(res.data, '设备点位')
        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)
      })
    },
    // 获取社区车辆
    fetchCar() {
      const drawMarker = (list) => {
        const carIcon = require('@/assets/images/icon/环卫/车辆.png')
        list.forEach((item) => {
          AddLabelPoint(
            item.id,
            `${item.name}`,
            carIcon,
            [item.lon, item.lat, 0], 'yl-dev', item,
            this.clickCar)
        })
      }
      if (this.carList.length) {
        drawMarker(this.carList)
        return
      }
      getCar().then(res => {
        // console.log(res.data, '社区车辆')
        // this.carList = res.data.value
        this.carList = [
          {
            "name": "停车场1",
            "lon": "114.859995",
            "location": "江西省赣州市南康区三江乡",
            "id": "1676397864375291905",
            "lat": "25.802129",
            carNum: '50',
            parkSpaceNum: '2',
          },
          {
            "name": "停车场2",
            "lon": "114.861027",
            "location": "江西省赣州市章贡区潭六路135号靠近逸夫小学",
            "id": "1676398916763914241",
            "lat": "25.757553",
            carNum: '88',
            parkSpaceNum: '2',
          },
          {
            "name": "停车场3",
            "lon": "114.880246",
            "location": "江西省赣州市章贡区潭东镇弘腾路毅德城",
            "id": "1676414593390350337",
            "lat": "25.753119",
            carNum: '15',
            parkSpaceNum: '1',
          },
        ]
        drawMarker(this.carList)
      })
    },
    // 点击社区车辆
    clickCar(eventArg) {
      const item = eventArg._data.data
      this.showCar = true
      this.$nextTick(() => {
        this.$refs.carRef.initData(item)
      })
    },
    // 事件时间查询条件
    handleTimeRange(time) {
      this.isListPage = false
      if (this.time.startTime !== '') {
        this.time = time
        this.fetchCase()
      } else {
        this.time = time
      }
    },
    // 获取事件
    fetchCase() {
      clearResetMap()
      getCase(this.time).then(res => {
        console.log(res.data, '事件点位')
        res.data.value.forEach(item => {
          AddLabelPoint(
            item.id,
            '',
            this.caseIcon[item.status],
            [item.lon, item.lat, 0], 'yl-case', item,
            this.clickCase)
        })
      })
    },
    // 点击事件点位
    clickCase(eventArg) {
      const item = eventArg._data.data
      // 查询事件详情
      this.isListPage = true
      this.caseListQuery = {
        startTime: this.time.startTime,
        endTime: this.time.endTime,
        id: item.id,
        pageNo: 0,
        pageSize: 5
      }
      this.caseList = []
      this.caseTotal = 0
      this.searchCaseMarkerList()
    },
    // 事件详情分页
    changePage(val) {
      if (val && val.page) {
        this.caseListQuery.pageNo = val.page
      }
      this.searchCaseMarkerList()
    },
    searchCaseMarkerList() {
      getCaseList(this.caseListQuery).then(res => {
        console.log(res.data, ' 时间性情')
        this.caseList = res.data.value
        this.caseTotal = res.data.valueSize
      })
    }
  },


}
</script>

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