<template>
  <el-scrollbar>
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
      background-color="transparent"
      :text-color="variables.menuText"
      :active-text-color="variables.menuActiveText"
      :unique-opened="true"
      :collapse-transition="false"
      class="verticalMenu"
    >
      <sidebar-item
        v-for="route in routes"
        :item="route"
        :key="route.path"
        :is-collapse="isCollapse"
      />
    </el-menu>
  </el-scrollbar>

</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';

import SidebarItem from './SidebarItem.vue';
import variables from '@/styles/variables.module.scss';
import useStore from '@/store';

const { app } = useStore();

const route = useRoute();
const secondMenu = computed<any>({
  get: () => app.secondMenu,
  set: value => {
  }
});
const routes = computed<any>(() => app.routes);
const isCollapse = computed(() => !app.sidebar.opened);
const menuMode = computed(() => app.menuMode);

const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu as string;
  }
  return path;
});

</script>

<style lang="scss" scoped>
//.sidebar-container{
//  background: #F9FAFC;
//  box-shadow: 3px 0 13px 0 rgb(0 0 0 / 8%);
//}

</style>
