<template>
  <div v-if="item.meta && !item.meta.navHide">
    <el-menu-item popper-class="nav-bar-menu-submenu-open" v-if="!item.children || item.children.length == 0" :index="item.path">
      <i :class="item.meta.icon"></i>
      {{ item.meta.title }}
    </el-menu-item>

    <el-submenu v-else popper-class="nav-bar-menu-submenu-open" :show-timeout="100" :hide-timeoutt="100" :index="item.path" popper-append-to-body>
      <template slot="title">
        <i :class="item.meta.icon"></i>
        {{ item.meta.title }}
      </template>
      <menu-item v-for="child in item.children" :key="child.path" :item="child"></menu-item>
    </el-submenu>
  </div>
</template>
<script>
export default {
  name: 'MenuItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.childMenu {
  max-height: 500px;
  overflow: hidden;
}
</style>
