<template>
    <el-container style="min-height: 100vh; width: 100%">
      <!-- Left sidebar -->
      <el-aside :width="sideWidth + 'px'" style="background-color: #f4f7fc; box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15)">
        <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
      </el-aside>

      <!-- Main content -->
      <el-container style="width: calc(100% - 200px);">
        <el-header style="border-bottom: 1px solid #e1e4ea; padding: 10px 20px; background: #fff;">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" />
        </el-header>

      <el-main style="padding: 20px;">
        <!-- 搜索框 -->
        <el-input
            v-model="searchQuery"
            placeholder="请输入试卷名称进行搜索"
            suffix-icon="el-icon-search"
            style="width: 300px; margin-left: auto;"
        />

        <!-- 试卷列表 -->
        <el-table :data="filteredExams" style="width: 100%">
          <el-table-column prop="id" label="ID" width="100"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="subject" label="学科"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button @click="openDistributionDialog(scope.row)" type="primary" size="small">发布情况</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalExams"
            @current-change="handlePageChange"
            layout="total, prev, pager, next, jumper"
        />

        <!-- 分发弹窗 -->
        <el-dialog :visible.sync="isDistributionDialogVisible" title="分发试卷">
          <el-table :data="classList" style="width: 100%">
            <el-table-column prop="grade" label="年级"></el-table-column>
            <el-table-column prop="class1" label="班级"></el-table-column>
            <el-table-column label="状态" width="180">
              <template slot-scope="scope">
                <el-tag :type="scope.row.release === 1 ? 'success' : 'danger'" style="border-radius: 5px; font-size: 14px;">
                  {{ scope.row.release === 1 ? '已发布' : '未发布' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click="distributeExam(selectedExam.id,scope.row)" type="success" size="small">发布</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="isDistributionDialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Header from "@/components/Teacher/Header.vue";
import Aside from "@/components/Teacher/Aside.vue";
import axios from "axios"; // 引入 axios 用于 API 请求

export default {
  name: "TeacherExam",
  components: { Aside, Header },
  data() {
    return {
      collapseBtnClass: "el-icon-s-fold",
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      exams: [], // 试卷列表
      classList: [], // 班级列表
      selectedExam: null, // 当前选择的试卷
      isDistributionDialogVisible: false, // 分发弹窗显示状态
      searchQuery: "", // 搜索框的内容
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的试卷数量
      totalExams: 0, // 总试卷数
    };
  },
  computed: {
    // 计算属性：根据搜索内容过滤试卷列表
    filteredExams() {
      if (this.searchQuery) {
        return this.exams.filter((exam) =>
          exam.name.toLowerCase().includes(this.searchQuery.toLowerCase()) // 搜索名称
        );
      }
      return this.exams; // 如果没有输入搜索内容，返回所有试卷
    },
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse;
      this.sideWidth = this.isCollapse ? 64 : 200;
      this.collapseBtnClass = this.isCollapse ? "el-icon-s-unfold" : "el-icon-s-fold";
      this.logoTextShow = !this.isCollapse;
    },

    // 打开分发试卷的弹窗
    openDistributionDialog(exam) {
      this.selectedExam = exam;
      this.fetchClassList(exam.id);
      this.isDistributionDialogVisible = true;
    },

    // 获取班级列表
    async fetchClassList(testid) {
        try{
          const token = this.$store.state.tokens[this.userId];
          if (!token) {
            alert("用户未登录，请重新登录！");
            this.$router.push("/login");
            return;
          }
          const response = await axios.get("http://localhost:8080/teacher/examPaper/selectClassRelease",{
            params:{testid:testid},
            headers:{Authorization:`Bearer ${token}`}
          });
          if(response.data.code===200){
            this.classList = response.data.data;
          }
        }catch (error){
          alert("用户未登录，请重新登录！");
          this.$router.push("/login");
          return;
        }
    },

    // 更新班级分发状态
    updateStatus(classInfo) {
      console.log("更新状态:", classInfo.className, "为", classInfo.status);
    },

    // 向特定班级分发试卷
    async distributeExam(testid,classInfo) {
      try {
        const token = this.$store.state.tokens[this.userId];
        if (!token) {
          alert("用户未登录，请重新登录！");
          this.$router.push("/login");
          return;
        }
        console.log("class1",classInfo.class1);
        const response = await axios.post("http://localhost:8080/teacher/examPaper/addExamPaper", {
          id: testid,  // 直接在请求体中传递
          grade: classInfo.grade,
          class1: classInfo.class1
        }, {
          headers: { Authorization: `Bearer ${token}` }
        });

        console.log("response",response);
        if(response.data.code===200){
          this.$message.success("分发成功！");
          this.fetchClassList(testid);
        }else{
          this.$message.error("分发失败！");
        }
      }catch (error){
        console.log("数据异常"+error);
      }

    },

    // 获取试卷列表
    async fetchExams() {
      try {
        const token = this.$store.state.tokens[this.userId];
        if (!token) {
          alert("用户未登录，请重新登录！");
          this.$router.push("/login");
          return;
        }
        const response = await axios.get("http://localhost:8080/teacher/examPaper/getExamPaper",{
           params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          },
          headers: {
            Authorization: `Bearer ${token}`,
          }
        });
        if(response.data.code===200){
          this.exams = response.data.data.records;
        }else{
          this.$message.error("获取数据异常");
        }
      }catch(error) {
          console.error("获取试卷列表失败:", error);
      }
    },

    // 处理分页页码变化
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchExams(); // 获取新的页码数据
    },
  },
  created() {
    this.userId = this.$route.query.userId;
    this.fetchExams(); // 页面加载时获取试卷列表
  },
};
</script>

<style scoped lang="scss">
.el-table {
  margin-top: 20px;
}
</style>
