<template>
  <header class="header">
    <!-- 网站 Logo 和标题部分 -->
    <div class="logo-section">
      <router-link to="/" class="logo-link">
        <!-- Logo 图片 -->
        <img src="@/assets/logo.png" alt="Logo" class="logo-img" />
        <!-- 标题区域：包含中文和英文标题 -->
        <div class="title-section">
          <div class="divider-section">
            <!-- 分隔线 -->
            <div class="divider"></div>
            <!-- 网站标题组 -->
            <div class="titles">
              <h1>珞珈岛</h1>
              <h2>LuoJia-Island</h2>
            </div>
          </div>
        </div>
      </router-link>
    </div>

    <!-- 导航按钮部分 -->
    <div class="nav-buttons">
      <router-link to="/" class="nav-btn">首页</router-link>
      <div class="dropdown">
        <button class="nav-btn">校内网址</button>
        <ul class="dropdown-menu">
          <li v-for="(college, index) in colleges" :key="index">
            <a :href="college.url" target="_blank">{{ college.name }}</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="nav-section">
      <button v-if="!isLoggedIn" @click="showModal" class="login-btn">登录/注册</button>
      <div v-else class="user-menu">
        <router-link to="/notificationlist" class="nav-btn">通知</router-link>
        <router-link v-if="showAdmin" to="/admin" class="nav-btn admin-btn">管理</router-link>
        <router-link to="/feedback" class="nav-btn">反馈站</router-link>
        <div class="user-avatar" @mouseenter="showDropdown" @mouseleave="hideDropdown">
          <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="avatar-img" />
          <!-- 悬浮板块 -->
          <div class="user-dropdown-menu" v-show="isDropdownVisible">
            <div class="button-container">
              <button @click="goToProfile" class="dropdown-btn">个人中心</button>
              <router-link to="/ChangeInformation" class="dropdown-btn">修改个人信息</router-link>
              <router-link to="/postpublish" class="dropdown-btn">发布帖子</router-link>
              <button @click="logout" class="dropdown-btn">退出登录</button>
            </div>
          </div>
        </div>
      </div>
      
    </div>

    <!-- 登录/注册模态框组件，仅在 isModalVisible 为 true 时显示 -->
    <LoginRegisterModal v-if="isModalVisible" @close="hideModal" />
  </header>
</template>

<script lang="js" setup name="Header">
import { ref, computed, onMounted, watch } from 'vue';
import { useUserStore } from '@/stores/user.js';
import LoginRegisterModal from './LoginRegisterModal.vue';
import { useRouter } from 'vue-router';
import request from '@/utils/request';
// 用户状态管理
const userStore = useUserStore();
const router = useRouter();
// 本地状态
const isModalVisible = ref(false);
const isDropdownVisible = ref(false);
const colleges = ref([
  { name: '武大官网', url: 'https://www.whu.edu.cn/' },
  { name: '计算机学院', url: 'https://cs.whu.edu.cn/' },
  { name: '经济与管理学院', url: 'https://ems.whu.edu.cn/' },
  { name: '法学院', url: 'https://law.whu.edu.cn/' },
  { name: '物理科学与技术学院', url: 'https://physics.whu.edu.cn/' },
  { name: '化学与分子科学学院', url: 'https://chem.whu.edu.cn/' },
  { name: '生命科学学院', url: 'https://life.whu.edu.cn/' },
  { name: '外国语言文学学院', url: 'https://fls.whu.edu.cn/' },
  { name: '历史学院', url: 'https://history.whu.edu.cn/' },
  { name: '新闻与传播学院', url: 'https://jmc.whu.edu.cn/' },
  { name: '艺术与设计学院', url: 'https://artdesign.whu.edu.cn/' },
  { name: '体育学院', url: 'https://pe.whu.edu.cn/' },
  { name: '马克思主义学院', url: 'https://marx.whu.edu.cn/' },
  { name: '继续教育学院', url: 'https://jjy.whu.edu.cn/' },
  { name: '国际教育学院', url: 'https://gjjy.whu.edu.cn/' },
  { name: '网络与信息中心', url: 'https://nic.whu.edu.cn/' },
]);

// 默认头像
const defaultAvatar = require("@/assets/default-avatar/boy_1.png");

// 计算属性
const isLoggedIn = computed(() => userStore.isLoggedIn);
const userInfo = computed(() => {
  return userStore.userInfo;
});
const showAdmin = computed(() => {
  const isAdmin = userStore.isLoggedIn && (userInfo.value.role >= 2);
  console.log('检查管理员权限:', userStore.isLoggedIn, userInfo.value.role, isAdmin);
  return isAdmin;
});

// 方法
const showModal = () => {
  isModalVisible.value = true;
};

const hideModal = () => {
  isModalVisible.value = false;
};

const goToProfile = () => {
  router.push({name: 'UserPage',params: { userId: userInfo.value.userid }});
  isDropdownVisible.value = false; // 隐藏下拉菜单
};

const logout = () => {
  // 调用后端登出接口
  request.post('/user/logout')
    .then(() => {
      console.log('成功调用后端登出接口');
    })
    .catch(error => {
      console.error('调用后端登出接口失败:', error);
    })
    .finally(() => {
      // 无论后端请求成功与否，都清除本地用户状态
      userStore.logout();
      router.push({ name: 'MainPage' }); // 跳转到首页
      isDropdownVisible.value = false;
    });
};

let showTimer = null; // 用于控制显示的定时器
let hideTimer = null; // 用于控制隐藏的定时器

const showDropdown = () => {
  clearTimeout(hideTimer); // 清除隐藏定时器，防止冲突
  showTimer = setTimeout(() => {
    isDropdownVisible.value = true; // 延迟 0.5 秒显示
  }, 200);
};

const hideDropdown = () => {
  clearTimeout(showTimer); // 清除显示定时器，防止冲突
  hideTimer = setTimeout(() => {
    isDropdownVisible.value = false; // 延迟 1 秒隐藏
  }, 400);
};

// 组件挂载时验证用户信息
onMounted(() => {
  if (userStore.isLoggedIn) {
    console.log('Header组件挂载: 检测到用户已登录:', userStore.userInfo.username, '角色:', userStore.userInfo.role);
  }
});

// 监听用户信息变化
watch(() => userStore.userInfo, (newInfo) => {
  console.log('用户信息更新:', newInfo.username, '角色:', newInfo.role);
}, { deep: true });
</script>

<style scoped>
/* 头部容器样式 */
.header {
  display: flex;
  align-items: center;
  padding: 0 20px; /* 增加左右内边距，避免内容过于靠边 */
  border-bottom: 2px solid #e0e0e0;
  background: rgba(255, 255, 255, 0.5);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-sizing: border-box; /* 确保内边距不会影响宽度 */

}

/* Logo 区域样式 */
.logo-section {
  display: flex;
  align-items: center;
  margin-right: 20px; /* 与导航按钮之间的间距 */
}

/* Logo 链接样式 */
.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Logo 图片样式 */
.logo-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

/* 分隔线容器样式 */
.divider-section {
  display: flex;
  align-items: center;
}

/* logo-标题分隔线样式 */
.divider {
  width: 2px;
  height: 40px;
  background-color: #333;
  margin-right: 15px;
}

/* 标题组样式 */
.titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 中文标题样式 */
.titles h1 {
  font-size: 22px;
  margin: 0;
  color: #333;
}

/* 英文标题样式 */
.titles h2 {
  font-size: 12px;
  margin: 0;
  color: #666;
}

/* 导航按钮部分样式 */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: 20px; /* 增加按钮之间的间距 */
  flex: 1; /* 占据剩余空间，推送登录按钮到右侧 */
  margin-left: 20px; /* 确保与 Logo 有一定间距 */
}

/* 导航按钮样式 */
.nav-btn {
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.nav-btn:hover {
  background-color: #f0f0f0;
  color: #6fbd87;
}

/* Dropdown 样式 */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgb(255, 255, 255);
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0; /* 去掉默认内边距 */
  margin: 0;
  z-index: 1000;
  max-height: 200px; /* 限制下拉列表的最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

/* 滚动条样式（可选） */
.dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

.dropdown-menu li {
  padding: 10px 15px;
  border-bottom: 1px solid #eee; /* 添加底部分隔线 */
}

.dropdown-menu li:last-child {
  border-bottom: none; /* 去掉最后一项的边线 */
}

.dropdown-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  display: block; /* 确保链接占满 li */
}

.dropdown-menu li:hover {
  background-color: #f0f0f0; /* 鼠标悬浮时背景高亮 */
}

.dropdown-menu li a:hover {
  color: #6fbd87; /* 鼠标悬浮时文字颜色变化 */
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* 登录按钮部分样式 */
.nav-section {
  margin-left: auto; /* 将登录按钮推到最右侧 */
  display: flex;
  align-items: center;
}

.login-btn {
  height: 35px;
  padding: 0 15px; /* 增加按钮的内边距 */
  border: none;
  background: none;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}

.login-btn:hover {
  color: #6fbd87;
  background: #f0f0f0;
}

.user-menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; 
}
.avatar-img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
}

/* 头像悬浮板块样式 */
.user-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  text-align: center; /* 确保文字居中 */
  width: 140px; /* 减小宽度 */
}

/* 按钮容器样式 */
.button-container {
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  gap: 8px; /* 按钮间间距 */
  width: 100%; /* 确保按钮宽度一致 */
}

/* 下拉菜单按钮样式 */
.dropdown-btn {
  padding: 8px 0;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none;
  display: block;
  width: 100%;
  text-align: center;
}

.dropdown-btn:hover {
  background-color: #f0f5ff;
  color: #54ac52;
}

.admin-btn {
  color: #ff6b6b !important;
  font-weight: bold;
}

.admin-btn:hover {
  background-color: #ffeeee;
}
</style>