<template>
  <div>
    <div class="video-menu">
      <layer-manager-mix title="基础设施" :isNeedIcon="false" :layer="dev" :layer-hover="devHover" :menu-tab="menuTab"
        :menus="menus" :select="selectIndex === 'deviceBtn'" id="deviceBtn" @btnClick="btnClick"
        @menuClick="menuClick" />
      <layer-manager-mix title="环保人员" :isNeedIcon="false" :layer="person" :layer-hover="personHover" :menu-tab="menuTab"
        :menus="menus" :select="selectIndex === 'personBtn'" id="personBtn" @btnClick="btnClick"
        @menuClick="menuClick" />
      <layer-manager-mix title="环卫车辆" :isNeedIcon="false" :layer="car" :layer-hover="carHover" :menu-tab="menuTab"
        :menus="menus" :select="selectIndex === 'carBtn'" id="carBtn" @btnClick="btnClick" @menuClick="menuClick" />
      <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" />
    <!-- 信息窗体 -->
    <Pop ref="popRef" v-if="showPop" @close="showPop = false" />
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import TimeManager from "@/components/TimeManager";
import Pop from './Pop.vue'
import { heat } from '@/utils/freedo/heat'
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import { AddDivPointHighlight, AddLabel } from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import { getPlacePointList, getOverviewStatistics, getPersonList, getCarList, getCaseList, getCaseInfo } from '@/api/ywts/cszl/hw'
import { iconFilter, iconPerson, personList, carList, iconCar } from './data'
import { eventBus } from "../../../../main";
export default {
  name: 'Hw',
  components: { TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop },
  data() {
    return {
      isListPage: false,
      ktSelect: '',
      selectIndex: 'deviceBtn',
      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'),
      person: require('@/assets/images/function/环卫/环保人员未选中.png'),
      personHover: require('@/assets/images/function/环卫/环保人员选中.png'),
      car: require('@/assets/images/function/环卫/环卫车辆未选中.png'),
      carHover: require('@/assets/images/function/环卫/环卫车辆选中.png'),
      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
      menuTab: [],
      menus: {
        // device: [
        //   { type: "1", typename: "****设备", total: "111" },
        // ],
        // others: [
        //   {type : "1", typename: "****设备", total: "111"},
        //   {type : "2", typename: "****设备", total: "111"}
        // ]
      },
      markerList: [],
      markerListBak: [],
      currentSelect: '',
      showPop: false,

    }
  },
  mounted() {
    clearResetMap()
    this.selectInde = 'deviceBtn'
    this.fetchPoint()
    // 设置默认选中图层
    eventBus.$emit('change-layer', { id: 41, checked: false });  // 智慧教育-手工模型
    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: false }); //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.isListPage = false
      this.showPop = false
    })
  },
  methods: {
    async btnClick(e) {
      clearResetMap()
      this.isListPage = false
      this.showPop = false
      this.selectIndex = e.target.id
      switch (this.selectIndex) {
        case "deviceBtn":
          this.fetchPoint()
          break
        case "personBtn":
          this.fetchPerson()
          break
        case "carBtn":
          this.fetchCar()
          break
        case "caseBtn":
          this.fetchCase()
          break
        //
      }
    },
    // 获取点位
    fetchPoint() {
      this.menuTab = [
        {
          name: '基础设施',
          value: 'device'
        }
      ]
      this.menus = {
        device: [
          {
            type: '1', typename: '垃圾桶', total: 0, icon: iconFilter('垃圾桶')
          },
          {
            type: '2', typename: '公厕', total: 0, icon: iconFilter('公厕')
          },
          {
            type: '3', typename: '中转站', total: 0, icon: iconFilter('中转站')
          },
          {
            type: '4', typename: '处理站', total: 0, icon: iconFilter('处理站')
          },
        ]
      }
      getPlacePointList({}).then(res => {
        console.log(res.data, '点位')
        const initData = res.data.value.filter(item => item.id && item.lon && item.lat)
        this.menus.device = this.menus.device.map((item) => {
          return {
            ...item,
            children: initData.filter(citem => citem.typename === item.type).map(citem => ({ ...citem, type: item.type, typename: item.typename })),
            total: initData.filter(citem => citem.typename === item.type).length
          }
        })
        console.log(this.menus.device)
        this.markerList = []
        this.menus.device.forEach(element => {
          this.markerList = [...this.markerList, ...element.children]
        });
        this.markerListBak = JSON.parse(JSON.stringify(this.markerList))
        console.log(this.markerList, 'this.markerList')
        // 绘制点位
        this.markerList.forEach((item) => {
          AddLabelPoint(
            item.id,
            `${item.name}-${item.typename}`,
            iconFilter(item.typename),
            [item.lon, item.lat, 0], 'yl-dev', item,
            this.clickMarker)
        })
      })
    },
    menuClick(e) {
      console.log(e, '123')
      clearResetMap()
      this.showPop = false
      if (this.currentSelect === e.typename) {
        //  退出筛选
        this.markerList = this.markerListBak
        this.currentSelect = ''
      }
      else {
        this.markerList = this.markerListBak.filter((item) => item.typename === e.typename)
        this.currentSelect = e.typename
      }
      this.markerList.forEach(item => {
        AddLabelPoint(
          item.id || new Date().getTime(),
          `${item.name}-${item.typename}`,
          iconFilter(item.typename),
          [item.lon, item.lat, 0], 'gd', item,
          this.clickMarker
        )
      })
    },
    // 点击点位
    clickMarker(eventArg) {
      const showPop = (e) => {
        const item = e._data.data
        this.showPop = true
        console.log(this.$refs.popRef)
        // this.$nextTick(() => {
        //   this.$refs.popRef.initData(item)
        // })
        setTimeout(() => {
          this.$nextTick(() => {
            this.$refs.popRef.initData(item)
          })
        }, 100);
      }
      if (this.showPop) {
        this.showPop = false
        setTimeout(() => {
          showPop(eventArg)
        }, 100);
      }
      else {
        showPop(eventArg)
      }
    },
    // 获取人员
    fetchPerson() {
      this.menus = {}
      this.menuTab = []
      getPersonList({}).then(res => {
        console.log(res.data, '人员')
        // iconPerson, personList
        personList.forEach(item => {
          AddLabelPoint(
            item.id || new Date().getTime(),
            `${item.name}`,
            iconPerson,
            [item.lon, item.lat, 0], 'gd', item,
            this.clickMarker
          )
        })
      })
    },
    //  获取车辆
    fetchCar() {
      this.menus = {}
      this.menuTab = []
      getCarList({}).then(res => {
        // console.log(res.data.value, '车辆')
        // const typeList = [...new Map(res.data.value.filter(item => item.id && item.lon && item.lat).map(item => item.typename))]
        // console.log(typeList, 'typeList')

        carList.forEach(item => {
          AddLabelPoint(
            item.id || new Date().getTime(),
            `${item.name}`,
            iconCar,
            [item.lon, item.lat, 0], 'gd', item,
            this.clickMarker
          )
        })
      })
    },
    // 获取事件
    fetchCase() {
      getCaseList(this.time).then(res => {
        console.log(res.data, '事件')
        // this.caseList = res.data.value || []
        //   this.caseTotal = this.caseList.length
        res.data.value.forEach(item => {
          AddLabelPoint(
            item.id.replaceAll('.', ''),
            '',
            this.caseIcon[item.status],
            [item.lon, item.lat, 0], 'gd-case', item,
            this.clickCase)
        })
      })
    },
    // 点击事件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()
    },
    searchCaseMarkerList() {
      getCaseInfo(this.caseListQuery).then(res => {
        console.log(res.data, '事件详情')
        this.caseList = res.data.value || []
        this.caseTotal = this.caseList.length
      })
    },
    // 事件换页
    changePage(val) {
      if (val && val.page) {
        this.caseListQuery.pageNo = val.page
      }
      this.searchCaseMarkerList()
    },
    handleTimeRange(time) {
      this.isListPage = false
      if (this.time.startTime !== '') {
        this.time = time
        this.fetchCase()
      } 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>