<template>
  <el-aside :width="isCollapse ? '64px' : '200px'" class="sider-container">
    <div class="logo-container">
      <img v-if="!isCollapse" src="@/assets/logo.png" alt="Logo" class="logo mr-3">
      <i v-else class="el-icon-menu text-white" style="font-size: 24px;"></i>
      <span style="color:#DEDEDE;font-weight:bold;font-size:1.5rem!important">考试系统</span>
    </div>
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      :collapse="isCollapse"
      @select="handleMenuSelect"
    >
      <el-menu-item index="/admin/home">
        <i class="el-icon-menu"></i>
        <span slot="title">后台首页</span>
      </el-menu-item>
      <el-menu-item index="/admin/question">
        <i class="el-icon-document-checked"></i>
        <span slot="title">试题管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/examinee">
        <i class="el-icon-user-solid"></i>
        <span slot="title">考生管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/exam">
        <i class="el-icon-date"></i>
        <span slot="title">考试管理</span>
      </el-menu-item>
      <el-menu-item index="logout">
        <i class="el-icon-switch-button"></i>
        <span slot="title">退出登录</span>
      </el-menu-item>
    </el-menu>
    <!-- 删除折叠按钮 -->
  </el-aside>
</template>

<script>
export default {
  name: 'AdminSider',
  components: {
    ElAside: require('element-ui').Aside,
    ElMenu: require('element-ui').Menu,
    ElMenuItem: require('element-ui').MenuItem
  },
  data() {
    return {
      isCollapse: false,
      activeMenu: '/admin/home'
    }
  },
  mounted() {
    // 监听路由变化，更新当前激活的菜单
    this.$router.afterEach((to) => {
      this.activeMenu = to.path
    })
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    // 处理菜单选择事件
    handleMenuSelect(index) {
      if (index === 'logout') {
        this.handleLogout()
      } else {
        // 其他菜单项根据index进行路由跳转
        this.$router.push(index)
      }
    },
    // 退出登录逻辑
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '确认退出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除登录状态等操作
        // 例如：localStorage.removeItem('token')
        // 跳转到登录页
        this.$router.push('/')
      }).catch(() => {
        // 用户取消退出
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    }
  },
  watch: {
    '$route'(to) {
      this.activeMenu = to.path
    }
  }
}
</script>

<style scoped>
.sider-container {
  height: 100vh;
  background-color: #304156;
  overflow-y: auto;
  position: relative;
  transition: width 0.3s;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2d3a4b;
  border-bottom: 1px solid #3d526f;
}

.logo {
  width: 28px;
  height: auto;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
}

/* 确保菜单中的图标和文字正确显示 */
.el-menu-item i {
  margin-right: 10px;
}

/* 滚动条样式 */
.sider-container::-webkit-scrollbar {
  width: 6px;
}

.sider-container::-webkit-scrollbar-track {
  background: #2d3a4b;
}

.sider-container::-webkit-scrollbar-thumb {
  background: #4b6a97;
  border-radius: 3px;
}

.sider-container::-webkit-scrollbar-thumb:hover {
  background: #587ba0;
}
</style>