<template>
  <div class="slide">
    <!-- {{ routes }} -->
    <el-menu
      :default-active="(router.currentRoute.value.name as string)"
      @select="(name: string) => router.push({ name })"
    >
      <sub-menu
        :meta="route.meta"
        :name="route.name"
        v-for="route in routes"
        :key="route.name"
      />
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import subMenu from "./submenu.vue";
import { getPermissionRoutes } from "@/store/permission";
import { RouteName, router } from "@/router";
import { FireRouteName } from "@/app/fire/routeConfig";

const props = defineProps<{ names: string[] }>();

const routes = getPermissionRoutes(props.names, []);
</script>

<style lang="scss" scoped>
.slide {
  background: #ffffff;
}
</style>
