<template>
    <div v-if="!item.hidden && item.children" class="menu-wrapper">
      <router-link v-if="hasOneShowingChild(item.children, item) && !onlyOneChild.children && !item.alwaysShow"
        :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
          <span>{{ onlyOneChild.meta.title }}</span>
        </el-menu-item>
      </router-link>
      <el-sub-menu v-else :index="item.name || item.path">
        <template #title>
          <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
          <el-tooltip v-if="item.meta && item.meta.title" effect="dark"
            :content="item.meta.title" :disabled="item.meta.title.length < 6"
            placement="right">
            <span>{{ item.meta.title }}</span>
          </el-tooltip>
        </template>
        <!-- v-if="!child.hidden" -->
        <template v-for="child in item.children" >
          <sidebar-item v-if="child.children && child.children.length > 0" :key="child.path" is-nest class="nest-menu"
            :item="child" :base-path="resolvePath(child.path)" />
          <router-link v-else :to="resolvePath(child.path)" :key="child.name">
            <el-menu-item :index="resolvePath(child.path)">
              <svg-icon v-if="child.meta && child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
              <el-tooltip v-if="child.meta && child.meta.title" effect="dark"
                :content="child.meta.title" :disabled="child.meta.title.length < 6"
                placement="right">
                <span class="item-child">{{ child.meta.title }}</span>
              </el-tooltip>
            </el-menu-item>
          </router-link>
        </template>
      </el-sub-menu>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue'
  
  export default defineComponent({
    name: 'SidebarItem',
    props: {
      item: {
        type: Object,
        required: true
      },
      isNest: {
        type: Boolean,
        default: false
      },
      basePath: {
        type: String,
        default: ''
      }
    },
    setup(props) {
      const onlyOneChild = ref(null)
  
      const hasOneShowingChild = (children, item) => {
        const showingChildren = children.filter(child => {
          if (child.hidden) {
            return false
          } else {
            onlyOneChild.value = child
            return true
          }
        })
        if (showingChildren.length === 1) {
          if (item.redirect === 'dashboard' || item.name === 'dashboard') {
            return true
          } else {
            return false
          }
        }
        return false
      }
  
      const resolvePath = (...paths) => {
        return paths.join('/')
      }
  
      return {
        onlyOneChild,
        hasOneShowingChild,
        resolvePath,
      }
    }
  })
  </script>
  
  <style scoped>
  span {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 50px);
    display: inline-block;
  }
  
  .item-child {
    width: 100% !important;
  }
  </style>