<template>
	<div class="filter-items">
   <!-- <template v-for="btn of buttons">
      <el-button  :type="btn.class" :size="size" v-bind:key="btn.Id" class="filter-item" @click="$emit('btn-event',btn.domId)"><i :class="`iconfont icon-${btn.icon}`"></i>{{btn.name}}</el-button>
    </template>-->
    <div class="MenuLeft"> <vue-file-toolbar-menu :content="main_menu" /> </div>
	</div>
</template>

<script>
import waves from '@/directive/waves' // 水波纹指令
import VueFileToolbarMenu from 'vue-file-toolbar-menu'
export default {
  name: 'permission-menu',
  components: {
    VueFileToolbarMenu
  },
  props: {
    moduleName: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: ''
    }
  },
  data() {
    // todo:兼容layui的样式、图标
    return {
      buttons: [],
      menus:[]
    }
  },
  computed: {
    main_menu () {
      return [
        { text: "菜单", icon:"view_module",menu: this.menus }
      ]
    }
  },
  directives: {
    waves
  },
  mounted() {
    var route = this.$route
    var elements = route.meta.elements
    this.buttons = elements

    for (var btn of this.buttons) {
      var item= { text: btn.name, icon:btn.icon,id:btn.domId, click:(event) =>{var evt = event || window.event;var src = evt.target || evt.srcElement;if(src.tagName!='DIV')src=src.parentNode;this.$emit('btn-event',src.id)}}
      this.menus.push(item);
    }

  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.MenuLeft {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9999;
    background: rgba(43, 44, 47, 0.8);
    border-radius: 3px;
    box-shadow: 1px 2px 1px rgba(0,0,0,.15);
}
::v-deep .bar-button {
    color: white;
    &.open:hover {
      color: var(--bar-button-open-color, rgb(184, 65, 101));
      background: var(--bar-button-open-bkg, #333)!important;
    }
    &:not(.active):not(.open):not(.disabled):hover {
      color: var(--bar-button-hover-color);
      background: var(--bar-button-hover-bkg, #333)!important;
    }

  }
::v-deep .bar-menu{
  & > .bar-menu-items {
     min-width: var(--bar-menu-min-width, 120px)!important;
     background: var(--bar-menu-bkg,  rgba(43, 44, 47, 0.8))!important;
    @supports (backdrop-filter: var(--bar-menu-backdrop-filter)){
      & {
        backdrop-filter: var(--bar-menu-backdrop-filter);
        background: rgba(43, 44, 47, 0.8)!important;
      }
    }
    & > .bar-menu-item {
      &:not(.active):not(.disabled):hover {
          color: var(--bar-menu-item-hover-color);
          background: var(--bar-menu-item-hover-bkg, #444d59)!important;
        }
      & > .icon, > .emoji {
      font-size: var(--bar-button-icon-size, 18px)!important;
      color: white!important;
       }
    }
  }

}

</style>
