<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>
        <div id="app">
          <div class="filter-container">
            <div class="filter-group">
              <label>试卷类型：</label>
              <button
                  v-for="(type, index) in paperTypes"
                  :key="index"
                  :class="{ active: selectedType === type }"
                  @click="handleTypeChange(type)"
              >
                {{ type }}
              </button>
            </div>
            <div class="filter-group">
              <label>试卷学科：</label>
              <button
                  v-for="(subject, index) in subjects"
                  :key="index"
                  :class="{ active: selectedSubject === subject }"
                  @click="handleSubjectChange(subject)"
              >
                {{ subject }}
              </button>
            </div>
          </div>
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else-if="filteredPapers.length === 0" class="empty">暂无试卷</div>
          <div v-else class="card-container">
            <div
                v-for="(paper, index) in filteredPapers"
                :key="index"
                class="card"
            >
              <h3>{{ paper.name }}</h3>
              <p>学科：{{ paper.subject }}</p>
              <p>题目数：{{ paper.questionCount }}</p>
              <p>试卷总分：{{ paper.totalScore }}</p>
              <p>考试时长：{{ paper.time + " 分钟"}}</p>
              <p>开始时间：{{ paper.startTime || "未设置" }}</p>
              <p>结束时间：{{ paper.endTime || "未设置" }}</p>
              <button
                  v-if="paper.hasTaken"
                  class="start-button taken"
                  disabled
              >
                已考过
              </button>
              <button
                  v-else
                  class="start-button"
                  @click="startExam(paper.id, paper.name, paper.subject, paper.time)"
              >
                开始答题
              </button>
            </div>
          </div>
        </div>
      </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: 'Exam',
  components: {Aside, Header},
  data() {
    return {
      paperTypes: ["固定试卷","随机试卷"], // 试卷类型
      subjects: ["语文", "数学"], // 学科
      selectedType: "班级试卷", // 默认选中的试卷类型
      selectedSubject: "语文", // 默认选中的学科
      papers: [], // 试卷数据
      loading: true, // 加载状态
      tableData: [],
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      hasTaken:false
    };
  },
  computed: {
    filteredPapers() {
      // 根据筛选条件动态过滤试卷
      return this.papers.filter(
          (paper) =>
              paper.subject === this.selectedSubject
      );
    },
  },
  created() {
    this.userId = this.$route.query.userId;
    this.fetchPapers(); // 页面加载时获取试卷数据
  },
  watch: {
    // 监听试卷类型或学科的变化，调用 fetchPapers 重新加载数据
    selectedType() {
      this.fetchPapers();  // 当选中的试卷类型改变时，重新加载试卷数据
    },
    selectedSubject() {
      this.fetchPapers();  // 当选中的学科改变时，重新加载试卷数据
    },
  },
  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
      }
    },
    startExam(id,name,subject,time) {
      this.$router.push({ name: "ExamPaper", query: { userId: this.userId ,id:id ,name: name, subject: subject ,time:time} });
    },
    handleTypeChange(type) {
      this.selectedType = type;  // 修改选中的试卷类型
    },
    handleSubjectChange(subject) {
      this.selectedSubject = subject;  // 修改选中的学科
    },
    async checkExamStatus(testId) {
      const token = this.$store.state.tokens[this.userId];
      if (!token) {
        alert("用户未登录，请重新登录！");
        this.$router.push('/login');
        return false;
      }

      try {
        const response = await axios.get(`http://localhost:8080/student/examPaper/whetherTest`, {
          params: { testId },
          headers: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
        });
        if (response.status === 200) {
          return response.data; // 假设返回的数据中包含 hasTaken 字段
        } else {
          console.warn("检查考试状态失败：" + response.data.msg);
          return false; // 默认未考
        }
      } catch (error) {
        console.error("检查考试状态接口失败：", error);
        return false;
      }
    },
    async fetchPapers(page = 1, size = 10) {
      const token = this.$store.state.tokens[this.userId];
      if (!token) {
        alert("用户未登录，请重新登录！");
        this.$router.push('/login'); // 引导用户重新登录
        return;
      }
      try {
        this.loading = true;

        // 确保 page 和 size 参数是有效的
        const pageNumber = page || 1;  // 使用默认值 1
        const pageSize = size || 10;   // 使用默认值 10

        const response = await axios.get(
            `http://localhost:8080/student/examPaper/examPaperByTypeAndSubject`,
            {
                    params: {
                      pagenum: pageNumber,
                      pagesize: pageSize,   // 确保传递 pagesize
                      type: this.selectedType,  // 类型
                      subject: this.selectedSubject,  // 学科
                    },
                    headers: {
                      Authorization: `Bearer ${token}`,
                      'Content-Type': 'application/json',
                    },
            }
        );
        console.log("responser",response);

        if (response.data.code === 200) {
          const { records } = response.data.data;

          const updatedRecords = await Promise.all(
              records.map(async (record) => {
                const hasTaken = await this.checkExamStatus(record.id);
                return {
                  id: record.id,
                  name: record.name,
                  subject: record.subject,
                  questionCount: record.totalquestion,
                  totalScore: record.totalscore,
                  time: record.time,
                  hasTaken: hasTaken,
                };
              })
          );
          this.papers = updatedRecords;
          console.log("更新后的试卷数据：", updatedRecords);
        } else {
          alert("数据加载失败：" + response.data.msg);
          // this.$router.push('/login'); // 引导用户重新登录
        }
      } catch (error) {
        console.error("获取试卷数据失败：", error);
        alert("试卷数据加载失败，请稍后重试！");
      } finally {
        this.loading = false;
      }
    }
  },
};
</script>

<style scoped>

.start-button.taken {
  background-color: #ccc;
  cursor: not-allowed;
}

.start-button.taken:hover {
  background-color: #ccc; /* 已考过状态无变化 */
}

/* 顶部筛选部分 */
.filter-container {
  margin: 20px;
  display: flex;
  flex-direction: column; /* 设置为垂直排列 */
  gap: 15px; /* 使两个筛选组之间有一定的间距 */
}

.filter-group {
  display: flex;
  align-items: center;
}

.filter-group label {
  margin-right: 10px;
  font-weight: bold;
}

button {
  margin: 5px 10px 5px 0; /* 设置按钮的间距 */
  padding: 5px 10px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}

button.active {
  background-color: #007bff;
  color: white;
}

/* 卡片部分 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: space-between; /* Ensures spacing between cards */
}

.card {
  width: calc(33.333% - 20px); /* Each card takes up 1/3 of the container width, minus gap */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* Ensures padding and border are included in the width */
}

.card h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.card p {
  margin: 5px 0;
  font-size: 14px;
  color: #333;
}

.start-button {
  margin-top: 10px;
  width: 100%;
  padding: 5px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.start-button:hover {
  background-color: #0056b3;
}

/* 加载和空状态 */
.loading,
.empty {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #666;
}
</style>
