<template>
  <div v-if="!hasChildren">
    <el-menu-item
      :index="menuItem.menu_url"
      :disabled="menuItem.disabled"
      :class="{ 'menu-item': true }"
    >
      <el-icon v-if="menuItem.menu_grade === 1 && !isCollapse">
        <Menu />
      </el-icon>
      <span>{{ menuItem.menu_name }}</span>
    </el-menu-item>
  </div>
  
  <div v-else>
    <el-sub-menu
      :index="menuItem.menu_url"
      :disabled="menuItem.disabled"
    >
      <template #title>
        <el-icon v-if="menuItem.menu_grade === 1 && !isCollapse">
          <Menu />
        </el-icon>
        <span>{{ menuItem.menu_name }}</span>
      </template>
      
      <menu-item
        v-for="child in menuItem.children"
        :key="child.id"
        :menu-item="child"
        :is-collapse="isCollapse"
      />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import { Menu } from '@element-plus/icons-vue';

// 接收父组件传递的属性
const props = defineProps({
  menuItem: {
    type: Object,
    required: true
  },
  isCollapse: {
    type: Boolean,
    default: false
  }
});

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

<style scoped>
.menu-item {
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
</style>
    