<template>
  <el-menu
    class="el-menu-vertical-demo"
    :collapse="!$store.getters.sidebarOpened"
    :default-active="activeMenu"
    :unique-opened="true"
    background-color="rgba(0, 0, 0, 0)"
    :text-color="$store.getters.cssVar.menuText"
    :active-text-color="$store.getters.cssVar.menuActiveText"
    router
  >
    <SideBarItem
      v-for="item in routes"
      :key="item.path"
      :route="item"
    ></SideBarItem>
  </el-menu>
</template>

<script setup>
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { filterRoutes, generateMenus } from "@/utils/route";
import SideBarItem from "./SideBarItem.vue";
const store = useStore();
const router = useRouter();
const routes = computed(() => {
  const fRoutes = filterRoutes(router.getRoutes());
  return generateMenus(fRoutes);
});
if (!store.getters.token) {
  router.push("/login");
}
if (router.getRoutes().length <= 7 && store.state.permission.routeReady <= 1) {
  store.commit("user/setIsReady", {});
  setTimeout(() => {
    router.go(0);
  }, 200);
}
//默认激活项
const route = useRoute();
const activeMenu = computed(() => {
  const { path } = route;
  return path;
});
</script>

<style lang="scss" scoped>
::v-deep .el-menu-item {
  height: 48px;
}
::v-deep .el-sub-menu__title {
  height: 48px;
  color: rgb(255, 255, 255);
  background-color: rgb(20, 46, 78);
}
::v-deep .el-menu-item.is-active {
  background-image: linear-gradient(to right,#2356d4 0% ,#8efbde 100%);
  margin: 0 14px;
  border-radius: 4px;
  padding-left: 26px !important;
}
::v-deep .el-sub-menu .el-menu-item {
  height: 48px;
  line-height: 48px;
}

</style>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 281px;
  min-height: 400px;
}

</style>
