<template>
  <div>
    <el-container>
      <el-aside :width="sidebarWidth" class="sidebar">
          <div class="divStyle">
              <i :class="isSidebarCollapsed?'el-icon-s-unfold':'el-icon-s-fold'" @click="isSidebarCollapsed=!isSidebarCollapsed"></i>
          </div>
        <el-menu
          :default-active="activeMenuName"
          class="el-menu-vertical"
          @select="handleSelect"
          :collapse="isSidebarCollapsed"
          :router="true"
        >
          <el-menu-item v-for="item in menuData" :key="item.path" :index="item.path">
            <i :class="item.elicon" v-if="isSidebarCollapsed"></i>
            <template slot="title">
              <i :class="item.elicon"></i>
              <span slot="title">{{item.name}}</span>
            </template>
        </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container :style="{ height: mainHeight + 'px' }">
        <el-main class="mainTable">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      isSidebarCollapsed: false,
      menuData:[],
      activeMenuName:"/adminInfo/homePage",
      mainHeight: 0,
      
    };
  },
  computed: {
    ...mapGetters('adminUser',['adminInfo']),
    sidebarWidth() {
      return this.isSidebarCollapsed ? '70px' : '150px'; // 调整宽度
    },
  },
  mounted(){
      this.getMenuData();
      this.activeMenu();
      this.updateMainHeight();
      window.addEventListener('resize', this.updateMainHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateMainHeight);
  },
  methods: {
    updateMainHeight() {
      let mainElement = document.querySelectorAll('.layout')[0];
      if(mainElement){
        this.mainHeight = mainElement.offsetHeight -140;
      }else{
        this.mainHeight = window.innerHeight -140;
      }
      
    },
    getMenuData(){
      if(this.adminInfo?.data?.roles?.includes('SuperAdmin')){
        this.menuData = [
            {
            path:"/adminInfo/homePage/content",
            name:"首页",
            elicon:"el-icon-menu"
            },
            {
            path:"/adminInfo/homePage/userPersion",
            name:"运维用户",
            elicon:"el-icon-setting"
            },
            {
            path:"/adminInfo/homePage/permissionManagement",
            name:"角色管理",
            elicon:"el-icon-share"
            },
        ]
      }else{
        this.menuData = [
            {
            path:"/adminInfo/homePage/content",
            name:"首页",
            elicon:"el-icon-menu"
            }
        ]
      }
   },
   activeMenu(){
      const route = this.$route;
      const { path } = route;
      this.activeMenuName = path;
  },
    toggleSidebar() {
      this.isSidebarCollapsed = !this.isSidebarCollapsed; // 切换折叠状态
    },
    handleSelect(index) {
      console.log(`选中的菜单项: ${index}`);
    },
  },
};
</script>

<style scoped>
.sidebar {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /*border-radius: 10px;*/
  overflow: hidden;
 /*margin-left: 20px; */
}
.el-menu-vertical {
  width: 100%;
  font-size:22px;
}
.el-menu-item{
  font-size: 16px;
}
.divStyle{font-size:24px;color:#2e64fa;padding:6px 20px;}
</style>
