<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 id="layerBtn" title="园林设备" :isNeedIcon="false" :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'"
        @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>
    <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" />
      <!-- 信息窗体 -->
    <Pop ref="pop" v-if="showPop" @close="showPop = false" />
    <!-- 苗木信息窗体 -->
    <mmPop ref="mmpop" v-if="isShowMM" @close="isShowMM = false" />
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import TimeManager from "@/components/TimeManager";
import YlPop from "./ylPop";
import Pop from './Pop.vue'
import mmPop from './mmPop.vue'
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, getCaseList, getCaseInfo, getseedlingList } from '@/api/ywts/zyhj/yl'
import { iconFilter } from './data'
import ListPage from "@/components/ListPage";

export default {
  name: 'Yl',
  components: { YlPop, TimeManager, LayerManagerMix, ListPage, CommonBtn, Pop, mmPop },
  data() {
    return {
      isListPage: false,
      ktSelect: '',
      isShow: false,
      isShowMM: false,
      selectIndex: 'ylBtn',
      currentSelect: '',
      caseList: [],
      caseListQuery: {
        startTime: '',
        endTime: '',
        id: '',
        pageNo: 0,
        pageSize: 5
      },
      caseTotal: 0,
      showPop: false,
      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: '',
      },
      markerList: [],
      markerListBak: [],
      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() {
    clearResetMap()
    this.fetchPoinitList()
  },
  methods: {
    async btnClick(e) {
      console.log(e.target.id)
      clearResetMap()
      this.isListPage = false
      this.isShow = false
      this.showPop = false
      this.isShowMM = 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)
      getCaseList(this.time).then(response => {
        console.log(response.data, '点位数据')
        if (response.code === 200) {
          clearResetMap()
          const data = []
          response.data.value.forEach(item => {
            if (item.id && item.lon && item.lat) {
              data.push(item)
            }
          })
          console.log(data, '事件点位')
          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 = response.data.valueSize
        }
      })
    },
    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, '园林设备')
        const initData = res.data.value.filter(item => item.lon && item.lat)
        const typeName = Array.from(new Set(res.data.value.filter(item => item.lon && item.lat).map((item) => item.typename)))
        this.menus.device = typeName.map(item => {
          return {
            typename: item,
            total: initData.filter(citem => citem.typename === item).length,
            type: initData.filter(citem => citem.typename === item)[0].type,
            list: initData.filter(citem => citem.typename === item),
          }
        })
        // 绘制
        this.markerList = initData
        this.markerListBak = JSON.parse(JSON.stringify(initData))
        this.markerList.forEach(item => {
          AddLabelPoint(
            item.id || new Date().getTime(),
            item.name,
            iconFilter(item.typename, item.statusname),
            [item.lon, item.lat, 0], 'gd', 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,
          iconFilter(item.typename, item.statusname),
          [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.pop.initData(item)
        })
      }
      if (this.showPop) {
        this.showPop = false
        setTimeout(() => {
          showPop(eventArg)
        }, 100);
      }
      else {
        showPop(eventArg)
      }
    },
    // 获取园林点位
    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
        )
      })
      })
      getseedlingList({}).then(res => {
        console.log('苗木', res.data)
        const initData = res.data.value.filter(item => item.id && item.lon && item.lat)
        console.log(initData, 'initData')
        initData.forEach(item => {
          AddLabelPoint(
          item.id || new Date().getTime(),
          item.name,
          undefined,
          [item.lon, item.lat, 0], 'gd', item,
          this.clickMM
        )
        })

      })
    },
    // 点击苗木
    clickMM(eventArg) {
      const item = eventArg._data.data
      this.isShowMM = true
      this.$nextTick(() => {
        this.$refs.mmpop.initData(item)
      })
    }
  }
}
</script>

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