<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"/>
      <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";
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"}
        ]
      }
    }
  },
  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>