<template>
  <el-sub-menu v-if="hasChildren" :index="menu.path">
    <template #title>
      <el-icon v-if="menu.icon || menu.meta?.icon">
        <component :is="menu.icon || menu.meta?.icon" />
      </el-icon>
      <span>{{ menu.title || menu.meta?.title }}</span>
    </template>
    <sidebar-menu-item 
      v-for="child in menu.children" 
      :key="child.path" 
      :menu="child" 
    />
  </el-sub-menu>
  <el-menu-item v-else :index="menu.path">
    <el-icon v-if="menu.icon || menu.meta?.icon">
      <component :is="menu.icon || menu.meta?.icon" />
    </el-icon>
    <template #title>{{ menu.title || menu.meta?.title }}</template>
  </el-menu-item>
</template>

<script setup>
import { computed } from 'vue'
import * as ElementPlusIcons from '@element-plus/icons-vue'

// 接收菜单项属性
const props = defineProps({
  menu: {
    type: Object,
    required: true
  }
})

// 判断是否有子菜单
const hasChildren = computed(() => {
  return props.menu.children && props.menu.children.length > 0
})
</script>

<style scoped>
.el-icon {
  margin-right: 12px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #7f8c8d;
  transition: color 0.2s ease;
  font-size: 18px;
}

.el-menu-item .el-icon, :deep(.el-sub-menu__title .el-icon) {
  color: #7f8c8d !important;
  transition: color 0.2s ease;
}

.el-menu-item:hover .el-icon, 
:deep(.el-sub-menu__title:hover .el-icon) {
  color: #34495e !important;
}

/* 激活菜单项图标 */
.el-menu-item.is-active .el-icon {
  color: #2c3e50 !important;
}

:deep(.el-sub-menu.is-active > .el-sub-menu__title .el-icon) {
  color: #2c3e50 !important;
}

/* 菜单文字样式 */
.el-menu-item span, :deep(.el-sub-menu__title span) {
  font-size: 14px;
  letter-spacing: 0.2px;
}

/* 子菜单项样式优化 */
:deep(.el-sub-menu .el-menu-item) {
  font-size: 13px;
  padding-left: 48px !important;
}

:deep(.el-sub-menu .el-menu-item .el-icon) {
  font-size: 16px;
  margin-right: 10px;
}
</style> 