<template>
  <el-dialog
    close="preview-business-student-detail"
    :visible.sync="dialogIsShow"
    title="查看考生数据"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="initData"
  >
    <el-form label-width="130px" class="form-info">
      <el-form-item label="姓名：">
        <span>{{ student.studentName }}</span>
      </el-form-item>
      <el-form-item label="学号：">
        <span>{{ student.studentCode }}</span>
      </el-form-item>
      <el-form-item label="课程（代码）：">
        <span>{{ student.courseName }}（{{ student.courseCode }}）</span>
      </el-form-item>
      <el-form-item label="试卷编号：">
        <span>{{ student.paperNumber }}</span>
      </el-form-item>
      <el-form-item label="考试日期：">
        <span>{{ student.examDate | defaultFieldFilter }}</span>
      </el-form-item>
      <el-form-item label="考试时间：">
        <span>{{ student.examTime | defaultFieldFilter }}</span>
      </el-form-item>
      <el-form-item label="考点：">
        <span>{{ student.examPlace }}</span>
      </el-form-item>
      <el-form-item label="考场：">
        <span>{{ student.examRoom }}</span>
      </el-form-item>
      <el-form-item
        v-for="info in student.extendFields"
        :key="info.code"
        :label="`${info.name}：`"
      >
        <span>{{ info.value }}</span>
      </el-form-item>
    </el-form>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { businessStudentDetail } from "../api";
import { parseTimeRangeDateAndTime } from "@/plugins/utils";

export default {
  name: "preview-business-student-detail",
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dialogIsShow: false,
      student: { extendFields: [] },
    };
  },
  methods: {
    async initData() {
      this.student = {};
      const data = await businessStudentDetail(this.instance.id);
      this.student = data || {};
      if (!this.student.extendFields) this.student.extendFields = [];

      const { date, time } = parseTimeRangeDateAndTime(
        this.student.examStartTime,
        this.student.examEndTime
      );
      this.student.examDate = date;
      this.student.examTime = time;
    },
    open() {
      this.dialogIsShow = true;
    },
  },
};
</script>
