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

<script setup lang="ts">
import { computed } from "vue";
import subMenu from "./submenu.vue";
import { user } from "@/store/user";

import { router, findRoute } from "@/router";
//@TODO
const isSuper = computed(
  () =>
    user.value.roles.filter((item) => item.roleKey === "super_admin").length > 0
);
const normal_name = [
  "scene",
  "relics",
  "device",
  "organization",
  "users",
  "no-persession",
];
const super_names = [
  "scene",
  "relics",
  "device",
  "organization",
  "users",
  "no-persession",
];
console.log("isSuper", isSuper.value);

const routes = isSuper.value
  ? super_names.map((name) => findRoute(name)!)
  : normal_name.map((name) => findRoute(name)!);
</script>

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