<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
        <el-menu-item class="menu_l_first" :index="resolvePath(onlyOneChild.path)" :class="{'sub-menu-title-noDropdown': !isNest}">
          <!-- <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" /> -->

          <ii-home v-if="onlyOneChild.meta?.icon" class="mr-2" theme="outline" size="27" fill="#333" strokeLinejoin="bevel" strokeLinecap="square" />

          <!-- {{ onlyOneChild.meta.icon ? 'ii-home' : item.meta?.icon }} -->
          <component
            v-if="item.meta?.icon && !onlyOneChild.meta?.icon"
            class="mr-2"
            :is="item.meta?.icon"
            theme="outline"
            size="24"
            fill="#333"
            strokeLinejoin="bevel"
            strokeLinecap="square"
          ></component>

          <!-- 二级菜单 -->
          <template #title>
            <span class="menu-title pl-1" :title="hasTitle(onlyOneChild.meta.title)"> {{ $t(`message.router.${onlyOneChild.meta.title}`) }}</span>
          </template>
        </el-menu-item>
      </app-link>
    </template>

    <!-- 一级菜单 -->
    <el-sub-menu v-else class="menu_l_first" ref="subMenu" :index="resolvePath(item.path)">
      <!-- 一级菜单 -->
      <template v-if="item.meta" #title>
        <component v-if="item.meta?.icon" class="mr-2" :is="item.meta?.icon" theme="outline" size="24" fill="#333" strokeLinejoin="bevel" strokeLinecap="square"></component>
        <span class="menu-title pl-1" :title="hasTitle(item.meta.title)">{{ $t(`message.router.${item.meta.title}`) }}</span>
      </template>

      <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
    </el-sub-menu>
  </div>
</template>

<script setup lang="ts">
import {isExternal} from '@/utils/validate'
import AppLink from './Link.vue'
import {getNormalPath} from '@/utils/ruoyi'
// import subMenu from 'element-plus/es/components/menu/src/sub-menu';
// import item from 'element-plus/es/components/space/src/item';
import {ref} from 'vue'

const props = defineProps({
  // route object
  item: {
    type: Object,
    required: true
  },
  isNest: {
    type: Boolean,
    default: false
  },
  basePath: {
    type: String,
    default: ''
  }
})

const onlyOneChild = ref<any>({})

function hasOneShowingChild(children: any[] = [], parent: any) {
  if (!children) {
    children = []
  }
  const showingChildren = children.filter((item) => {
    if (item.hidden) {
      return false
    } else {
      // Temp set(will be used if only has one showing child)
      onlyOneChild.value = item
      return true
    }
  })

  // When there is only one child router, the child router is displayed by default
  if (showingChildren.length === 1) {
    return true
  }

  // Show parent if there are no child router to display
  if (showingChildren.length === 0) {
    onlyOneChild.value = {...parent, path: '', noShowingChildren: true}
    return true
  }

  return false
}

function resolvePath(routePath: any, routeQuery?: any) {
  // console.log(routePath, routeQuery, 'routePath')

  if (isExternal(routePath)) {
    return routePath
  }
  if (isExternal(props.basePath)) {
    return props.basePath
  }
  if (routeQuery) {
    let query = JSON.parse(routeQuery)
    return {path: getNormalPath(props.basePath + '/' + routePath), query: query}
  }
  return getNormalPath(props.basePath + '/' + routePath)
}

function hasTitle(title: any) {
  if (title.length > 5) {
    return title
  } else {
    return ''
  }
}
</script>
<style lang="scss">
.el-menu-item {
  height: 40px !important;
}
.el-sub-menu__title {
  height: 40px !important;
  border-radius: 10px;
}
.is-opened {
  // background: #dadada !important;
}
.menu_l_first {
  border-radius: 10px;
  // height: 40px;
  margin: 4px;
  .el-menu-item {
    height: 40px !important;
    width: auto !important;
    padding: 0px !important;
  }
}
.el-menu--inline {
  .menu_l_first {
    padding-left: 20px !important;
  }
}
</style>
