<!--Created by 熊超超 on 2019-06-30.-->
<template>
  <div class="item">
    <el-submenu :index="menu.id" v-if="menu.children && menu.children.length" :key="menu.id">
      <template slot="title">
        <xt-icon :name="menu.icon || 'ring'" :size="iconSize"></xt-icon>
        <span slot="title" class="m-l-5">{{menu.name}}</span>
      </template>
      <template v-for="subMenu in menu.children">
        <my-menu :menu="subMenu" :key="subMenu.id" :level="level + 1"></my-menu>
      </template>
    </el-submenu>
    <el-menu-item :index="menu.id" v-else :key="menu.id">
      <xt-icon :name="menu.icon || 'ring'" :size="iconSize"></xt-icon>
      <span slot="title" class="m-l-5">{{menu.name}}</span>
    </el-menu-item>
  </div>
</template>
<script>
/**
   * elementUI当前版本（2.13.1）存在收缩菜单后，鼠标滑动会报错的bug
   *  错误如下：Uncaught RangeError: Maximum call stack size exceeded.
   *  at VueComponent.handleMouseenter
   *  暂时在template外层加<div class="item">并覆盖了一些样式来解决，等官方修复再删掉多余的代码
   */
export default {
  name: 'my-menu',
  props: {
    menu: {required: true},
    level: {default: 1},
  },
  computed: {
    iconSize() {
      return this.level === 1 ? 18 : 14
    }
  }
}
</script>
<style>
  .el-menu--collapse>.item>.el-menu-item span, .el-menu--collapse>.item>.el-submenu>.el-submenu__title span{
    visibility: hidden;
  }
  .el-menu--collapse>.item>.el-menu-item .el-submenu__icon-arrow, .el-menu--collapse>.item>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }
</style>
