<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="search" :resultList="result" />
      <time-manager :select="ktSelect === 'timeBtn'" v-if="selectIndex === 'caseBtn'" @changeState="changeState" />
    </div>
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import KeywordManager from "@/components/KeywordManager";
import TimeManager from "@/components/TimeManager";
import { getStatistics, getPointList, getCaseListPage } from "../../../api/csdz/iot";
import { clearUpMap, AddLabelPoint } from '@/utils/freedo'
export default {
  name: 'Iot',
  components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn },
  data() {
    return {
      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: "111" },
          // { type: "2", typename: "卡口", total: "111" },
          // { type: "3", typename: "信号灯", total: "111" }
        ],
        well: [
          // { type: "1", typename: "井盖状态监测仪", total: "111" },
          // { type: "2", typename: "噪声记录仪", total: "111" },
          // { type: "3", typename: "液位检测仪", total: "111" },
          // { type: "4", typename: "消防栓盗水监测仪", total: "111" },
          // { type: "5", typename: "有害气体监测仪", total: "111" },
          // { type: "6", typename: "多功能漏损监测仪", total: "111" },
          // { type: "7", typename: "燃气智能终端", total: "111" }
        ],
        parking: [
          // { type: "1", typename: " 停车道窄", total: "111" }
        ],
        city: [
          // { type: "1", typename: "路灯", total: "111" }
        ],
        // park: [
        //   {type : "1", typename: "水位监测仪", total: "111"},
        //   {type : "2", typename: "温湿度传感器", total: "111"}
        // ]
      },
      result: []
    }
  },
  methods: {
    btnClick(e) {
      this.selectIndex = e.target.id
      console.log(e.target.id, '456')
      if (e.target.dataset.tip === '图层管理') {
        clearUpMap()
        this.search()
      }
      else if (e.target.dataset.tip === '离线视频') {
        clearUpMap()
      }
      else if (e.target.dataset.tip === '监测事件') {
        clearUpMap()
        getCaseListPage({
          pageNo: 1,
          pageSize: 15
        }).then(res => {
          console.log(res.data, '监测事件')
        })
      }
    },
    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)
          })
        }
      })
    },
    // 点击marker
    clickIcon(eventArg) {
      const item = eventArg._data.data
      console.log(item)
    }
  },
  mounted() {
    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>