<template>
  <div class="header">
    <!-- 产品图标与名称 -->
    <div class="header-icons">
      <img src="../Header/seecoderLogo_wide.png" alt="logo">
    </div>
    <!-- 选择菜单 -->
    <div class="header-menu">
      <el-menu mode="horizontal" :default-active="activePage" @select="handleSelect" :ellipsis="false" class="menu">
        <template v-if="role == 'student'">
          <el-menu-item v-for="item in studentMenuItems" :key="item.key" :index="item.key" class="header-menu-item">
            <div>{{ item.value }}</div>
          </el-menu-item>
        </template>
        <template v-else>
          <el-menu-item v-for="item in teacherMenuItems" :key="item.key" :index="item.key" class="header-menu-item">
            <div>{{ item.value }}</div>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <!-- 用户头像和昵称 -->
    <div class="header-userName">
      <el-dropdown class="el-dropdown" @command="handleCommand">
        <div class="user-info">
          <!-- <template v-if="store.token !== ''">
            <template v-if="store.user.userAvatar !== ''">
              <el-avatar :size="32" :shape="'circle'" :src="store.user.userAvatar" />
            </template>
            <template v-else>
              <el-avatar :size="32" :shape="'circle'">{{ store.user.name.charAt(0) }}</el-avatar>
            </template>
            <div class="nickName">{{ store.user.name }}</div>
          </template>
          <template v-else>            
            <el-avatar :size="32" :shape="'circle'">U</el-avatar>
            <div class="nickName">user</div>
          </template> -->
          <el-icon><User /></el-icon>
          <div class="nickName">{{ store.user.userAvatar !== '' ? store.user.name : "user"}}</div>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人资料</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import {User} from "@element-plus/icons-vue";
import router from "../../router/index.js";
import { onMounted, ref } from "vue";
import './index.scss';
import { useStore } from "@/store";
import emitter from "@/utils/emitter";
import { useRoute } from "vue-router";

const store = useStore();
const role: 'teachers' | 'student' = store.user.role === 'STUDENT' ? 'student' : 'teachers';

const studentMenuItems = [
  { value: "课程广场", key: "CourseSquare" },
  { value: "我的课程", key: "MyCourse" },
  { value: "我的作业", key: "MyWork" },
];

const teacherMenuItems = [
  { value: "课程广场", key: "CourseSquare" },
  { value: "我的课程", key: "MyCourse" },
  { value: "我的批改", key: "MyWork" },
];

const handleSelect = (index: string) => {
  emitter.emit('change-page', index);
};

const handleCommand = (command: string) => {
  if (command === "logout") {
    store.setUser(null);
    store.setToken(null);
    localStorage.setItem('Authorization', null);
    localStorage.setItem('User', null); 
    router.push({ path: "/" });
  } else if (command === "profile") {
    router.push({ path: "/profile" });
  }
};

const route = useRoute();
let activePage = ref('');

onMounted(() => {
  let path = route.path.split('/')[1];
  if (path == "profile") {
    activePage.value = null;
  }

  if (route.path.split('/')[1] == "home") {
    path = route.path.split('/')[2].charAt(0).toUpperCase() + route.path.split('/')[2].slice(1);
    if (path === 'Assignment') {
      activePage.value = 'MyWork';
    } else {
      activePage.value = path;
    }
  }
});
</script>

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