<template>
  <div>
    <div class="video-menu">
      <common-btn id="ylBtn" :select="selectIndex === 'ylBtn'" :bg="yl" :bg-hover="ylHover" 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="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>
    <yl-pop ref="ylPop" v-if="isShow" @close="isShow = false" />
    <list-page title="监测事件" :list="caseList" :query="caseListQuery" :total="caseTotal" @change="changePage"
      v-show="isListPage" @close="isListPage = false" />
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import TimeManager from "@/components/TimeManager";
import YlPop from "./ylPop";
import { heat } from '@/utils/freedo/heat'
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import {
  getHeat,
  getArea,
  getDevList,
  getStatistics,
  getCasePointList, getCaseInfo
} from "../../../../api/ywts/cszl/gd";
import { getPointList } from '@/api/ywts/zyhj/yl'
import { AddDivPointHighlight, AddLabel } from "../../../../utils/freedo";
import { getDevice } from '@/api/ywts/zyhj/yl'
import ListPage from "@/components/ListPage";

export default {
  name: 'Yl',
  components: { YlPop, TimeManager, LayerManagerMix, ListPage, CommonBtn },
  data() {
    return {
      isListPage: false,
      ktSelect: '',
      isShow: false,
      selectIndex: 'ylBtn',
      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,
      yl: require('@/assets/images/function/园林/园林未选中.png'),
      ylHover: require('@/assets/images/function/园林/园林选中.png'),
      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
      menuTab: [{
        name: '园林设备',
        value: 'device'
      }
        // , {
        //   name: '环监设备',
        //   value: 'others'
        // }
      ],
      menus: {
        device: [
          {
            type: "1", typename: "球机", total: "111",
            children: [
              {
                typename: '球机',
                name: '111球机',
                lng: '114.864044',
                lat: '25.764514',
              },
            ]
          },
        ],
        // others: [
        //   {type : "1", typename: "****设备", total: "111"},
        //   {type : "2", typename: "****设备", total: "111"}
        // ]
      }
    }
  },
  mounted() {
    this.fetchPoinitList()
  },
  methods: {
    async btnClick(e) {
      console.log(e.target.id)
      clearResetMap()
      this.isListPage = false
      this.isShow = false
      this.selectIndex = e.target.id
      switch (this.selectIndex) {
        case "caseBtn":
          this.casePoint()
          break
        case "ylBtn":
          this.fetchPoinitList()
          break
        case "personBtn":
          getHeat().then(res => {
            if (res.code === 200) {
              const arr = res.data.value.filter(item => item.lng !== "" && item.lng !== null)
              arr.splice(0, 1) // todo: 测试第一个错误数据
              heat(arr)
            }
          })
          break
        case "layerBtn":
          // 获取园林设备数据
          this.fetchDeviceList()
          break
      }
    },
    // 设备图层控制
    layer(item) {
      // clearUpMap()
      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()
          response.data.value.forEach(item => {
            AddLabelPoint(
              item.id,
              '',
              item.status === '1' ? iconOnline : iconOffline,
              [item.lon, item.lat, 0], 'yl-dev', item,
              null)
          })
        }
      })
    },
    // 事件点位
    casePoint() {
      console.log(this.time)
      getCasePointList(this.time).then(response => {
        if (response.code === 200) {
          clearUpMap()
          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)
            }
          })
          data.forEach(item => {
            AddLabelPoint(
              item.id,
              '',
              this.caseIcon[item.status],
              [item.lon, item.lat, 0], 'yl-case', item,
              this.clickCase)
          })
        }
      })
    },
    // 查询园林点位
    search() {
      const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
      getArea({}).then(response => {
        if (response.code === 200) {
          clearUpMap()
          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], 'yl', item,
              this.clickYl)
          })
        }
      })
    },
    // 点击icon事件
    clickYl(eventArg) {
      const item = eventArg._data.data
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.ylPop.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], 'yl-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()
    },
    // 事件换页
    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
          // todo
          // this.caseTotal  = response.data.value.length
          this.caseTotal = 12
        }
      })
    },
    changeState(v) {
      this.ktSelect = v
    },
    handleTimeRange(time) {
      this.isListPage = false
      if (this.time.startTime !== '') {
        this.time = time
        this.casePoint()
      } else {
        this.time = time
      }
    },
    // 获取园林设备
    fetchDeviceList(params) {
      getDevice(params).then(res => {
        console.log(res.data, '园林设备')
      })
    },
    // 获取园林点位
    fetchPoinitList() {
      getPointList({}).then(res => {
        const pointList = res.data.value || []
        // 绘制
        const iconYL = require('@/assets/images/icon/园林/园林.png')
        pointList.forEach(item => {
        AddLabelPoint(
          item.id || new Date().getTime(),
          item.name,
          iconYL,
          [item.lon, item.lat, 0], 'gd', item,
          this.clickYl
        )
      })
      })
    }
  }
}
</script>

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