<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"
               router
               :default-active="useRoute().path" @select="handleSelect" :ellipsis="false" class="menu">
        <template v-if="role == 'student'">
          <el-menu-item v-for="item in studentMenuItems" :key="item.key" :index="item.path" 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.path" 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, watch } 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",path:"/home/courseSquare" },
  { value: "我的课程", key: "MyCourse",path:"/home/myCourse" },
  { value: "我的作业", key: "MyWork",path:"/home/myHomework" },
];

const teacherMenuItems = [
  { value: "课程广场", key: "CourseSquare" ,path:"/home/courseSquare"},
  { value: "我的课程", key: "MyCourse",path:"/home/myCourse" },
  { value: "我的批改", key: "MyWork",path:"/home/myCorrect/course" },
    { value: "行为数据", key: "Behavior",path:"/home/behavior/main" },
];

const handleSelect = (index: string) => {
  // emitter.emit('change-page', index);
  router.push(index).then(() => {
    window.location.reload();
  }).catch((err) => {
    console.error('Route navigation error:', err);
  });
};

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('');

// 更新活跃页面状态的函数
const updateActivePage = () => {
  let path = route.path.split('/')[1];
  if (path == "profile") {
    activePage.value = null;
    return;
  }

  if (route.path.split('/')[1] == "home") {
    path = route.path.split('/')[2].charAt(0).toUpperCase() + route.path.split('/')[2].slice(1);
    if (path === 'Assignment' || path === 'MyHomework') {
      activePage.value = 'MyWork';
    } else if (path === 'MyCorrect') {
      // 处理 myCorrect 路径，需要检查第三级路径
      const thirdPath = route.path.split('/')[3];
      if (thirdPath === 'course' || thirdPath === 'assignment') {
        activePage.value = 'MyWork';
      } else {
        activePage.value = path;
      }
    } else {
      activePage.value = path;
    }
  }
};

// 监听路由变化
watch(() => route.path, () => {
  updateActivePage();
}, { immediate: true });

onMounted(() => {
  updateActivePage();
});
</script>

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