<template>
  <div
    :class="{ 'has-logo': showLogo }"
  >
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        ref="menuRef"
        :collapse="isCollapse"
        :collapse-transition="false"
        :default-active="activeMenu"
        mode="vertical"
        :default-openeds="allOpenKeys"
      >
        <sidebar-item
          :index="route.path"
          v-for="(route, index) in sidebarRouters"
          :key="route.path + index"
          :base-path="route.path"
          :item="route"
        />
      </el-menu>
    </el-scrollbar>
<!--     <logout />-->
    <hamburger id="hamburger-container" :is-active="sidebar.opened" :svgColor="svgColor" class="hamburger-container" color="" @toggleClick="toggleSideBar" />
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";
import Logout from './Logout'
import Hamburger from '@/components/Hamburger'

export default {
  components: { SidebarItem, Logo, Logout, Hamburger },
  computed: {
    ...mapState(["settings","sidebar"]),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    allOpenKeys() {
      // 递归收集所有有children的完整path
      const keys = [];
      function collectKeys(routes, basePath = '') {
        routes.forEach(route => {
          if (route.hidden) return;
          let fullPath = '';
          if (route.path.startsWith('/')) {
            fullPath = route.path;
          } else {
            fullPath = basePath ? (basePath.endsWith('/') ? basePath + route.path : basePath + '/' + route.path) : route.path;
          }
          if (route.children && route.children.length > 0) {
            if (fullPath) keys.push(fullPath);
            collectKeys(route.children, fullPath);
          }
        });
      }
      collectKeys(this.sidebarRouters);
      // 过滤空字符串和重复项
      return Array.from(new Set(keys.filter(Boolean)));
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
    isCollapse() {
      return !this.sidebar.opened;
    },
    svgColor() {
      return process.env.VUE_APP_THEME_CLASS !=='theme-blue-white'?'#ffffff':'#000000';
    }
  },
  watch: {
    isCollapse(val) {
      if (!val) {
        // 展开所有有children的菜单
        this.$nextTick(() => {
          this.allOpenKeys.forEach(key => {
            if (this.$refs.menuRef && this.$refs.menuRef.submenus && this.$refs.menuRef.submenus[key]) {
              this.$refs.menuRef.open(key);
            }
          });
        });
      }
    }
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    themeMenuBg() {
      // switch (this.settings.sideTheme) {
      //   case "theme-dark":
      //     return variables["menuBg"];
      //   case "theme-light":
      //     return variables["menuLightBg"];
      //   case "theme-N1":
      //     console.log(variables["menuN1Bg"])
      //     return variables["menuN1Bg"];
      //   case "theme-Green":
      //     return variables["menuGreenBg"];
      // }
      return variables[`menu${this.settings.sideTheme.substring(6)}Bg`];
    },
    themeTextColor() {
      // switch (this.settings.sideTheme) {
      //   case "theme-dark":
      //     return variables["menuText"];
      //   case "theme-light":
      //     return "rgba(0,0,0,.65)";
      //   case "theme-N1":
      //     return variables["menuText"];
      //   case "theme-Green":
      //     return variables["sidebarGreenTitle"];
      // }
      return variables[`menu${this.settings.sideTheme.substring(6)}Text`];
    },
  },
};
</script>

