<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="考试规则设置" name="first">
        <el-form :model="form" label-width="170px" inline>
          <el-row>
            <el-form-item label="考试模式">
              <ExamTypeSelect v-model="form.mode"></ExamTypeSelect>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="批次编码">
              <el-input v-model.trim="form.code"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="批次名称">
              <el-input v-model.trim="form.name"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="考试时间">
              <el-date-picker
                v-model="form.startEndTimeProxy"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="候考时长（分钟）">
              <MinuteInput v-model.trim="form.prepareSeconds"> </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="考试次数限制">
              <el-input v-model.number.trim="form.examCount"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="考试时长（分钟）">
              <MinuteInput v-model.trim="form.maxDurationSeconds">
              </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="迟到时长（分钟）">
              <MinuteInput v-model.trim="form.openingSeconds"> </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="冻结时间（分钟）">
              <MinuteInput v-model.trim="form.minDurationSeconds">
              </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="启用集中收卷">
              <el-radio v-model="form.forceFinish" :label="1">是</el-radio>
              <el-radio v-model="form.forceFinish" :label="0">否</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="启用开考口令">
              <el-radio v-model="form.enableShortCode" :label="1">是</el-radio>
              <el-radio v-model="form.enableShortCode" :label="0">否</el-radio>
              <el-input v-model.trim="form.shortCode"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否允许断点续考">
              <el-radio v-model="form.enableBreak" :label="1">是</el-radio>
              <el-radio v-model="form.enableBreak" :label="0">否</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="form.enableBreak" label="断点次数">
              <el-input v-model.trim="form.breakResumeCount"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="form.enableBreak" label="断点时长（分钟）">
              <MinuteInput v-model.trim="form.breakExpireSeconds">
              </MinuteInput>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="重考是否需要审核">
              <el-radio v-model="form.reexamAuditing" :label="1">是</el-radio>
              <el-radio v-model="form.reexamAuditing" :label="0">否</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="取分策略">
              <el-radio v-model="form.recordSelectStrategy" label="LATEST">
                最后一次提交
              </el-radio>
              <el-radio
                v-model="form.recordSelectStrategy"
                label="HIGHEST_OBJECTIVE_SCORE"
              >
                客观分最高
              </el-radio>
              <el-radio
                v-model="form.recordSelectStrategy"
                label="HIGHEST_TOTAL_SCORE"
              >
                总分最高
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="多选题给分规则">
              <el-radio v-model="form.objectiveScorePolicy" label="EQUAL">
                全对给分
              </el-radio>
              <el-radio v-model="form.objectiveScorePolicy" label="PARTIAL">
                漏选给一半分
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否显示客观分">
              <el-radio v-model="form.showObjectiveScore" :label="1">
                是
              </el-radio>
              <el-radio v-model="form.showObjectiveScore" :label="0">
                否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否允许摄像头拍照作答">
              <el-radio v-model="form.cameraPhotoUpload" :label="1">
                是
              </el-radio>
              <el-radio v-model="form.cameraPhotoUpload" :label="0">
                否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否允许小程序作答">
              <el-radio v-model="form.mobilePhotoUpload" :label="1">
                是
              </el-radio>
              <el-radio v-model="form.mobilePhotoUpload" :label="0">
                否
              </el-radio>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="监考设置" name="second">
        <el-form :model="form" label-width="180px" inline>
          <el-row>
            <h2>开考检测</h2>
            <el-form-item label="">
              <el-radio v-model="form.entryAuthenticationPolicy" label="OFF">
                安全级别：无
              </el-radio>
              <el-radio
                v-model="form.entryAuthenticationPolicy"
                label="FACE_VERIFY_OPTIONAL"
              >
                安全级别：低
              </el-radio>
              <el-radio
                v-model="form.entryAuthenticationPolicy"
                label="FACE_VERIFY_FORCE"
              >
                安全级别：中
              </el-radio>
              <el-radio
                v-model="form.entryAuthenticationPolicy"
                label="LIVENESS"
              >
                安全级别：高
              </el-radio>
            </el-form-item>
          </el-row>
          <h2>过程监控</h2>
          <el-row>
            <el-form-item label="是否考中人脸识别">
              <el-radio v-model="form.inProcessFaceVerify" :label="1"
                >是
              </el-radio>
              <el-radio v-model="form.inProcessFaceVerify" :label="0"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否考中陌生人脸识别">
              <el-radio v-model="form.inProcessFaceStrangerIgnore" :label="0"
                >是
              </el-radio>
              <el-radio v-model="form.inProcessFaceStrangerIgnore" :label="1"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否考中活体检测">
              <el-radio v-model="form.inProcessLivenessVerify" :label="1"
                >是
              </el-radio>
              <el-radio v-model="form.inProcessLivenessVerify" :label="0"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row v-if="form.inProcessLivenessVerify">
            <el-form-item label="活体验证弹出时间段">
              <MinuteInput
                v-model.trim="form.inProcessLivenessFixedRange[0]"
                style="width: 150px;"
              />
              ~
              <MinuteInput
                v-model.trim="form.inProcessLivenessFixedRange[1]"
                style="width: 150px;"
              />
              <span style="color: red;"
                >*活体验证将该时间段内随机出现，且时间段设置不能超过冻结时间</span
              >
            </el-form-item>
          </el-row>
          <el-row v-if="form.inProcessLivenessVerify">
            <el-form-item label="活体验证结果的判定方案">
              <el-radio v-model="form.inProcessLivenessJudgePolicy" label="ANY">
                单条成功则通过
              </el-radio>
              <el-radio v-model="form.inProcessLivenessJudgePolicy" label="ALL">
                所有验证成功则通过
              </el-radio>
              <el-radio
                v-model="form.inProcessLivenessJudgePolicy"
                label="MORE"
              >
                成功次数大于失败则通过
              </el-radio>
            </el-form-item>
          </el-row>
          <h2>监考直播</h2>
          <el-row>
            <el-form-item label="是否开启考生端监考直播">
              <el-radio v-model="form.monitorProxy" :label="true">是 </el-radio>
              <el-radio v-model="form.monitorProxy" :label="false"
                >否
              </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="form.monitorProxy" label="是否需要视频转录">
              <el-radio v-model="form.monitorRecord" :label="1">是 </el-radio>
              <el-radio v-model="form.monitorRecord" :label="0">否 </el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="form.monitorProxy" label="电脑&手机监控方案">
              <el-checkbox-group v-model="form.monitorVideoSource">
                <el-checkbox label="client_camera"
                  >电脑摄像头为主机位</el-checkbox
                >
                <el-checkbox label="client_screen">电脑开启录频</el-checkbox>
                <el-checkbox label="mobile_first">手机主机位</el-checkbox>
                <el-checkbox
                  :disabled="!form.monitorVideoSource.includes('mobile_first')"
                  label="mobile_second"
                  >手机辅机位</el-checkbox
                >
              </el-checkbox-group>
              <span style="color: red;">*主机位设备负责收音及播放监考提示</span>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="其他设置" name="third">
        <el-form :model="form" label-width="170px" inline>
          <el-row>
            <el-form-item label="考试须知">
              <el-input v-model.trim="form.preNotice"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="须知强制阅读时长">
              <el-input v-model.trim="form.preNoticeStaySeconds">
                <template slot="append">秒</template>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="考后说明">
              <el-input v-model.trim="form.postNotice"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="IP限制">
              <el-radio v-model="form.enableIpLimit" :label="1">是</el-radio>
              <el-radio v-model="form.enableIpLimit" :label="0">否</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="IP段(*表示任意)：">
              <el-input v-model.trim="form.ipAllow"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <el-button @click="save">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
</template>

<script>
import ExamTypeSelect from "@/components/ExamTypeSelect";
import MinuteInput from "@/components/MinuteInput";
import { saveExam, getExamDetail } from "@/api/examwork-exam";

export default {
  name: "ExamEdit",
  components: { ExamTypeSelect, MinuteInput },
  computed: {
    examId() {
      return this.$route.params.id;
    },
    isEdit() {
      return !!this.examId;
    },
  },
  watch: {
    "form.startEndTimeProxy": {
      immediate: true,
      handler(v) {
        this.form.startTime = v[0];
        this.form.endTime = v[1];
      },
    },
    "form.monitorProxy": {
      immediate: true,
      handler(v) {
        if (!v) {
          this.form.monitorVideoSource = [];
          this.form.monitorRecord = 0;
        }
        if (this.form.monitorVideoSource === null) {
          this.form.monitorVideoSource = [];
        }
      },
    },
    "form.monitorVideoSource": {
      immediate: true,
      handler(v, ov) {
        if (!v) {
          this.form.monitorVideoSource = [];
        }
        if (
          // 没动静，不修改，避免死循环
          (v || []).includes("mobile_first") !==
            (ov || []).includes("mobile_first") &&
          !this.form.monitorVideoSource.includes("mobile_first")
        ) {
          this.form.monitorVideoSource = this.form.monitorVideoSource.filter(
            (v) => v !== "mobile_second"
          );
        }
      },
    },
  },
  async created() {
    if (this.isEdit) {
      const res = await getExamDetail({ id: this.examId });
      this.form = { ...this.form, ...res.data.data.records };
      this.form.startEndTimeProxy = [this.form.startTime, this.form.endTime];
      this.form.monitorProxy = !!this.form.monitorVideoSource;
    }
  },
  data() {
    return {
      activeName: "first",
      form: {
        mode: "",
        code: "",
        name: "",
        startEndTimeProxy: [],
        startTime: 0,
        endTime: 0,
        prepareSeconds: 0,
        maxDurationSeconds: 0,
        openingSeconds: 0,
        minDurationSeconds: 0,
        forceFinish: 1,
        enableShortCode: 1,
        shortCode: "",
        enableBreak: 1,
        breakResumeCount: 0,
        breakExpireSeconds: 0,
        reexamAuditing: 0,
        recordSelectStrategy: "HIGHEST_OBJECTIVE_SCORE",
        objectiveScorePolicy: "EQUAL",
        showObjectiveScore: 0,
        cameraPhotoUpload: 0,
        mobilePhotoUpload: 0,
        entryAuthenticationPolicy: "OFF",
        inProcessFaceVerify: 0,
        inProcessFaceStrangerIgnore: 0,
        inProcessLivenessVerify: 0,
        inProcessLivenessFixedRange: [],
        inProcessLivenessJudgePolicy: "ALL",
        monitorProxy: false,
        monitorRecord: 0,
        monitorVideoSource: [],
        ipAllow: "",
      },
    };
  },
  methods: {
    async save() {
      await saveExam(this.form);
      this.$notify({ title: "保存成功", type: "success" });
      this.$router.back();
    },
    cancel() {
      this.$router.back();
    },
  },
};
</script>

<style></style>
