<template>
  <div v-if="!item.hidden && item.children" class="menu-wrapper">
    <router-link
      v-if="hasOneShowingChild(item.children, item) && onlyOneChild.value && !onlyOneChild.value.children && !item.alwaysShow"
      :to="resolvePath(onlyOneChild.value.path)"
    >
      <el-menu-item :index="resolvePath(onlyOneChild.value.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
        <svg-icon v-if="onlyOneChild.value.meta && onlyOneChild.value.meta.icon" :icon-class="onlyOneChild.value.meta.icon"></svg-icon>
        <span>{{ $t(onlyOneChild.value.meta.title) }}</span>
      </el-menu-item>
    </router-link>
    <el-submenu 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="$t(item.meta.title)"
          :disabled="$t(item.meta.title).length < 6"
          placement="right"
        >
          <span>{{ $t(item.meta.title) }}</span>
        </el-tooltip>
      </template>
      <template v-for="child in item.children" v-if="child && !child.hidden">
        <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="$t(child.meta.title)"
              :disabled="$t(child.meta.title).length < 6"
              placement="right"
            >
              <span class="item-child">{{ $t(child.meta.title) }}</span>
            </el-tooltip>
          </el-menu-item>
        </router-link>
      </template>
    </el-submenu>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref } from 'vue';
/* import { defineProps } from 'vue'; */
import path from 'path-browserify';
import { useI18n } from 'vue-i18n';

const props = defineProps<{
  item: any;
  isNest?: boolean;
  basePath?: string;
}>();
const { t } = useI18n();
const onlyOneChild = ref<any>(null);

const hasOneShowingChild = (children: any[], item: any) => {
  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: string[]) => {
  return path.resolve(props.basePath || '', ...paths);
};
</script>
  
<!--   <style scoped lang="scss">
  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 50px);
    display: inline-block;
  }
  
  .item-child {
    width: 100% !important;
  }
  </style> -->