<template>

  <el-menu
      default-active="1"
      :class="{menu:true, 'menu-active':!isCollapse}"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="isCollapse"
  >
    <el-menu-item index="1">
      <el-icon><icon-menu /></el-icon>
      <span>课程管理</span>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><document /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><setting /></el-icon>
      <span>文件管理</span>
    </el-menu-item>
  </el-menu>

</template>

<script lang="ts" setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  import {ref} from "vue";
  import router from "@/router";
  import {ElMessage} from "element-plus";

  let isCollapse = ref(false)

  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }

  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }

  const handleSelect = (index: number) => {
    if(index == 1){
      router.push(`/manager/course`)
    } else if(index == 2){
      router.push(`/manager/user`)
    } else if(index == 3){
      router.push(`/manager/file`)
    } else {
      ElMessage({
        message: "菜单出错了",
        type: "error"
      })
    }
  }
</script>

<script lang="ts">
export default {
  name: "AdminASide"
}
</script>

<style scoped>
  .menu {
    --el-menu-active-color: var(--admin-color);
    --el-menu-text-color: #777777
  }

  .menu-active {
    width: 200px;
    min-height: calc(100vh - 50px);
  }
</style>