<template>
  <div v-if="!navItem.hidden">
    <el-menu-item v-if="!hasChild(navItem)" :index="fullPath">
      <i :class="navItem.meta.icon"></i>
      <span slot="title">{{navItem.meta.title}}</span>
    </el-menu-item>
    <el-submenu v-else ref="subMenu" :index="fullPath">
      <template slot="title">
        <i :class="navItem.meta.icon"></i>
        <span>{{navItem.meta.title}}</span>
      </template>
      <menu-item
        v-for="child in navItem.children"
        :key="child.path"
        :navItem="child"
        :parent-path="fullPath"
        class="nest-menu"
      />
    </el-submenu>
  </div>
</template>
<script>
import path from 'path'
/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
export default {
  name: 'MenuItem',
  props: {
    navItem: {
      type: Object,
      required: true
    },
    parentPath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    routePath() {
      return this.navItem.path
    },
    fullPath() {
      if (isExternal(this.routePath)) {
        return this.routePath
      }
      if (isExternal(this.parentPath)) {
        return this.parentPath
      }
      return path.resolve(this.parentPath, this.routePath)
    }
  },
  methods: {
    hasChild (item) {
      return item.children && item.children.length > 0
    }
  }
}
</script>
<style scoped>
::v-deep.el-menu-item i{
  display:inline-block;
  width:24px;
}
</style>