<template>
  <div id="Sidebar" class="reset-menu-style">
    <!--logo-->
    <!-- <Logo v-if="settings.sidebarLogo" :collapse="!isCollapse" /> -->
    <!--router nav-->
    <el-scrollbar style="background-color:#410425">
      <el-menu class="el-menu-vertical" :default-active="activeMenu" :collapse="!isCollapse" :unique-opened="false" :collapse-transition="false" background-color="#410425" text-color="#C0C4CC" active-text-color="#fff" mode="vertical">
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from "@/store/app";
import { usePermissionStore } from "@/store/permission";
// import Logo from './Logo.vue'
import SidebarItem from "./SidebarItem.vue";
//导入配置文件
const appStore = useAppStore();
const settings = computed(() => {
  return appStore.settings;
});

const route = useRoute();
const permissionStore = usePermissionStore();
const routes = computed(() => {
  return permissionStore.routes;
});
const isCollapse = computed(() => {
  return appStore.sidebar.opened;
});

//change  scss variable to js
// const dillScssExportToJson = (scssExportJson: any) => {
//   const jsonString = scssExportJson.replace(/:export\s*/, '').replace(/[\s+\r\n]/g, '')
//   const scssJson: ObjTy = {}
//   jsonString
//     .slice(1, jsonString.length - 2)
//     .split(';')
//     .forEach((fItem: any) => {
//       const arr = fItem.split(':')
//       scssJson[arr[0]] = arr[1]
//     })
//   return scssJson
// }
// import scssExportJson from '@/styles/variables-to-js.scss'
// import { ObjTy } from '~/common'
// const scssJson = dillScssExportToJson(scssExportJson)
//get scss variable

const activeMenu = computed(() => {
  const { meta, path } = route;
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
});
</script>
<style scoped lang="scss">
//fix open the item style issue
// .el-menu-vertical {
//   width: var(--side-bar-width);
// }
:deep .el-menu-item.is-active {
  background: #ac014d;
}
:deep .el-menu--inline .el-menu-item {
  padding-left: 50px !important;
}
</style>
