<template>
  <template v-for="menu in submenu" :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>
        {{ menu.meta?.title }}
      </template>
      <submenu-item :submenu="menu.children" />
    </el-submenu>

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

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { RouteRecordRaw } from "vue-router";

export default defineComponent({
  name: "submenu-item",

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

  setup() {},
});
</script>
