<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" @change="changeSelect">
        <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)" @contextmenu.prevent="handleRightClick">
<!--          <div class="menu-item-icon" :style="`background: url(${icons[current][index]})`"/>-->
          <div class="menu-item-icon" :style="isNeedIcon ?`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>
      <!-- 子列表 -->
      <!-- v-if="childrednName && childrednName.children" -->
       <div class="children"  v-if="childrednName && childrednName.children" >
        <div v-for="(item ,index) in childrednName.children" class="menu-item children-item" @click="childrenClick(item)">
          {{ item.name }}
        </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
    },
    isNeedIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      indexNum: 0,
      refreshDown: true,
      layer: require('@/assets/images/function/通用功能/图层管理未选中.png'),
      layerHover: require('@/assets/images/function/通用功能/图层管理选中.png'),
      childrednName: 0,
    }
  },
  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) {
      console.log(e, '列表点击')
      this.childrednName = e
      this.$emit('menuClick',e)
    },
    childrenClick(e) {
      console.log(e, this.childrednName, '子列表点击')
      this.$emit('childrenClick',e, this.childrednName)
    },
    handleRightClick() {
      this.childrednName = null
    },
    // 切换菜单
    changeSelect() {
      this.$emit('changeSelect', this.current)
      // 清空二级菜单
      this.handleRightClick()
      console.log(this.current, 'current')
    }
  }
}
</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);
}
.children{
  position: absolute;
  left:calc(100% - 45px + 25px + 20px);
  top: 0rem;
  width: 300px;
  background: url("../../assets/images/popup/case/事件看板背景.png") !important;
  background-size: 100% 101% !important;
  height: 400px;
  overflow-y: scroll;
}
.children-item{
  width: 80% !important;
  margin: 10px auto !important;
  color: #fff !important;

}
</style>