<template>
  <div class="header-container">
    <div class="left-section">
      <span :class="collapseBtnClass" class="collapse-icon" @click="collapse"></span>
    </div>

    <!-- 显示未确认消息数量 -->
    <div class="message-container">
      <!-- 动态绑定类名，根据 unconfirmedCount 改变图标颜色，添加悬浮提示 -->
      <span
        :class="['message-icon', iconClass]"
        @click="goToMessages"
        :title="unconfirmedCount > 0 ? `有 ${unconfirmedCount} 条消息为确认` : ''">
        <i class="el-icon-message-solid"></i>
      </span>
      <!-- 悬浮提示框 -->
      <div v-if="unconfirmedCount > 0" class="tooltip">
        有 {{ unconfirmedCount }} 条消息为确认
      </div>
    </div>

    <div class="logout-container">
      <span class="logout-btn" @click="logout">退出</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Header",
  props: {
    collapseBtnClass: String,
    collapse: Boolean,
  },
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      unconfirmedCount: 0,  // 未确认消息数量
    };
  },
  created() {
    this.userId = this.$route.query.userId;
    this.sss();
  },
  methods: {
    logout() {
      this.$store.dispatch("logout"); // 调用 Vuex 登出逻辑
      this.$router.push("/login"); // 跳转到登录页面
    },
    async sss(){
      try {
        const token = this.$store.state.tokens[this.userId];
        if (!token) {
          alert("用户未登录，请重新登录！");
          this.$router.push('/login');
          return false;
        }
       const response = await axios.get("http://localhost:8080/student/homepage/getMessage", {
         headers: {
           Authorization: `Bearer ${token}`,
         }
       });
        if (response.data.code === 200) {
          // 计算未确认消息的数量
          const unconfirmedCount = response.data.data.filter(message => message.tf === 'false').length;
          this.unconfirmedCount = unconfirmedCount;
        }
      }catch (error){
        console.error('请求错误:', error);
        alert('请求错误');
      }
    },
    goToMessages() {
      const currentRoute = this.$route.path;
      const targetRoute = '/student/message';
      const targetQuery = { userId: this.userId };

      // 如果当前路由和目标路由相同，则不进行导航
      if (currentRoute === targetRoute && JSON.stringify(this.$route.query) === JSON.stringify(targetQuery)) {
        return;
      }

      this.$router.push({ path: targetRoute, query: targetQuery });
    }
  },
  computed: {
    // 计算动态类名
    iconClass() {
      return this.unconfirmedCount > 0 ? 'warning' : 'success';
    }
  }
}
</script>

<style scoped lang="scss">
.warning {
  color: red;  /* 未读消息时，警告颜色 */
}

.success {
  color: green;  /* 没有未读消息时，成功颜色 */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #ddd;
}

.left-section {
  flex: 1;
}

.collapse-icon {
  cursor: pointer;
  font-size: 20px;
}

.message-container {
  display: flex;
  align-items: center;
  margin-right: 20px; /* 保证图标和退出按钮之间有间距 */
  position: relative;
}

.message-icon {
  font-size: 20px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #f0f2f5; /* 背景颜色 */
  border-radius: 50%; /* 圆形 */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 更快速的悬浮效果 */
}

.message-icon:hover {
  transform: scale(1.3); /* 鼠标悬停时图标放大 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 增加阴影 */
}

.tooltip {
  position: absolute;
  top: 50%;
  left: -150px; /* 调整为左侧显示 */
  transform: translateY(-50%); /* 垂直居中对齐 */
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10; /* 确保悬浮框显示在前面 */
}

.message-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

.message-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logout-container {
  display: flex;
  align-items: center;
}

.logout-btn {
  cursor: pointer;
  font-size: 16px;
  color: #409EFF;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.logout-btn:hover {
  background-color: #409EFF;
  color: #fff;
}
</style>
