<!--
 * @Author: 曹捷
 * @Date: 2020-04-22 14:28:39
 * @LastEditors: 曹捷
 * @LastEditTime: 2022-01-06 11:32:42
 * @Description: 菜单 根据路由生成，根据系统权限判断是否展示对应菜单
 -->
<template>
  <a-sub-menu :key="item[config.menu.key]" v-if="item[config.menu.children] && item[config.menu.children].length > 0">
    <template class="menu-item" #title>
      <span class="anticon">
        <!-- <svg-icon v-if="item[config.menu.iconName]" class="menu-icon p-r-5" :icon-class="item[config.menu.iconName]" /> -->
        <span v-if="item[config.menu.iconName]" class="icon iconfont menu-icon p-r-5 " :class="[`icon-${item[config.menu.iconName]}`]"></span>
      </span>
      <span>{{ item[config.menu.name]  }}</span>
    </template>
    <sidebarItem :base-path="child.path" :is-nest="true" :item="child" :key="child[config.menu.key]" class="nest-menu" v-for="child in item[config.menu.children]"></sidebarItem>
  </a-sub-menu>
  <a-menu-item v-else :key="item[config.menu.key]" :title="item[config.menu.name] " :path="item.path">
    <span class="anticon">
      <!-- <svg-icon  class="menu-icon p-r-5" :icon-class="item[config.menu.iconName]" /> -->
      <span v-if="item[config.menu.iconName]" class="icon iconfont menu-icon p-r-5 " :class="[`icon-${item[config.menu.iconName]}`]"></span>

    </span>
    <span>{{ item[config.menu.name]  }}</span>
  </a-menu-item>
</template>

<script>
import { mapGetters } from 'vuex'
import { isExternal } from './../../../utils/validate.js'
import Item from './Item.vue'

export default {
  name: 'sidebarItem',
  computed: {
    ...mapGetters(['sidebar']),
    sidebar () {
      return this.$store.state.app.sidebar
    },
    config () {
      return this.$store.state.settings
    }
  },
  watch: {
    $route (value) {
      this.currMenu = value.path === this.item.path
    }
  },
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data () {
    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
    this.onlyOneChild = null
    return {
      currMenu: false
    }
  },
  methods: {
    hasOneShowingChild (children = [], parent) {
      return parent[config.menu.children] && parent[config.menu.children].length > 0 ? false : true
    },
    resolvePath (routePath) {
      console.log('🚀 ~ file: SidebarItem.vue ~ line 100 ~ resolvePath ~ routePath', routePath)
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(this.basePath)) {
        return this.basePath
      }
      return routePath
      // return path.resolve(
      //   this.basePath === null ? '' : this.basePath,
      //   routePath === null ? '' : routePath
      // )
    }
  }
}
</script>
<style lang="less">
</style>
