<template>
  <div>
    <div class="search-menu">
      <common-btn id="layerBtn" :bg="layer" :bg-hover="layerHover" :select="select" width="5" height="5" text-hover="图层管理" @click="btnClick" />
    </div>
    <div v-if="select" class="common-menu">
      <el-radio-group ref="radiog" v-model="current" v-show="menuTab.length>0" style="margin-left: -5px">
        <el-radio-button
          v-for="(item,index)  in menuTab"
          :key="'radio'+item.value"
          :label="item.value">
          {{item.name}}
        </el-radio-button>
      </el-radio-group>
      <div class="menu-down" v-if="refreshDown">
        <div v-for="(item,index) in menus[current]" :key="item.type" class="menu-item" @click="menuClick(item)">
<!--          <div class="menu-item-icon" :style="`background: url(${icons[current][index]})`"/>-->
          <div class="menu-item-icon" :style="`background: url(${require('@/assets/images/layerControl/'+item.typename.replace(/ /g,'')+'.png')})`"/>
          <div class="menu-item-name">{{item.typename}}</div>
          <div class="menu-item-total">{{item.total}}</div>
        </div>
      </div>
    </div>
<!--    <common-menu :menu-tab="menuTab" :menus="menus" :icons="icons" v-if="select"/>-->
  </div>
</template>

<script>
import CommonBtn from "../CommonBtn";
// import CommonMenu from "../CommonMenu";
export default {
  name: 'LayerManager',
  components: { CommonBtn },
  props: {
    menuTab: {
      type: Array,
      required: true
    },
    menus: {
      type: Object,
      required: true
    },
    select: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      indexNum: 0,
      refreshDown: true,
      layer: require('@/assets/images/function/通用功能/图层管理未选中.png'),
      layerHover: require('@/assets/images/function/通用功能/图层管理选中.png')
    }
  },
  computed: {
    current:{
      set(v){
        this.refreshDown = false
        this.$nextTick(() => {
          this.indexNum = this.menuTab.findIndex(item => item.value === v)
          this.refreshDown = true
        })

      },
      get(){
        return this.menuTab[this.indexNum].value
      }
    }
  },
  methods: {
    btnClick(e) {
      this.$emit('btnClick',e)
    },
    menuClick(e) {
      this.$emit('menuClick',e)
    }
  }
}
</script>

<style scoped>
.search-menu {
  display: flex;
  z-index: 111111111;
  position: relative;
  left: 0px;
  top: 0px;
}

@keyframes slide-down{
  0%{transform:scale(1,0);}
  100%{transform:scale(1,1);}
}

@-webkit-keyframes slide-down{
  0%{-webkit-transform:scale(1,0);}
  100%{-webkit-transform:scale(1,1);}
}

.common-menu {
  position: absolute;
  left: 0rem;
  top: 7rem;
  width: 25rem;
  background: url("../../assets/images/popup/case/事件看板背景.png") !important;
  background-size: 100% 101% !important;
}

.menu-down {
  position: relative;
  left: 0rem;
  top: 0rem;
  animation: slide-down 0.3s ease-in;
  -webkit-animation: slide-down 0.3s ease-in;
  transition: max-height .3s ease-in;
  transform-origin: 50% 0;
  margin: 20px 20px 10px 10px;
  width: calc(100% - 45px);
}
</style>