<template>
  <el-submenu
    @click.native="handleGoRoute(menu)"
    v-if="menu.children && menu.children.length >= 1"
    :index="menu.id + ''"
  >
    <template slot="title">
      <icon-svg :name="menu.icon==null?'':menu.icon" class="site-sidebar__menu-icon"></icon-svg>
      <span>{{menu.name}} ({{menu.number}})</span>
    </template>
    <menu-tree v-for="item in menu.children" :key="item.id" :menu="item"></menu-tree>
  </el-submenu>
  <el-menu-item v-else :index="menu.id.toString()" @click.native="handleGoRoute(menu)">
    <icon-svg :name="menu.icon==null?'':menu.icon" class="site-sidebar__menu-icon"></icon-svg>
    <span>{{menu.name}} ({{menu.number}})</span>
  </el-menu-item>
</template>

<script>
import menuTree from './index'

export default {
  name: 'menu-tree',
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  components: {
    menuTree
  },
  methods: {
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    handleGoRoute (menu) {
      // this.$router.push({name: 'staff', query: {id: menu.id}})
    }
  }
}
</script>
