<template>
  <el-menu
    :default-active="activeMenu" 
    class="el-menu-vertical-demo"
    background-color="#333"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="1" @click="goTo('home')">
      <i class="el-icon-house"></i>
      <span>使用必看</span>
    </el-menu-item>
    <el-menu-item index="2" @click="goTo('rating')">
      <i class="el-icon-setting"></i>
      <span>选修课评分</span>
    </el-menu-item>
    <el-menu-item index="3" @click="goTo('ratingforcomp')">
      <i class="el-icon-setting"></i>
      <span>必修课评分</span>
    </el-menu-item>
    <el-menu-item index="4" @click="goTo('course-list')">
      <i class="el-icon-setting"></i>
      <span>我的课程</span>
    </el-menu-item>
    <el-menu-item index="5" @click="goTo('my-qa')">
      <i class="el-icon-message"></i>
      <span>我的追问</span>
    </el-menu-item>
    <el-menu-item index="6" @click="goTo('about')">
      <i class="el-icon-info"></i>
      <span>关于</span>
    </el-menu-item>
    <div class="sidebar-footer">
      <span class="footer-title">NEU小站课程评分系统 - v1.1</span>
      <div class="footer-info">
      © 2025 <a href="https://www.xn--xhq44jb2fzpc.com/" target="_blank">NEU小站</a>
      </div>
    </div>

  </el-menu>
</template>

<script>
export default {
  name: "SideBar",
  computed: {
    // 动态计算当前选中的菜单项
    activeMenu() {
      const routeName = this.$route.name;
      if (routeName === 'home') return '1';
      if (routeName === 'rating') return '2';
      if (routeName === 'ratingforcomp') return '3';
      if (routeName === 'course-list') return '4';
      if (routeName === 'my-qa') return '5';
      if (routeName === 'about') return '6';
      return '1'; // 默认选中第一个选项卡
    }
  },
  methods: {
    goTo(routeName) {
      this.$router.push({ name: routeName });
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo {
  border-right: none;
  display: flex;
  flex-direction: column;
  height: 98%; /* 使侧边栏填满整个视口高度 */
  /* position: fixed; */
  width: 250px;
  
  
}

.el-menu-item {
  border-radius: 8px;
  
}

.el-menu-item:hover {
  background-color: #1d1e1f;
}

.el-menu-item span {
  margin-left: 10px;
}

/* 新增样式 */
.sidebar-footer {
  margin-top: auto; /* 将底部内容推到底部 */
  padding: 10px;
  text-align: center;
  font-size: 14px; /* 调整字体大小 */
  color: #888; /* 调整字体颜色 */
}

.sidebar-footer a {
  color: #e0e4e8;
  text-decoration: none; /* 确保悬停时也没有下划线 */
  bottom: 20px;
  width: 100%; /* 确保footer占满宽度 */
  text-align: center;

}

.sidebar-footer a:hover {
  color: #9a9ea2;
  text-decoration: none; /* 确保悬停时也没有下划线 */
}

.footer-title {
  font-size: 12px; /* 设置更小的字体 */
  color: #f6f0f0; /* 设置较浅的颜色 */
  text-align: center;
}

.footer-info {
  margin-top: 7px; /* 增加与上一行的间距 */
  font-size: 12px; /* 设置更小的字体 */
  color: #beb5b5; /* 设置较浅的颜色 */
  text-align: center;
}

.footer-info a {
  color: #beb5b5; /* 设置较浅的颜色 */
  text-decoration: none; /* 确保悬停时也没有下划线 */
}

.footer-info a:hover {
  color: #a8a4a6; /* 确保悬停时也没有下划线 */
}


</style>