<template>
  <el-submenu v-if="checkChildren(menu) && isShow(menu)" :index="menu.name">
    <template slot="title">
      <xm-icon v-if="menu.meta.icon" :name="menu.meta.icon"></xm-icon>
      <span slot="title">{{ menu.meta.title }}</span>
    </template>
    <menu-item v-for="item in menu.children" :key="item.name" :menu="item" :validate="validate" />
  </el-submenu>
  <menu-link v-else-if="isShow(menu)" :to="menu.name">
    <el-menu-item :index="menu.name">
      <xm-icon v-if="menu.meta.icon" :name="menu.meta.icon"></xm-icon>
      <span slot="title">{{ menu.meta.title }}</span>
    </el-menu-item>
  </menu-link>
</template>

<script>

export default {
  name: 'menu-item',
  components: {
    menuLink: () => import('./MenuLink.vue'),
  },
  props: [
    'menu',
    'validate',
  ],
  methods: {
    checkChildren(menu) {
      if (!menu.children || !menu.children.length) return false
      
      return menu.children.some(x => x.meta.menuShow)
    },
    isShow(item) {
      if (!item.meta.menuShow) return false
      if (!this.validate(item)) return false

      return true
    }
  }
}
</script>

