<template>
  <div class="menu-wrapper">
    <!-- 一级菜单：过滤掉 hidden 的路由 -->
    <template v-for="item in visibleRoutes">
      <!-- 情况1：只有一个子菜单且没有孙子菜单 → 显示为一级菜单项 -->
      <router-link
        v-if="shouldShowAsMenuItem(item)"
        :key="getMenuItemKey(item)"
        :to="getMenuItemPath(item)"
      >
        <el-menu-item :index="getMenuItemPath(item)" :class="{'submenu-title-noDropdown': !isNest}">
          <svg-icon v-if="getFirstChild(item).meta && getFirstChild(item).meta.icon" :icon-class="getFirstChild(item).meta.icon" />
          <span v-if="getFirstChild(item).meta && getFirstChild(item).meta.title">
            {{ translateMenuTitle(getFirstChild(item).meta.title) }}
          </span>
        </el-menu-item>
      </router-link>

      <!-- 情况2：有多个子菜单或有孙子菜单 → 显示为下拉菜单 -->
      <el-submenu v-else :key="item.name || item.path" :index="item.name || item.path">
        <template slot="title">
          <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon" />
          <span v-if="item.meta && item.meta.title">{{ translateMenuTitle(item.meta.title) }}</span>
        </template>

        <!-- 二级菜单：使用计算属性过滤后的 children -->
        <template v-for="child in visibleChildren(item)">
          <!-- 有子菜单 → 递归 -->
          <sidebar-item
            v-if="child.children && child.children.length > 0"
            :key="child.path"
            :routes="[child]"
            :is-nest="true"
            class="nest-menu"
          />
          <!-- 无子菜单 → 直接显示 -->
          <router-link v-else :key="child.name" :to="getChildPath(item, child)">
            <el-menu-item :index="getChildPath(item, child)">
              <svg-icon v-if="child.meta && child.meta.icon" :icon-class="child.meta.icon" />
              <span v-if="child.meta && child.meta.title">{{ translateMenuTitle(child.meta.title) }}</span>
            </el-menu-item>
          </router-link>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
import { translateMenuTitle } from '@/utils/i18n'

export default {
  name: 'SidebarItem',
  props: {
    routes: {
      type: Array,
      default: null
    },
    isNest: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // ✅ 过滤掉 hidden 的路由，同时过滤掉没有 children 的路由
    visibleRoutes() {
      return this.routes.filter(route => {
        return !route.hidden && route.children && route.children.length > 0
      })
    }
  },
  methods: {
    translateMenuTitle,
    // ✅ 获取第一个子菜单
    getFirstChild(item) {
      return item.children[0]
    },

    // ✅ 判断是否应该显示为单菜单项（没有孙子菜单，且只有一个子菜单）
    shouldShowAsMenuItem(item) {
      const firstChild = this.getFirstChild(item)
      return item.children.length === 1 && (!firstChild.children || firstChild.children.length === 0)
    },

    // ✅ 获取菜单项的 key
    getMenuItemKey(item) {
      const firstChild = this.getFirstChild(item)
      return firstChild.name
    },

    // ✅ 获取菜单项的路径（处理斜杠重复问题）
    getMenuItemPath(item) {
      const firstChild = this.getFirstChild(item)
      return this.joinPath(item.path, firstChild.path)
    },

    // ✅ 获取子菜单路径
    getChildPath(parent, child) {
      return this.joinPath(parent.path, child.path)
    },

    // ✅ 智能拼接路径，避免双斜杠
    joinPath(parentPath, childPath) {
      if (!parentPath) return childPath
      if (!childPath) return parentPath
      // 去除首尾多余的斜杠后拼接
      const cleanParent = parentPath.replace(/\/$/, '')
      const cleanChild = childPath.replace(/^\//, '')
      return `${cleanParent}/${cleanChild}`
    },

    // ✅ 过滤当前菜单的可见子菜单（用于二级菜单）
    visibleChildren(item) {
      if (!item.children) return []
      return item.children.filter(child => !child.hidden)
    }
  }
}
</script>
