<template>
  <template v-for="(item, index) in menuItem" :key="index">
    <a-sub-menu v-if="item.children" :key="item.path">
      <template #icon>
        <SvgIcon :icon-name="item.icon"></SvgIcon>
      </template>
      <template #title>
        <span style="margin-left: 5px">{{ item.name }}</span>
      </template>
      <menu-item :menu-item="item.children" />
    </a-sub-menu>
    <a-menu-item
      v-else
      :key="item.path + ''"
      @click="routerMenuItem(item.path)"
    >
      <template #icon>
        <SvgIcon :icon-name="item.icon"></SvgIcon>
      </template>
      <span style="margin-left: 5px">{{ item.name }}</span>
    </a-menu-item>
  </template>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { SystemMenu } from "@/types/config/index";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { useUserSetting } from "@/stores/modules/setting";
const router = useRouter();
const useSetting = useUserSetting();
withDefaults(
  defineProps<{
    menuItem?: SystemMenu[];
  }>(),
  {
    menuItem: (): SystemMenu[] => {
      return [];
    },
  }
);
const routerMenuItem = (path: string) => {
  router.push(path);
  useSetting.setSelectedKeys(path);
};
</script>
<style lang="scss" scoped>
.MenuItem {
  padding-inline: 16px;
}
</style>
