<template>
  <el-menu-item v-if="!hasChildren" :index="fullPath">
    <el-icon v-if="routeItem.meta?.icon && !isSvgIcon">
      <component :is="routeItem.meta.icon" />
    </el-icon>
    <svg-icon v-else-if="routeItem.meta?.icon && isSvgIcon" :name="routeItem.meta.icon" />
    <span>{{ routeItem.meta?.title }}</span>
  </el-menu-item>
  <el-sub-menu v-else :index="fullPath">
    <template #title>
      <el-icon v-if="routeItem.meta?.icon && !isSvgIcon">
        <component :is="routeItem.meta.icon" />
      </el-icon>
      <svg-icon v-else-if="routeItem.meta?.icon && isSvgIcon" :name="routeItem.meta.icon" />
      <span>{{ routeItem.meta?.title }}</span>
    </template>
    <recursive-menu-item v-for="child in routeItem.children" :key="child.path" :route-item="child"
      :base-path="fullPath" />
  </el-sub-menu>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  routeItem: {
    type: Object,
    required: true
  },
  basePath: {
    type: String,
    required: true
  }
})

const hasChildren = computed(() => {
  return props.routeItem.children && props.routeItem.children.length > 0
})

const isSvgIcon = computed(() => {
  return props.routeItem.meta?.icon?.startsWith('svg-')
})

const fullPath = computed(() => {
  // 如果 basePath 已经以当前路径结尾，直接返回 basePath
  if (props.basePath.endsWith(props.routeItem.path)) {
    return props.basePath
  }
  // 否则拼接路径，并确保没有重复的斜杠
  return `${props.basePath}/${props.routeItem.path}`.replace(/\/+/g, '/')
})
</script>
