<template>
  <template v-for="val in chils">
    <el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
      <template #title>
        <SvgIcon :name="val.meta.icon" />
        <span>{{ $t(val.meta.title) }}</span>
      </template>
      <sub-item :chil="val.children" />
    </el-sub-menu>
    <template v-else>
      <el-menu-item :index="val.path" :key="val.path">
        <template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
          <SvgIcon :name="val.meta.icon" />
          <span>{{ $t(val.meta.title) }}</span>
        </template>
      </el-menu-item>
    </template>
  </template>
</template>

<script setup lang="ts" name="navMenuSubItem">
import { computed } from 'vue'
import { RouteRecordRaw } from 'vue-router'

// 定义父组件传过来的值
const props = defineProps({
  // 菜单列表
  chil: {
    type: Array<RouteRecordRaw>,
    default: () => [],
  },
})

// 获取父级菜单数据
const chils = computed(() => {
  console.log('🔗 [Sub Item] 子菜单数据更新:', {
    childrenCount: props.chil?.length || 0,
    children: props.chil?.map(item => ({
      path: item.path,
      title: item.meta?.title,
      icon: item.meta?.icon,
      hasChildren: !!(item.children && item.children.length > 0),
      childrenCount: item.children?.length || 0
    })) || []
  })
  return <RouteItems>props.chil
})
</script>
