<!-- Sidebar.vue -->
<template>
  <div class="index">
    <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
      <!-- logo -->
      <Logo v-if="showLogo" :collapse="isCollapse" />
      <!-- 菜单 -->
      <happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container">
        <el-menu
          :collapse="isCollapse"
          :background-color="variables.menuBg"
          :text-color="variables.menuText"
          :unique-opened="true"
          :active-text-color="variables.menuActiveText"
          :collapse-transition="false"
          :default-active="activeMenu"
          mode="vertical"
          class="el-menu-vertical"
        >
          <sidebar-item
            v-for="(route, index) in permissionRoutes"
            :key="route.path + index"
            :item="route"
            :base-path="route.path"
            :is-collapse="isCollapse"
          />
        </el-menu>
      </happy-scroll>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SidebarItem from "./SidebarItem.vue";  
import variables from "@/styles/variables.scss";
import Logo from "./Logo.vue";

export default {
  name: "Sidebar",
  components: { SidebarItem, Logo },
  computed: {
    ...mapGetters(["permission_routes", "sidebar", "userType", "orgType"]),

    showLogo() {
      return true;
    },

    variables() {
      return variables;
    },

    isCollapse() {
      return !this.sidebar.opened;
    },

    permissionRoutes() {
      const routes = this.permission_routes || [];
      return routes;
    },

    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;

      if (meta.activeMenu) {
        return meta.activeMenu;
      }

      return path;
    }
  },

  mounted() {
    console.log("Sidebar mounted - 权限路由:", this.permissionRoutes);
  }
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100vh;
  position: relative;

  .sidebar-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .menu-scroll-container {
    flex: 1;
    width: 100%;
    overflow-x: hidden;

    ::v-deep .happy-scroll-container {
      width: 100% !important;
      min-width: unset !important;

      .happy-scroll-content {
        width: 100%;
        min-width: unset !important;
        box-sizing: border-box;
      }
    }
  }

  // 重点修改部分 - 更具体的选择器
  ::v-deep .el-menu-vertical {
    border: none;
    height: 100%;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;

    .el-submenu__title,
    .el-menu-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    // 子菜单容器
    .el-menu--inline {
      // 子菜单项
      .el-menu-item {
        // 激活的子菜单项
        &.is-active {
          background-color: #d7dafd !important;
          color: #296ad9 !important;

          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: #296ad9;
          }
        }

        // 非激活状态的悬停效果
        &:not(.is-active):hover {
          background-color: #f5f7fa !important;
        }
      }
    }
  }

  // 折叠状态
  ::v-deep .el-menu--collapse {
    width: 64px !important;
    min-width: 64px !important;

    .el-submenu__title,
    .el-menu-item {
      text-overflow: clip;
      justify-content: center;
    }

    // 折叠状态下的子菜单激活样式
    .el-menu--popup {
      .el-menu-item {
        &.is-active {
          background-color: #d7dafd !important;
          color: #296ad9 !important;
        }
      }
    }
  }
}
</style>
