<template>
  <div>
    <div class="video-menu">
      <layer-manager-mix :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick"/>
      <common-btn id="publicBtn" :select="selectIndex==='publicBtn'" :bg="public" :bg-hover="publicHover" width="5" height="5" text-hover="公众分布" @click="btnClick" />
      <keyword-manager :select="ktSelect==='keywordBtn'" @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: 'smartCard',
  components: {TimeManager, KeywordManager, LayerManagerMix, CommonBtn },
  data() {
    return {
      ktSelect: '',
      selectIndex: 'layerBtn',
      public: require('@/assets/images/function/一卡通/公众用户分布未选中.png'),
      publicHover: require('@/assets/images/function/一卡通/公众用户分布选中.png'),
      menuTab: [{
        name: '基础资源',
        value: 'base'
      }, {
        name: '设备资源',
        value: 'device'
      }],
      menus: {
        base: [
          {type : "1", typename: "场馆", total: "111"},
          {type : "2", typename: "食堂", total: "111"},
          {type : "3", typename: "园区", total: "111"}
        ],
        device: [
          {type : "1", 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>