<template>
  <el-container style="min-height: 100vh">
    <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
    </el-aside>

    <el-container>
      <el-header style="border-bottom:1px solid #ccc;">
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
      </el-header>

      <el-main>
        <!-- 消息列表 -->
        <el-table :data="messages" style="width: 100%">
          <el-table-column label="消息内容" prop="source"></el-table-column>

          <!-- 确认状态 -->
          <el-table-column label="确认状态" width="150">
            <template #default="{ row }">
              <el-tag :type="row.tf === 'true' ? 'success' : 'danger'" style="border-radius: 5px; font-size: 14px;">
                {{ row.tf === 'true' ? '已确认' : '未确认' }}
              </el-tag>
            </template>
          </el-table-column>

          <!-- 操作按钮 -->
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button
                @click="confirmMessage(row)"
                :type="row.tf === 'false' ? 'primary' : 'success'"
                size="small"
                :disabled="row.tf === 'true'">
                {{ row.tf === 'false' ? '确认' : '已确认' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";
import { mapActions } from "vuex";
import Aside from "@/components/Student/Aside.vue";
import Header from "@/components/Student/Header.vue";

export default {
  name: "Message",
  components: { Aside, Header },
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      messages: [], // 消息列表
      userId: null, // 用户ID
      unconfirmedCount: 0, // 未确认消息的数量
    };
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.sideWidth = 64;
        this.collapseBtnClass = 'el-icon-s-unfold';
        this.logoTextShow = false;
      } else {
        this.sideWidth = 200;
        this.collapseBtnClass = 'el-icon-s-fold';
        this.logoTextShow = true;
      }
    },

    // 获取消息列表
    async fetchMessages() {
      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}`,
          }
        });
        console.log("response", response);

        if (response.data.code === 200) {
          this.messages = response.data.data;
          // 计算未确认消息的数量
          const unconfirmedCount = this.messages.filter(message => message.tf === 'false').length;
        } else {
          console.error("获取消息失败", response.data.message);
        }
      } catch (error) {
        console.error("请求错误:", error);
      }
    },

    // 确认消息
    async confirmMessage(row) {
      console.log("row", row.id);
      try {
        const token = this.$store.state.tokens[this.userId];
        if (!token) {
          alert("用户未登录，请重新登录！");
          this.$router.push('/login');
          return false;
        }
        const id = row.id;
        const response = await axios.put(
          "http://localhost:8080/student/homepage/updateMessage",
          { id: id },
          {
            headers: {
              Authorization: `Bearer ${token}`,
              'Content-Type': 'application/json',
            }
          }
        );

        console.log("response", response);
        if (response.data.code === 200) {
          this.$message.success("消息已确认");
          location.reload();
        } else {
          this.$message.error("确认消息失败");
        }
      } catch (error) {
        console.error("请求错误:", error);
        this.$message.error("请求错误");
      }
    }

  },
  created() {
    this.userId = this.$route.query.userId;
    this.fetchMessages();  // 页面加载时获取消息
  }
};
</script>

<style scoped lang="scss">
/* 自定义样式 */
.el-table {
  margin-top: 20px;
}

.el-button {
  width: 100px;
  margin: 0 auto;
}

.el-tag {
  font-size: 14px;
  margin: 0;
}
</style>
