<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="200">
            <template slot-scope="scope">
              <el-button @click="openExamDialog(scope.row)" type="primary" size="small">查看试卷</el-button>
              <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="isExamDialogVisible" title="试卷内容" width="80%" :close-on-click-modal="false">
          <!-- 设置对话框的样式 -->
          <div v-if="examQuestions.length > 0" class="exam-table-container">
            <el-table :data="examQuestions" style="width: 100%">
              <!-- 表格列 -->
              <el-table-column label="ID" prop="id" width="60"></el-table-column>
              <el-table-column label="题目" prop="content" width="300"></el-table-column>

              <!-- 如果题目有选项（chance），则显示选项列 -->
              <el-table-column label="选项" width="400">
                <template v-slot="scope">
                  <div v-if="scope.row.chance && scope.row.chance.length > 0">
                    <el-row v-for="(option, index) in scope.row.chance" :key="index" type="flex" justify="start" align="middle" class="option-row">
                      <el-col :span="24">
                        <el-tag :type="'success'" class="option-tag">
                          {{ option.label }}: {{ option.text }}
                        </el-tag>
                      </el-col>
                    </el-row>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="isExamDialogVisible = false" type="primary">关闭</el-button>
          </span>
        </el-dialog>

        <!-- 分发弹窗 -->
        <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: [], // 班级列表
      examQuestions: [], //试卷题目
      selectedExam: null, // 当前选择的试卷
      isDistributionDialogVisible: false, // 分发弹窗显示状态
      isExamDialogVisible: 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;
    },
    //打开试卷题目
    openExamDialog(exam){
      console.log("22222",exam);
      this.fetchExamQuestions(exam.id);
      this.isExamDialogVisible = true;
    },

     // 获取试卷题目
    async fetchExamQuestions(examId) {
      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/getExamPaperQuestions", {
          params: { id: examId },
          headers: { Authorization: `Bearer ${token}` },
        });

        if (response.data.code === 200) {
          this.examQuestions = response.data.data; // 获取试卷题目
          console.log("response",this.examQuestions);
        } else {
          this.$message.error("获取试卷题目失败");
        }
      } catch (error) {
        console.error("获取试卷题目失败:", error);
        this.$message.error("获取试卷题目失败");
      }
    },

    // 打开分发试卷的弹窗
    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;
}
/* 对话框的样式 */
.el-dialog {
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  .el-dialog__header {
    background-color: #409EFF;
    color: white;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
  }
}

/* 表格样式 */
.exam-table-container {
  margin-top: 20px;
}

/* 设置选项行的间距 */
.option-row {
  margin-bottom: 10px;
}

/* 标签样式 */
.option-tag {
  border-radius: 20px;
  font-size: 14px;
}

.no-option-tag {
  background-color: #f56c6c;
  color: white;
  font-size: 14px;
}

/* 对话框底部按钮 */
.dialog-footer {
  text-align: right;
  padding: 15px;
}
</style>
