<template>
  <div>
    <div class="video-menu">
      <layer-manager-mix :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
      <common-btn id="alarmBtn" :select="selectIndex === 'alarmBtn'" :bg="alarm" :bg-hover="alarmHover" 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" />
      <keyword-manager :select="ktSelect === 'keywordBtn'" @changeState="changeState" @handleKeyword="handleKeyword"
        :resultList="resultList" @localPoint="localPoint" />
      <time-manager :select="ktSelect === 'timeBtn'" v-if="selectIndex === 'caseBtn'" @changeState="changeState"
        @handleTimeRange="handleTimeRange" />
    </div>
    <!-- 监测事件 -->
    <list-page ref="caseListPage" title="监测事件" :list="eventList" :query="eventParams" :total="eventTotal"
      @change="changePage" v-show="selectIndex === 'caseBtn' && isShowEvent" @close="closeEvent"
      @menuClick="menuEventClick" info-url="wlw-gktj/wlw/sjlcxxzs" />
    <!-- 事件弹窗 -->
    <eventPop ref="eventpop" v-if="isShowEventPop" @close="isShowEventPop = false" />
    <!-- 点位弹窗 -->
    <Pop ref="pop" v-if="isShowPop" @close="isShowPop = 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 { getStatistics, getPointList, getCaseListPage } from "../../../api/csdz/iot";
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import { showPositin } from '@/utils/freedo/index'
import { getDate } from '@/utils/calendarUtil'
import eventPop from '@/pages/csdz/videoCloud/eventPop'
import Pop from './Pop.vue'
import { pointList, iconDict } from './data'
export default {
  name: 'Iot',
  components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, ListPage, eventPop, Pop },
  data() {
    return {
      eventParams: {
        pageNo: 1,
        pageSize: 5,
        keywords: '',
        startTime: getDate(-7, 'DATE'),
        endTime: getDate(0, 'DATE'),
      }, // 事件列表查询条件
      eventList: [], // 监测事件
      isShowEvent: false, // 展示监测事件
      isShowEventPop: false, // 展示监测事件弹窗
      isShowPop: false, // 展示点位弹窗
      eventTotal: 0,
      resultList: [], // 搜索结果列表
      markerList: [],
      ktSelect: '',
      selectIndex: 'layerBtn',
      caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
      caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
      alarm: require('@/assets/images/function/物联网/物联告警未选中.png'),
      alarmHover: require('@/assets/images/function/物联网/物联告警选中.png'),
      menuTab: [{
        name: '交通',
        value: 'traffic'
      }, {
        name: '管网',
        value: 'well'
      }, {
        name: '智慧停车',
        value: 'parking'
      }, {
        name: '智慧城管',
        value: 'city'
      }, {
        name: '智慧园林',
        value: 'park'
      }],
      menus: {
        traffic: [
          { type: "1", typename: "雷达", total: "2" },
          { type: "2", typename: "卡口", total: "1" },
          { type: "3", typename: "信号灯", total: "2" }
        ],
        well: [
          { type: "1", typename: "井盖状态监测仪", total: "0" },
          { type: "2", typename: "噪声记录仪", total: "0" },
          { type: "3", typename: "液位检测仪", total: "0" },
          { type: "4", typename: "消防栓盗水监测仪", total: "0" },
          { type: "5", typename: "有害气体监测仪", total: "0" },
          { type: "6", typename: "多功能漏损监测仪", total: "0" },
          { type: "7", typename: "燃气智能终端", total: "0" }
        ],
        parking: [
          { type: "1", typename: "停车道窄", total: "0" }
        ],
        city: [
          { type: "1", typename: "路灯", total: "0" }
        ],
        park: [
          { type: "1", typename: "水位监测仪", total: "0" },
          { type: "2", typename: "温湿度传感器", total: "0" }
        ]
      },
      result: []
    }
  },
  methods: {
    btnClick(e) {
      this.selectIndex = e.target.id
      clearResetMap()
      this.isShowEvent = false
      this.isShowEventPop = false
      this.isShowPop = false
      console.log(e.target.id, '456')
      if (e.target.dataset.tip === '图层管理') {
        this.search()
      }
      else if (e.target.dataset.tip === '报警视频') {
      }
      else if (e.target.dataset.tip === '监测事件') {
        this.isShowEvent = true
        this.fetchEventList(this.eventParams)
      }
    },
    changeState(v) {
      // devicetype
      this.ktSelect = v
      console.log(v, 'vvvv')
    },
    // 查询点位
    search(keyword) {
      // const iconDone = require('@/assets/images/icon/物联网/卡口在线.png')
      // const iconDoing = require('@/assets/images/icon/物联网/卡口离线.png')
      // console.log(iconDone, 'iconDone')
      // getPointList({
      //   keywords: keyword,
      // }).then(response => {
      //   console.log(response.data, '点位列表')
      //   if (response.code === 200) {
      //     clearUpMap()
      //     this.result = response.data.value.map((item) => ({ ...item, name: `${item.devicetypename}-${item.devicetype}` }))
      //     response.data.value.forEach(item => {
      //       // console.log(item.areaboundary)
      //       // todo : 画范围
      //       AddLabelPoint(
      //         item.id,
      //         item.devicetypename,
      //         item.devicestatusname === '在线' ? iconDone : iconDoing,
      //         [item.lat, item.lon, 0], 'gd', item,
      //         this.clickIcon)
      //     })
      //   }
      // })
      this.markerList = pointList
      pointList.forEach((item) => {
        AddLabelPoint(
          item.id,
          item.deviceTypeName,
          iconDict[item.deviceTypeName],
          [item.lon, item.lat, 0], 'gd', item,
          this.clickIcon)
      })
    },
    // 点击marker
    clickIcon(eventArg) {
      console.log(eventArg, 'eventArg')
      // const item = eventArg._data.data
      const showPop = (e) => {
        const item = e._data.data
        this.isShowPop = true
        // console.log(this.$refs.popRef)
        this.$nextTick(() => {
          this.$refs.pop.initData(item)
        })
      }
      if (this.isShowPop) {
        this.isShowPop = false
        setTimeout(() => {
          showPop(eventArg)
        }, 100);
      }
      else {
        showPop(eventArg)
      }
    },
    // 获取事件列表
    fetchEventList(params) {
      const icon = require('@/assets/images/icon/视频云/坐标.png')
      this.$refs.caseListPage.initDialog()
      getCaseListPage(params).then((res) => {
        console.log(res.data)
        this.eventTotal = res.data.valueSize || res.data.result.data.valueSize
        this.eventList = res.data.value || res.data.result.data.value
        this.eventList = this.eventList.map((item) => ({ ...item, lon: item.lat, lat: item.lon }))
        this.eventList.forEach((item) => {

          AddLabelPoint(
            item.id || new Date().getTime(),
            item.eventName || item.eventname,
            icon,
            [item.lon, item.lat, 0], 'gd', item,
            this.clickCaseIncon
          )
        })
      })
    },
    // 事件列表页面条数变化
    changePage(val) {
      this.eventParams.pageNo = val.page
      this.fetchEventList(this.eventParams)
    },
    // 关闭事件列表
    closeEvent() {
      this.isShowEvent = false
    },
    // 事件列表点击
    menuEventClick(e) {
      console.log(e, 'e')
      if (e.lon && e.lat) {
        showPositin(e.lon, e.lat)
      }

    },
    // 时间查询
    handleTimeRange(e) {
      if (e.startTime && e.endTime) {
        this.eventParams = {
          pageNo: 1,
          pageSize: 5,
          keywords: '',
          startTime: e.startTime,
          endTime: e.endTime
        }
        this.fetchEventList(this.eventParams)
      }

    },
    // 点击事件坐标
    clickCaseIncon(e) {
      const showPop = (e) => {
        const item = e._data.data
        this.isShowEventPop = true
        this.$nextTick(() => {
          this.$refs.eventpop.initData(item)
        })
      }
      if (this.isShowEventPop) {
        this.isShowEventPop = false
        setTimeout(() => {
          showPop(e)
        }, 100);
      }
      else {
        showPop(e)
      }
    },
    // 搜索点位点击
    localPoint(e) {
      // this.childrenClick(e)
      this.clickIcon({
        _data: {
          data: e
        }
      })
    },
    handleKeyword(e) {
      console.log(e, '点位搜索')
      clearResetMap()
      this.resultList = this.markerList.filter((item) => item.name.includes(e))
      pointList.forEach((item) => {
        AddLabelPoint(
          item.id,
          item.deviceTypeName,
          iconDict[item.deviceTypeName],
          [item.lon, item.lat, 0], 'gd', item,
          this.clickIcon)
      })
    }
  },
  mounted() {
    this.search()
    this.$bus.$on('clear', () => {
      this.isShowEvent = false
      this.isShowEventPop = false
      this.isShowPop = false
    })
    // getStatistics().then(res => {
    //   if (res.code === 200 && res.data.value.length) {
    //     console.log(res.data, '')
    //     this.menus.traffic = res.data.value.filter(item => item.project_type.trim() === 'traffic')
    //     this.menus.well = res.data.value.filter(item => item.project_type.trim() === 'smartwell')
    //     this.menus.parking = res.data.value.filter(item => item.project_type.trim() === 'parking')
    //     this.menus.city = res.data.value.filter(item => item.project_type.trim() === 'smartcity')
    //     this.search()
    //   }
    // })
  }
}
</script>

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