<template>
  <el-menu
    router
    background-color="transparent"
    :collapse="themeConfig.isCollapse"
    :unique-opened="themeConfig.isUniqueOpened"
    :collapse-transition="false"
  >
    <template v-for="menu in menuList" :key="menu.name">
      <el-submenu
        :index="menu.path"
        v-if="menu.children && menu.children.length"
      >
        <template #title>
          <i v-if="menu.meta?.icon" :class="menu.meta.icon"></i>
          <span>{{ menu.meta?.title }}</span>
        </template>
        <SubmenuItem :submenu="menu.children" />
      </el-submenu>

      <el-menu-item :index="menu.path">
        <i v-if="menu.meta?.icon" :class="menu.meta.icon"></i>
        <template #title>
          <span>{{ menu.meta?.title }}</span>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from "vue";
import { RouteRecordRaw } from "vue-router";
import store from "@/hooks/useStore";
import SubmenuItem from "./submenu-item.vue";

export default defineComponent({
  name: "Aside",

  props: {
    menuList: {
      type: Array as PropType<RouteRecordRaw[]>,
      required: true,
    },
  },

  setup() {
    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });

    return {
      themeConfig,
    };
  },

  components: {
    SubmenuItem,
  },
});
</script>
