<template>
  <div class="sidebar-container" :class="{ 'is-collapse': collapse }">
    <!-- Logo区域 -->
    <div class="sidebar-logo">
      <img src="@/assets/vue.svg" alt="logo" class="logo-img" />
      <span v-show="!collapse" class="logo-title">盘古用户平台</span>
    </div>
    
    <!-- 菜单 -->
    <el-scrollbar>
      <el-menu
        :default-active="activeMenu"
        :collapse="collapse"
        :collapse-transition="false"
        :unique-opened="true"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
      >
        <el-menu-item index="/dashboard">
          <el-icon><HomeFilled /></el-icon>
          <template #title>首页</template>
        </el-menu-item>
        
        <el-menu-item index="/school">
          <el-icon><School /></el-icon>
          <template #title>学校管理</template>
        </el-menu-item>
        
        <el-menu-item index="/member">
          <el-icon><User /></el-icon>
          <template #title>会员管理</template>
        </el-menu-item>
        
        <el-menu-item index="/student">
          <el-icon><UserFilled /></el-icon>
          <template #title>学生管理</template>
        </el-menu-item>
        
        <el-menu-item index="/application">
          <el-icon><Grid /></el-icon>
          <template #title>应用管理</template>
        </el-menu-item>
        
        <!-- 基础数据子菜单 -->
        <el-sub-menu index="base">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>基础数据</span>
          </template>
          <el-menu-item index="/base/grade">年级管理</el-menu-item>
          <el-menu-item index="/base/class">班级管理</el-menu-item>
          <el-menu-item index="/base/subject">学科管理</el-menu-item>
          <el-menu-item index="/base/region">区域管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
/**
 * 侧边栏组件
 * @author pangu
 */
import { Grid, HomeFilled, School, Setting, User, UserFilled } from '@element-plus/icons-vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})
</script>

<style scoped>
.sidebar-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 100%;
  background-color: #304156;
  transition: width 0.3s;
  z-index: 1001;
  overflow: hidden;
}

.sidebar-container.is-collapse {
  width: 64px;
}

.sidebar-logo {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: #2b3a4a;
}

.logo-img {
  width: 32px;
  height: 32px;
}

.logo-title {
  margin-left: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* 菜单样式 */
.el-menu {
  border-right: none;
}

.sidebar-container.is-collapse .el-menu {
  width: 64px;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: #263445 !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #409EFF !important;
  color: #fff !important;
}
</style>
