<template>
  <el-sub-menu
    v-if="menu.children && menu.children.length > 0"
    :index="String(menu.id)"
  >
    <template #title>
      <el-icon v-if="menu.icon">
        <component :is="iconComponents[menu.icon]" />
      </el-icon>
      <span>{{ menu.name }}</span>
    </template>
    <menu-item
      v-for="child in menu.children"
      :key="child.id"
      :menu="child"
    />
  </el-sub-menu>
  
  <el-menu-item
    v-else
    :index="menu.path"
  >
    <el-icon v-if="menu.icon">
      <component :is="iconComponents[menu.icon]" />
    </el-icon>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script setup lang="ts">
import type { MenuItem as MenuItemType } from '@/stores/permission'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { markRaw, type Component } from 'vue'

const iconComponents: Record<string, Component> = {}
Object.keys(ElementPlusIconsVue).forEach(key => {
  iconComponents[key] = markRaw(ElementPlusIconsVue[key as keyof typeof ElementPlusIconsVue])
})

defineProps<{
  menu: MenuItemType
}>()
</script>
