<template>
  <el-dialog
    class="reexam-check-dialog"
    :visible.sync="dialogVisible"
    width="640px"
    :title="title"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    @open="visibleChange"
  >
    <el-form ref="modalFormComp" :model="modalForm" label-width="120px">
      <el-form-item label="证件号/姓名：">
        <el-input v-model="modalForm.studentInfo" readonly></el-input>
      </el-form-item>
      <el-form-item label="重考原因：">
        <!-- <el-select v-model="modalForm.reason" placeholder="请选择" disabled>
          <el-option
            v-for="(val, key) in REEXAM_REASON"
            :key="key"
            :value="key"
            :label="val"
          ></el-option>
        </el-select> -->
        <el-input v-model="modalForm.reasonDesc" readonly></el-input>
      </el-form-item>

      <el-form-item label="备注详情：">
        <el-input
          type="textarea"
          v-model.trim="modalForm.remark"
          placeholder="请输入"
          :maxlength="200"
          :rows="5"
          show-word-limit
          readonly
        ></el-input>
      </el-form-item>
      <el-form-item label="审批结果：" v-if="!isEdit">
        <p>{{ !modalForm.auditingStatus ? "同意" : "不同意" }}</p>
      </el-form-item>
      <el-form-item label="审批意见：">
        <el-input
          type="textarea"
          v-model.trim="modalForm.auditingSuggest"
          placeholder="请输入"
          :maxlength="200"
          :rows="5"
          show-word-limit
          :readonly="!isEdit"
          :clearable="isEdit"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" v-if="isEdit">
      <el-button type="danger" @click="confirm(1)">不同意</el-button>
      <el-button type="primary" @click="confirm(0)">同意</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reexamCheckDetail, checkReexamApply } from "@/api/invigilation";
import { REEXAM_REASON } from "@/constant/constants";

export default {
  name: "reexam-check-dialog",
  props: {
    instance: {
      type: Object,
      default() {
        return [];
      },
    },
  },
  computed: {
    isEdit() {
      return this.modalForm.status === 1;
    },
    title() {
      return this.isEdit ? "重考审核" : "查看详情";
    },
  },
  data() {
    return {
      dialogVisible: false,
      isSubmit: false,
      REEXAM_REASON,
      modalForm: {},
    };
  },
  methods: {
    visibleChange() {
      this.getDetail();
    },
    async getDetail() {
      const res = await reexamCheckDetail(this.instance.reexamId);
      this.modalForm = res.data.data;
      this.modalForm.reasonDesc = REEXAM_REASON[this.modalForm.reason];
      this.modalForm.studentInfo = `${this.instance.identity}  ${this.instance.courseName}(${this.instance.courseCode}) ${this.instance.name}`;
    },
    cancel() {
      this.dialogVisible = false;
    },
    open() {
      this.dialogVisible = true;
    },
    async confirm(auditingStatus) {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const datas = {
        auditingStatus,
        auditingSuggest: this.modalForm.auditingSuggest,
        reexamId: [this.modalForm.id],
      };
      const data = await checkReexamApply(datas).catch(() => {});
      this.isSubmit = false;

      if (!data) return;
      this.$message.success("操作成功！");
      this.$emit("modified");
      this.cancel();
    },
  },
};
</script>
