<template>
 <template v-for="menu in menuList" :key="menu.path">
  <el-sub-menu
   v-if="menu.children && menu.children.length > 0"
   :index="menu.path"
  >
   <template #title>
    <el-icon>
     <component class="icons" :is="menu.meta.icon" />
    </el-icon>

    <span>{{ menu.meta.title }}</span>
   </template>
   <menu-item :menuList="menu.children"></menu-item>
  </el-sub-menu>
  <el-menu-item style="color: #f4f4f5" v-else :index="menu.path">
   <i
    v-if="menu.meta.icon && menu.meta.icon.includes('el-icon')"
    :class="menu.meta.icon"
   ></i>
   <el-icon v-if="menu.meta.icon">
    <component class="icons" :is="menu.meta.icon" />
   </el-icon>
   <template #title>{{ menu.meta.title }}</template>
  </el-menu-item>
 </template>
</template>
<script setup lang="ts">
 defineProps(['menuList'])
</script>
<style scoped>
 .icons {
  width: 24px;
  height: 18px;
  margin-right: 5px;
 }
</style>
