<template>
  <div>
    <div class="video-menu">
      <layer-manager :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick"/>
      <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"/>
      <time-manager :select="ktSelect==='timeBtn'" v-if="selectIndex==='caseBtn'" @changeState="changeState"/>
    </div>
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManager from "@/components/LayerManager";
import KeywordManager from "@/components/KeywordManager";
import TimeManager from "@/components/TimeManager";
export default {
  name: 'VideoCloud',
  components: {TimeManager, KeywordManager, LayerManager, CommonBtn },
  data() {
    return {
      ktSelect: '',
      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"},
          {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: [
          {type: "1",typename: "球机",total: "111"},
          {type: "2",typename: "枪机",total: "111"},
          {type: "3",typename: "半球",total: "111"},
          {type: "4",typename: "AR高点",total: "111"},
          {type: "5",typename: "无人机视频",total: "111"}
        ]
      }
    }
  },
  methods: {
    btnClick(e) {
        this.selectIndex = e.target.id
    },
    changeState(v) {
      this.ktSelect = v
    }
  }
}
</script>

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