<template>
  <div class="layer-mix">
    <common-btn :id="id" :bg="layer" :bg-hover="layerHover" :select="select" width="5" height="5" :text-hover="title" @click="btnClick" />
    <div v-if="select&&refreshDown" class="mix-down">
      <div v-for="(item, index) in menuTab" :key="item.value" >
        <div class="mix-name">
          {{item.name}}
          <i class="plus-icon" :class="!open[index]?'el-icon-circle-plus-outline':'el-icon-remove-outline'" @click="refreshMenu(index)"></i>
        </div>
        <div v-for="(itemsub,indexsub) in menus[item.value]" :key="item.value+indexsub" class="menu-item mix-item" v-show="open[index]" @click="menuClick(itemsub)">
          <div v-if="isNeedIcon" class="menu-item-icon"  :style="isNeedIcon ? `background: url(${require('@/assets/images/layerControl/'+itemsub.typename.replace(/ /g,'')+'.png')})` : ''"/>
          <img v-if="!isNeedIcon && itemsub.icon" class="menu-item-icon" :src="itemsub.icon"  />
          <div v-if="!isNeedIcon && !itemsub.icon" class="menu-item-icon" :src="itemsub.icon"  />
<!--          <div class="menu-item-icon" :style="`background: url('../../assets/images/layerControl/'${itemsub.typename}'.png')`"/>-->
          <div class="menu-item-name">{{itemsub.typename}}</div>
          <div class="menu-item-total">{{itemsub.total}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonBtn from "../CommonBtn";
export default {
  name: 'LayerManagerMix',
  components: {  CommonBtn },
  props: {
    id: {
      type: String,
      default: 'layerBtn'
    },
    menuTab: {
      type: Array,
      required: true
    },
    menus: {
      type: Object,
      required: true
    },
    select: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '图层管理'
    },
    layer: {
      type: String,
      default: require('@/assets/images/function/通用功能/图层管理未选中.png')
    },
    layerHover: {
      type: String,
      default: require('@/assets/images/function/通用功能/图层管理选中.png')
    },
    isNeedIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      refreshDown: true,
      open: [true, true, true, true, true, true, true, true],
    }
  },
  methods: {
    refreshMenu(index) {
      this.refreshDown = false
      this.$nextTick(() => {
        this.open[index]=!this.open[index]
        this.refreshDown = true
      })
    },
    btnClick(e) {
      this.$emit('btnClick',e)
    },
    menuClick(e) {
      this.$emit('menuClick',e)
    }
  }
}
</script>

<style scoped>
.layer-mix {
  width: 5rem;
  position: relative;
  left: 0px;
  top: 0px;
  -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
  animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
.mix-down {
  width: 25rem;
  max-height: 50rem;
  overflow-y: scroll;
  background: url("../../assets/images/popup/case/事件看板背景.png") !important;
  background-size: 100% 101% !important;
  margin-top: 2rem;
}
.mix-name {
  color: white;
  font-size: 1.5rem;
  margin: 10px 2px;
  background: url("../../assets/images/popup/case/装饰条.png") !important;
  background-size: cover !important;
  text-align: left;
  padding: 0.5rem;
  padding-left: 1.5rem;
  letter-spacing: 10px;
  font-weight: bold;
  width: 90%;
  display: flex;
  justify-content: space-between;
}
.mix-item {
  width: 22rem !important;
  height: 1.5rem !important;
  margin: 0.4rem 0.5rem;
}
.plus-icon {
  width: 1.8rem;
  position: relative;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
</style>