<template>
  <el-dialog
    v-model="visible"
    :title="type === 'edit' ? '修改' : '新增'"
    :before-close="fnClose"
  >
    <el-form ref="formRef" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="试题类型" prop="QUESTIONTYPE">
        <el-select v-model="form.QUESTIONTYPE" @change="fnChangeQuestionType">
          <el-option
            v-for="item in questionTypeOptions"
            :key="item.ID"
            :label="item.NAME"
            :value="item.ID"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="题干" prop="QUESTIONDRY">
        <el-input
          type="textarea"
          :autosize="{ minRows: 3 }"
          v-model="form.QUESTIONDRY"
        />
      </el-form-item>
      <template v-if="form.QUESTIONTYPE !== '3'">
        <el-form-item label="选项A" prop="OPTIONA">
          <el-input v-model="form.OPTIONA" />
        </el-form-item>
        <el-form-item label="选项B" prop="OPTIONB">
          <el-input v-model="form.OPTIONB" />
        </el-form-item>
        <el-form-item label="选项C" prop="OPTIONC">
          <el-input v-model="form.OPTIONC" />
        </el-form-item>
        <el-form-item label="选项D" prop="OPTIOND">
          <el-input v-model="form.OPTIOND" />
        </el-form-item>
      </template>
      <el-form-item label="答案" prop="ANSWER">
        <el-select v-model="form.ANSWER">
          <el-option
            v-for="item in answerList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModels } from "@vueuse/core";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { ElMessage } from "element-plus";
import { ref, watchEffect } from "vue";
import {
  setExercisesAdd,
  setExercisesEdit,
} from "@/request/online_learn_exam.js";
import { uniq } from "lodash-es";
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  type: {
    type: String,
    required: true,
    default: "",
  },
  form: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  coursewareId: {
    type: String,
    required: true,
    default: "",
  },
  coursewareType: {
    type: String,
    required: true,
    default: "",
  },
});

const emits = defineEmits(["update:visible", "update:form", "get-data"]);
const { visible, form } = useVModels(props, emits);
const questionTypeOptions = [
  { ID: "1", NAME: "单选题" },
  { ID: "2", NAME: "多选题" },
  { ID: "3", NAME: "判断题" },
];
const answerList = ref([]);
const rules = {
  QUESTIONTYPE: [
    { required: true, message: "试题类型不能为空", trigger: "change" },
  ],
  QUESTIONDRY: [{ required: true, message: "题干不能为空", trigger: "blur" }],
  OPTIONA: [{ required: true, message: "选项A不能为空", trigger: "blur" }],
  OPTIONB: [{ required: true, message: "选项B不能为空", trigger: "blur" }],
  OPTIONC: [{ required: true, message: "选项C不能为空", trigger: "blur" }],
  OPTIOND: [{ required: true, message: "选项D不能为空", trigger: "blur" }],
  ANSWER: [{ required: true, message: "答案不能为空", trigger: "change" }],
};
const formRef = ref(null);
const fnSetAnswerList = (questionType) => {
  answerList.value = [];
  if (questionType === "1") {
    answerList.value = [
      { value: "A", label: "A" },
      { value: "B", label: "B" },
      { value: "C", label: "C" },
      { value: "D", label: "D" },
    ];
  } else if (questionType === "2") {
    answerList.value = [
      { value: "AB", label: "AB" },
      { value: "AC", label: "AC" },
      { value: "AD", label: "AD" },
      { value: "BC", label: "BC" },
      { value: "BD", label: "BD" },
      { value: "CD", label: "CD" },
      { value: "ABC", label: "ABC" },
      { value: "ABD", label: "ABD" },
      { value: "ACD", label: "ACD" },
      { value: "BCD", label: "BCD" },
      { value: "ABCD", label: "ABCD" },
    ];
  } else if (questionType === "3") {
    answerList.value = [
      { value: "A", label: "正确" },
      { value: "B", label: "错误" },
    ];
  }
};
const fnChangeQuestionType = (event) => {
  form.value.ANSWER = "";
  form.value.OPTIONA = "";
  form.value.OPTIONB = "";
  form.value.OPTIONC = "";
  form.value.OPTIOND = "";
  if (event === "3") {
    form.value.OPTIONA = "正确";
    form.value.OPTIONB = "错误";
  }
  fnSetAnswerList(event);
};
const fnClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const optionList = [
      form.value.OPTIONA,
      form.value.OPTIONB,
      form.value.OPTIONC,
      form.value.OPTIOND,
    ];
    if (uniq(optionList).length !== optionList.length) {
      ElMessage.error("选项不能重复");
      return;
    }
    props.type === "add"
      ? await setExercisesAdd({
          ...form.value,
          COURSEWAREID: props.coursewareId,
          COURSEWARETYPE: props.coursewareType,
        })
      : await setExercisesEdit({ ...form.value });
    fnClose();
    ElMessage.success("保存成功");
    emits("get-data");
  },
  { atBegin: true }
);
watchEffect(() => {
  if (form.value.QUESTIONTYPE) {
    fnSetAnswerList(form.value.QUESTIONTYPE);
  }
});
</script>

<style scoped lang="scss"></style>
