<template>
  <template
    v-for="menu in menuList"
    :key="menu.path"
  >
    <el-sub-menu
      v-if="menu.children && menu.children.length > 0 && !menu.redirect"
      :index="menu.path"
    >
      <template #title>
        <!-- 动态组件的使用方法 -->
        <el-icon>
          <component
            :is="menu.meta.icon"
            class="icons"
          />
        </el-icon>
        <!-- <Icon class="icons"  :icon='menu.meta.icon'></Icon> -->
        <span>{{ menu.meta.title }}</span>
      </template>
      <menu-item :menu-list="menu.children" />
    </el-sub-menu>
    <el-menu-item
      v-else
      style="color: #f4f4f5"
      :index="menu.path"
      @click="clickSubMenu"
    >
      <!-- 动态组件的使用方法 -->
      <el-icon>
        <component
          :is="menu.meta.icon"
          class="icons"
        />
      </el-icon>
      <!-- <Icon class="icons"  :icon='menu.meta.icon'></Icon> -->
      <template #title>
        {{ menu.meta.title }}
      </template>
    </el-menu-item>
  </template>
</template>
<script setup lang="ts">
import { menuStore } from '@/store/menu';

defineProps(['menuList'])
const store = menuStore();
const clickSubMenu = (menu) =>{
  if (store.getIsPhone) {
    store.setCollapse(false)
  }
}
</script>
<style scoped>
.icons {
    width: 24px;
    height: 18px;
    margin-right: 5px;
}
</style>