<template>
  <div>
    <el-dialog
      ref="dialog"
      :title="title"
      width="900px"
      top="20px"
      :visible.sync="visible"
      @open="dialogOpen"
      @close="closeDialog"
    >
      <el-table :data="tableData" stripe style="width: 100%;">
        <el-table-column label="批次名称">
          <span slot-scope="scope">{{ scope.row.examName }}</span>
        </el-table-column>
        <el-table-column width="100" label="课程">
          <span slot-scope="scope">{{ scope.row.courseName }}</span>
        </el-table-column>
        <el-table-column width="100" label="状态">
          <span slot-scope="scope">{{
            scope.row.status | examRecordStatusFilter
          }}</span>
        </el-table-column>
        <el-table-column width="170" label="开考时间">
          <span slot-scope="scope">{{
            scope.row.firstStartTime | datetimeFilter
          }}</span>
        </el-table-column>
        <el-table-column width="170" label="交卷时间">
          <span slot-scope="scope">{{
            scope.row.finishTime | datetimeFilter
          }}</span>
        </el-table-column>
        <el-table-column width="100" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.videoCount"
              size="mini"
              type="primary"
              plain
              @click="openMonitorRecord(scope.row)"
            >
              监考回放
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="part-page">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100, 200, 300]"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
      <div class="my-2"></div>
    </el-dialog>
  </div>
</template>

<script>
import { searchStudentExamRecord } from "@/api/examwork-student";
export default {
  name: "StudentManagementDialog",
  props: {
    student: Object,
  },
  watch: {
    student() {
      this.tableData = [];
      this.pageSize = 10;
      this.total = 0;
    },
  },
  computed: {
    title() {
      return `考试记录-${this.student.name}-${this.student.identity}`;
    },
  },
  data() {
    return {
      visible: false,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
    };
  },
  methods: {
    dialogOpen() {
      let studentManageCache = window.sessionStorage.getItem(
        "studentManageCache"
      );
      if (!studentManageCache) {
        this.handleCurrentChange(0);
        return;
      }
      studentManageCache = JSON.parse(studentManageCache);
      const { currentPage, pageSize } = studentManageCache.curStudent;
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.searchForm();

      window.sessionStorage.removeItem("studentManageCache");
    },
    openDialog() {
      this.visible = true;
    },
    closeDialog() {
      this.visible = false;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchForm();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.searchForm();
    },
    async searchForm() {
      let datas = {
        studentId: this.student.id,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      };
      //
      if (this.student.examRecordId) {
        datas.examRecordId = this.student.examRecordId;
      }
      const res = await searchStudentExamRecord(datas);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
      if (this.total > 0 && this.tableData.length === 0) {
        this.handleCurrentChange(this.currentPage - 1);
      }
    },
    // monitor record
    openMonitorRecord(row) {
      window.sessionStorage.setItem(
        "studentTrackMonitorRecord",
        row.monitorRecord
      );
      window.sessionStorage.setItem(
        "studentManageCache",
        JSON.stringify({
          form: this.$parent.form,
          pageSize: this.$parent.pageSize,
          currentPage: this.$parent.currentPage,
          curStudent: {
            studentId: this.student.id,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          },
        })
      );

      this.$router.push({
        name: "StudentTrackRecord",
        params: {
          examRecordId: row.examRecordId,
        },
      });
    },
  },
};
</script>
