<template>
  <div>
    <div class="video-menu">
      <layer-manager :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'" @btnClick="btnClick"
        @menuClick="menuClick" @childrenClick="childrenClick" @changeSelect="changeSelect" />
      <common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5"
        height="5" text-hover="监测事件" @click="btnClick" />
      <common-btn id="offlineBtn" :select="selectIndex === 'offlineBtn'" :bg="offline" :bg-hover="offlineHover"
        width="5" height="5" text-hover="离线视频" @click="btnClick" />
      <common-btn id="energyBtn" :select="selectIndex === 'energyBtn'" :bg="energy" :bg-hover="energyHover" width="5"
        height="5" text-hover="赋能视频" @click="btnClick" />
      <keyword-manager :select="ktSelect === 'keywordBtn'" @changeState="changeState" @handleKeyword="handleKeyword"
        @localPoint="localPoint" :resultList="resultList" />
      <time-manager :select="ktSelect === 'timeBtn'" v-if="selectIndex === 'caseBtn'" @changeState="changeState" />
    </div>
    <!-- 视频弹窗 -->
    <videoPop ref="videopop" v-if="isShowPop" @close="isShowPop = false" />
    <!-- 离线视频 -->
    <offline-video v-if="selectIndex === 'offlineBtn'" :list="markerList" @menuClick="offlineClick" />
    <!-- 赋能视频 -->
    <offline-video v-if="selectIndex === 'energyBtn'" :list="markerList" @menuClick="energyClick" />
    <!-- 监测事件 -->
    <!-- <event-list1 v-if="selectIndex === 'caseBtn' && isShowEvent" :list="eventList" :total="eventTotal"  @menuClick="menuEventClick"
      @close="closeEvent" @changePage="changePage" /> -->
      <list-page
      ref="caseListPage"
      title="监测事件"
      :list="eventList"
      :query="eventParams"
      :total="eventTotal"
      @change="changePage"
      v-show="selectIndex === 'caseBtn' && isShowEvent"
      @close="closeEvent"
      @menuClick="menuEventClick"
      info-url="spy-gktj/spy/spysjlb"/>
    <!-- 事件弹窗 -->
    <eventPop ref="eventpop" v-if="isShowEventPop" @close="isShowEventPop = false" />
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManager from "@/components/LayerManager";
import KeywordManager from "@/components/KeywordManager";
import TimeManager from "@/components/TimeManager";
import offlineVideo from "./components/offlineVideo.vue";
import eventList1 from "./components/eventList.vue";
import eventPop from "./eventPop.vue";
import ListPage from "@/components/ListPage";
import { showPositin } from '@/utils/freedo/index'
import { getStatistics, getEventList } from '@/api/csdz/videoCloud'
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'

import videoPop from './videoPop'
export default {
  name: 'VideoCloud',
  components: { TimeManager, KeywordManager, LayerManager, CommonBtn, videoPop, offlineVideo, eventList1, eventPop, ListPage },
  data() {
    return {
      isShowPop: false, // 是否展示点位弹窗
      resultList: [], // 点位搜索列表
      markerList: [], // 点位列表
      showMarker: 'scene', // 当前展示点位
      offlineVideo: [], //离线视频
      eventList: [], // 监测事件
      isShowEvent: false, // 展示监测事件
      isShowEventPop: false, // 是否展示事件弹窗
      ktSelect: '',
      eventParams: {
         pageNo: 1,
         pageSize: 5,
         keywords: '',
      }, // 事件列表查询条件
      eventTotal: 0, // 事件列表条数
      selectIndex: 'layerBtn',
      caseBg: require('@/assets/images/function/视频云/视频检测事件未选中.png'),
      caseHover: require('@/assets/images/function/视频云/视频检测事件选中.png'),
      offline: require('@/assets/images/function/视频云/离线视频点位未选中.png'),
      offlineHover: require('@/assets/images/function/视频云/离线视频点位选中.png'),
      energy: require('@/assets/images/function/视频云/赋能视频点位未选中.png'),
      energyHover: require('@/assets/images/function/视频云/赋能视频点位选中.png'),
      menuTab: [{
        name: '视频场景',
        value: 'scene'
      }, {
        name: '视频类型',
        value: 'type'
      }],
      menus: {
        scene: [
          {
            type: "1", typename: "道路卡口", total: "111",
            children: [
              {
                typename: '道路卡口',
                name: '111道路卡口',
                lng: '114.817018',
                lat: '25.863392',
              },
              {
                typename: '道路卡口',
                name: '222道路卡口',
                lng: '115.083274',
                lat: '25.738548',
              },
              {
                typename: '道路卡口',
                name: '333道路卡口',
                lng: '114.770822',
                lat: '25.805374',
              },
            ]
          },
          {
            type: "2", typename: "工地", total: "111",
            children: [
              {
                typename: "工地",
                name: '111工地',
                lng: '114.928116',
                lat: '25.80921',
              },
              {
                typename: "工地",
                name: '222工地',
                lng: '114.891245',
                lat: '25.809243',
              },
            ]
          },
          {
            type: "3", typename: "园林", total: "111",
            children: [
              {
                typename: "园林",
                name: '111园林',
                lng: '114.767957',
                lat: '25.797636',
              },
            ]
          },
          {
            type: "4", typename: "学校", total: "111",
            children: [
              {
                typename: "学校",
                name: '111学校',
                lng: '114.824897',
                lat: '25.780224',
              },
            ]
          },
          {
            type: "5", typename: "环保", total: "111",
            children: [
              {
                typename: "环保",
                name: '111环保',
                lng: '114.736085',
                lat: '25.809565',
              },
            ]
          },
          {
            type: "6", typename: "车场", total: "111",
            children: [
              {
                typename: "车场",
                name: '111车场',
                lng: '114.764734',
                lat: '25.806341',
              },
            ]
          }
        ],
        type: [
          {
            type: "1", typename: "球机", total: "111",
            children: [
              {
                typename: '球机',
                name: '111球机',
                lng: '114.864044',
                lat: '25.764514',
              },
            ]
          },
          {
            type: "2", typename: "枪机", total: "111",
            children: [
              {
                typename: '枪机',
                name: '111枪机',
                lng: '114.85176',
                lat: '25.765165',
              },
              {
                typename: '枪机',
                name: '222枪机',
                lng: '114.851473',
                lat: '25.76742',
              },
            ]
          },
          {
            type: "3", typename: "半球", total: "111",
            children: [
              {
                typename: '半球',
                name: '半球1',
                lng: '114.844932',
                lat: '25.76742',
              },
              {
                typename: '半球',
                name: '半球2',
                lng: '114.854725',
                lat: '25.772985',
              },
            ]
          },
          {
            type: "4", typename: "AR高点", total: "111",
            children: [
              {
                typename: 'AR高点',
                name: 'AR高点1',
                lng: '114.864405',
                lat: '25.773041',
              },
              {
                typename: 'AR高点',
                name: 'AR高点2',
                lng: '114.869638',
                lat: '25.7769',
              },
            ]
          },
          {
            type: "5", typename: "无人机视频", total: "111",
            children: [
              {
                typename: '无人机视频',
                name: '无人机视频1',
                lng: '114.865548',
                lat: '25.780058',
              },
            ]
          }
        ]
      }
    }
  },
  methods: {
    // 切换展示
    btnClick(e) {
      console.log(e, '123')
      this.isShowPop = false
      this.isShowEvent = false
      this.isShowEventPop = false
      this.selectIndex = e.target.id
      console.log(e.target.id, 'e.target.id')
      if (this.selectIndex !== 'keywordBtn' && this.selectIndex !== 'timeBtn') {
        clearResetMap()
      }
      // 展示点位
      if (this.selectIndex === 'layerBtn') {
        if (this.showMarker === 'scene') {
          this.drawSence()
        }
        else {
          this.drawType()
        }
      }
      else if (this.selectIndex === 'offlineBtn') {
        // 离线视频
        this.drawOffline()
      }
      else if (this.selectIndex === 'energyBtn') {
        // 赋能视频
        this.drawEnable()
      }
      else if (this.selectIndex === 'caseBtn') {
        // 监测事件
        this.isShowEvent = true
        this.fetchEventList(this.eventParams)
      }
    },
    changeState(v) {
      console.log(v, '1111')
      this.ktSelect = v
    },
    // 点击菜单
    menuClick(e) {
      console.log(e, '456')
    },
    // 点击列表二级弹窗
    childrenClick(e) {
      console.log(e)
      //  掉起弹窗
      this.clickIcon({
        _data: {
          data: e
        }
      })
    },
    // 点击点位弹窗
    clickIcon(e) {
      const showPop = (e) => {
        const item = e._data.data
        this.isShowPop = true
        this.$nextTick(() => {
          this.$refs.videopop.initData(item)
        })
      }
      if (this.isShowPop) {
        this.isShowPop = false
        setTimeout(() => {
          showPop(e)
        }, 100);
      }
      else {
        showPop(e)
      }
    },
    // 绘制视频场景
    drawSence() {
      const iconKakou = require('@/assets/images/icon/物联网/卡口在线.png')
      const iconGongdi = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconYuanlin = require('@/assets/images/icon/物联网/环境监测在线.png')
      const iconXuexiao = require('@/assets/images/icon/教育地图点位/学校.png')
      const iconChechang = require('@/assets/images/icon/视频云/停车场.png')
      const icondict = {
        道路卡口: iconKakou,
        工地: iconGongdi,
        园林: iconYuanlin,
        学校: iconXuexiao,
        环保: iconYuanlin,
        车场: iconChechang,
      }
      // getStatistics().then(res => {
      //   console.log(res.data, '视频云')
      // })
      // 绘制所有点位
      const markerList = []
      this.menus.scene.forEach((item) => {
        if (item.children) {
          item.children.forEach(citem => {
            markerList.push(citem)
          })
        }
      })
      markerList.forEach(item => {
        AddLabelPoint(
          item.id || new Date().getTime(),
          item.name,
          icondict[item.typename],
          [item.lng, item.lat, 0], 'gd', item,
          this.clickIcon
        )
      })
      this.markerList = markerList
    },
    // 绘制视频类型
    drawType() {
      const iconQiuji = require('@/assets/images/icon/视频云/球机未赋能在线.png')
      const iconQiangji = require('@/assets/images/icon/视频云/枪机未赋能在线.png')
      const iconBanqiu = require('@/assets/images/icon/视频云/半球机未赋能在线.png')
      const iconAR = require('@/assets/images/icon/视频云/AR未赋能在线.png')
      const iconWurenji = require('@/assets/images/icon/视频云/无人机未赋能在线.png')
      const icondict = {
        球机: iconQiuji,
        枪机: iconQiangji,
        半球: iconBanqiu,
        AR高点: iconAR,
        无人机视频: iconWurenji,
      }
      // 绘制所有点位
      const markerList = []
      this.menus.type.forEach((item) => {
        if (item.children) {
          item.children.forEach(citem => {
            markerList.push(citem)
          })
        }
      })
      markerList.forEach(item => {
        AddLabelPoint(
          item.id || new Date().getTime(),
          item.name,
          icondict[item.typename],
          [item.lng, item.lat, 0], 'gd', item,
          this.clickIcon
        )
      })
      this.markerList = markerList
    },
    // 选中菜单切换
    changeSelect(e) {
      this.showMarker = e
      clearResetMap()
      this.isShowPop = false
      if (e === 'scene') {
        this.drawSence()
      }
      else {
        this.drawType()
      }
    },
    // 点维搜索
    handleKeyword(e) {
      console.log(e, '点位搜索')
      clearResetMap()
      this.resultList = this.markerList.filter((item) => item.name.includes(e))
      const iconQiuji = require('@/assets/images/icon/视频云/球机未赋能在线.png')
      const iconQiangji = require('@/assets/images/icon/视频云/枪机未赋能在线.png')
      const iconBanqiu = require('@/assets/images/icon/视频云/半球机未赋能在线.png')
      const iconAR = require('@/assets/images/icon/视频云/AR未赋能在线.png')
      const iconWurenji = require('@/assets/images/icon/视频云/无人机未赋能在线.png')
      const iconKakou = require('@/assets/images/icon/物联网/卡口在线.png')
      const iconGongdi = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconYuanlin = require('@/assets/images/icon/物联网/环境监测在线.png')
      const iconXuexiao = require('@/assets/images/icon/教育地图点位/学校.png')
      const iconChechang = require('@/assets/images/icon/视频云/停车场.png')
      const icondict = {
        球机: iconQiuji,
        枪机: iconQiangji,
        半球: iconBanqiu,
        AR高点: iconAR,
        无人机视频: iconWurenji,
        道路卡口: iconKakou,
        工地: iconGongdi,
        园林: iconYuanlin,
        学校: iconXuexiao,
        环保: iconYuanlin,
        车场: iconChechang,
      }
      this.resultList.forEach(item => {
        AddLabelPoint(
          item.id || new Date().getTime(),
          item.name,
          icondict[item.typename],
          [item.lng, item.lat, 0], 'gd', item,
          this.clickIcon
        )
      })
    },
    // 搜索点位点击
    localPoint(e) {
      this.childrenClick(e)
    },
    // 绘制离线视频
    drawOffline() {
      this.markerList = []
      const iconQiuji = require('@/assets/images/icon/视频云/球机未赋能离线.png')
      const iconQiangji = require('@/assets/images/icon/视频云/枪机未赋能离线.png')
      const iconBanqiu = require('@/assets/images/icon/视频云/半球机未赋能离线.png')
      const iconAR = require('@/assets/images/icon/视频云/AR未赋能离线.png')
      const iconWurenji = require('@/assets/images/icon/视频云/无人机未赋能离线.png')
      const iconKakou = require('@/assets/images/icon/物联网/卡口离线.png')
      const iconGongdi = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconYuanlin = require('@/assets/images/icon/物联网/环境监测离线.png')
      const iconXuexiao = require('@/assets/images/icon/教育地图点位/教育设备-摄像机离线.png')
      const iconChechang = require('@/assets/images/icon/视频云/停车场离线.png')
      const icondict = {
        球机: iconQiuji,
        枪机: iconQiangji,
        半球: iconBanqiu,
        AR高点: iconAR,
        无人机视频: iconWurenji,
        道路卡口: iconKakou,
        工地: iconGongdi,
        园林: iconYuanlin,
        学校: iconXuexiao,
        环保: iconYuanlin,
        车场: iconChechang,
      }
      const markerList = [
        {
          typename: '无人机视频',
          name: '222无人机',
          lng: '114.865548',
          lat: '25.780058',
        },
        {
          typename: '无人机视频',
          name: '无人机1',
          lng: '114.865528',
          lat: '25.780258',
        },
        {
          typename: '道路卡口',
          name: '222道路卡口',
          lng: '115.083274',
          lat: '25.738548',
        },
        {
          typename: '枪机',
          name: '111枪机',
          lng: '114.853962',
          lat: '25.725462',
        },
        {
          typename: '球机',
          name: '111球机',
          lng: '114.790806',
          lat: '25.734629',
        },

      ]
      this.markerList = markerList
      this.markerList.forEach(item => {
        AddLabelPoint(
          item.id || new Date().getTime(),
          item.name,
          icondict[item.typename],
          [item.lng, item.lat, 0], 'gd', item,
          this.offlineClick
        )
      })
    },
    // 离线视频点击
    offlineClick(e) {
      this.childrenClick({...e._data.data, status: 'offline'})
    },
    // 绘制赋能视频
    drawEnable() {
      this.markerList = []
      const iconQiuji = require('@/assets/images/icon/视频云/球机赋能在线.png')
      const iconQiangji = require('@/assets/images/icon/视频云/枪机赋能在线.png')
      const iconBanqiu = require('@/assets/images/icon/视频云/半球机赋能在线.png')
      const iconAR = require('@/assets/images/icon/视频云/AR赋能在线.png')
      const iconWurenji = require('@/assets/images/icon/视频云/无人机赋能在线.png')
      const iconKakou = require('@/assets/images/icon/物联网/卡口在线.png')
      const iconGongdi = require('@/assets/images/icon/工地地图点位/工地已完成.png')
      const iconYuanlin = require('@/assets/images/icon/物联网/环境监测在线.png')
      const iconXuexiao = require('@/assets/images/icon/教育地图点位/学校.png')
      const iconChechang = require('@/assets/images/icon/视频云/停车场.png')
      const icondict = {
        球机: iconQiuji,
        枪机: iconQiangji,
        半球: iconBanqiu,
        AR高点: iconAR,
        无人机视频: iconWurenji,
        道路卡口: iconKakou,
        工地: iconGongdi,
        园林: iconYuanlin,
        学校: iconXuexiao,
        环保: iconYuanlin,
        车场: iconChechang,
      }
      let markerList = [
        {
          typename: '球机',
          name: '111球机',
          lng: '114.790806',
          lat: '25.734629',
        },
        {
          typename: 'AR高点',
          name: '111AR高点',
          lng: '114.839667',
          lat: '25.744501',
        },
        {
          typename: '车场',
          name: '111AR车场',
          lng: '114.894542',
          lat: '25.731066',
        },
        {
          typename: '工地',
          name: '工地1',
          lng: '114.771855',
          lat: '25.747618',
        },
      ]
      this.markerList = markerList
      this.markerList.forEach(item => {
        AddLabelPoint(
          item.id || new Date().getTime(),
          item.name,
          icondict[item.typename],
          [item.lng, item.lat, 0], 'gd', item,
          this.clickIcon
        )
      })
    },
    // 赋能视频点击
    energyClick(e) {
      this.childrenClick(e)
    },
    // 获取事件列表
    fetchEventList(params) {
      const icon = require('@/assets/images/icon/视频云/坐标.png')
      this.$refs.caseListPage.initDialog()
      getEventList(params).then((res) => {
         this.eventTotal = res.data.valueSize
         this.eventList= res.data.value
        // this.eventList = [
        //   {
        //     id: new Date().getTime(),
        //     deviceId: new Date().getTime(),
        //     alarmId: new Date().getTime(),
        //     lon: '114.818903',
        //     lat: '25.743833',
        //     code: new Date().getTime(),
        //     deviceName: '111球机',
        //     eventName: '突发事件',
        //     urgencyName: '紧急高',
        //     eventSource: '视频识别',
        //     dutyDeptName: 'xxx部门',
        //     evenTypeName: '市容市貌',
        //     eventStatusName: '待立案',
        //     location: '村头新村北100米',
        //     imgUrl: 'https://img1.baidu.com/it/u=1696860963,3804811236&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
        //     createTime: '2024-22-19 09:30:11',
        //     report: '自动上报',
        //     cover: '',
        //   },
        //   {
        //     id: new Date().getTime(),
        //     deviceId: new Date().getTime(),
        //     alarmId: new Date().getTime(),
        //     lon: '114.866776',
        //     lat: '25.764915',
        //     code: new Date().getTime(),
        //     deviceName: '枪机2',
        //     eventName: '突发事件',
        //     urgencyName: '紧急',
        //     eventSource: '视频识别',
        //     dutyDeptName: 'xxx部门',
        //     evenTypeName: '市容市貌',
        //     eventStatusName: '待立案',
        //     location: '宋溏村委会',
        //     imgUrl: 'https://img2.baidu.com/it/u=1889999577,862790646&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
        //     createTime: '2024-22-17 10:44:14',
        //     report: '自动上报',
        //     cover: '',
        //   },
        // ]
        this.eventList.forEach((item) => {
          AddLabelPoint(
            item.id || new Date().getTime(),
            item.eventName || item.eventname,
            icon,
            [item.lon, item.lat, 0], 'gd', item,
            this.clickCaseIncon
          )
        })
      })
    },
    // 点击事件坐标
    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)
      }
    },
    // 事件列表点击
    menuEventClick(e) {
      console.log(e, 'e')
      // this.clickCaseIncon({
      //   _data: {
      //     data: e
      //   }
      // })
      if(e.lon && e.lat) {
        showPositin(e.lon, e.lat)
      }

    },
    // 关闭事件列表
    closeEvent() {
      this.isShowEvent = false
    },
    // 事件列表页面条数变化
    changePage(val) {
      this.eventParams.pageNo = val.page
      this.fetchEventList(this.eventParams)
    }

  },
  mounted() {
    this.drawSence()
    this.$bus.$on('clear', () => {
      this.isShowPop = false
      this.isShowEvent = false
      this.isShowEventPop = false
    })
  }
}
</script>

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