<template>
    <div>
      <Menu
      ref="menu"
      :theme="theme"
      :mode="mode"
      :accordion="accordion"
      :width="width"
      :active-name="activeName">
        <template v-for="(item,index) in menuList">
          <menu-item
          :name="item.menuName"
          :key="index"
          v-if="!item.menuRoleModels"
          @on-select="onSelect(item.menuName)">
            <i :class="item.icon || ''" style="font-family:'iconfont';"></i>
            <span>{{ item.menuName}}</span>
          </menu-item>
          <Submenu v-else :name="item.menuName" :key="index">
              <template slot="title" >
                <i :class="item.icon || ''" style="font-family:'iconfont';" />
                {{ item.menuName}}
              </template>
              <template>
                <MenuItem
                v-for="(item,index) in item.menuRoleModels"
                :name="item.menuName"
                :key="index"
                @on-select="onSelect(item.menuName)">
                  <i :class="item.icon || ''" style="font-family:'iconfont';" v-if="menuItemIcon"></i>
                  <span>{{ item.menuName}}</span>
                </MenuItem>
              </template>
            </Submenu>
        </template>
      </Menu>
    </div>
</template>

<script>
export default {
  name: 'HMenuBarFrame',
  props: {
    menuList: {
      type: Array,
      default: () => {
        return []
      }
    },
    theme: {
      type: String,
      default: 'light'
    },
    mode: {
      type: String,
      default: 'vertical'
    },
    accordion: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '280px'
    },
    activeName: {
      type: String,
      default: ''
    },
    menuItemIcon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  created() {},
  methods: {
    onSelect(menuName) {
      this.$emit('selectMenu', menuName)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
