<template>
  <div>
    <el-menu-item v-if="hasChild(navItem)" :index="navItem.path">
      <i :class="navItem.icon"></i>
      <span slot="title">{{navItem.title}}</span>
    </el-menu-item>
    <el-submenu v-else ref="subMenu" :index="navItem.path">
      <template slot="title">
        <i :class="navItem.icon"></i>
        <span>{{navItem.title}}</span>
      </template>
      <menu-item
        v-for="child in navItem.children"
        :key="child.path"
        :navItem="child"
        class="nest-menu"
      />
    </el-submenu>
  </div>
</template>
<script>
export default {
  name: 'MenuItem',
  props: {
    navItem: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    hasChild (item) {
      return !item.children || (item.children && item.children.length === 0)
    }
  }
}
</script>
<style scoped>
::v-deep.el-menu-item i{
  display:inline-block;
  width:24px;
}
</style>