<template>
  <div class="common-menu">
    <el-radio-group ref="radiog" v-model="current" v-show="menuTab.length>0">
      <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">
        <div class="menu-item-icon" :style="`background: url(${icons[current][index]})`"/>
        <div class="menu-item-name">{{item.typename}}</div>
        <div class="menu-item-total">{{item.total}}</div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'CommonMenu',
  props: {
    icons: {
      type: Object,
      required: true
    },
    menuTab: {
      type: Array,
      required: true
    },
    menus: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      indexNum: 0,
      refreshDown: true
    }
  },
  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: {
  }
}
</script>

<style scoped>

@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: 20rem;
  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>