<template>
  <template v-for="item in menuList">
    <a-sub-menu
        v-if="item.type === 'dir'"
        :key="item.path"
    >
      <template #icon>
        <icon-font :font-class="item.icon"/>
      </template>
      <template #title>
        <span class="margin-left-xs">{{ item.title }}</span>
      </template>
      <menu-item :menu-list="item.children"/>
    </a-sub-menu>
    <a-menu-item
        v-else
        :key="item.path as any"
        @click="router.push(item.path)"
    >
      <template #icon>
        <icon-font :font-class="item.icon" :size="item.size"/>
      </template>
      <span class="margin-left-xs">{{ item.title }}</span>
    </a-menu-item>
  </template>
</template>

<script setup lang="ts">
import {SystemMenu} from "@/types/config";
import {useRouter} from "vue-router";
import IconFont from "@/components/iconfont/IconFont.vue";

const router = useRouter()
withDefaults(defineProps<{
  menuList?: SystemMenu[]
}>(), {
  menuList: (): SystemMenu[] => {
    return [];
  }
})

</script>

<style scoped lang="scss">

</style>
