<template>
  <el-dialog
    v-model="visible"
    :title="type === 'edit' ? '修改' : '新增'"
    :before-close="fnClose"
  >
    <el-form ref="formRef" :rules="rules" :model="form" label-width="150px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="试题类型" prop="QUESTIONTYPE">
            <el-select
              v-model="form.QUESTIONTYPE"
              placeholder="请选择"
              style="width: 100%"
              @change="changeQuestionType"
            >
              <el-option
                v-for="item in data.questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="题干" prop="QUESTIONDRY">
            <el-input
              type="textarea"
              autosize
              maxlength="255"
              v-model="form.QUESTIONDRY"
              placeholder="这里输入题干"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.QUESTIONTYPE !== '3'" :span="24">
          <el-form-item label="选项A" prop="OPTIONA">
            <el-input
              maxlength="255"
              v-model="form.OPTIONA"
              placeholder="这里输入选项A"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.QUESTIONTYPE !== '3'" :span="24">
          <el-form-item label="选项B" prop="OPTIONB">
            <el-input
              maxlength="255"
              v-model="form.OPTIONB"
              placeholder="这里输入选项B"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.QUESTIONTYPE !== '3'" :span="24">
          <el-form-item label="选项C" prop="OPTIONC">
            <el-input
              maxlength="255"
              v-model="form.OPTIONC"
              placeholder="这里输入选项C"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.QUESTIONTYPE !== '3'" :span="24">
          <el-form-item label="选项D" prop="OPTIOND">
            <el-input
              maxlength="255"
              v-model="form.OPTIOND"
              placeholder="这里输入选项D"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="答案" prop="ANSWER">
            <el-select v-model="form.ANSWER" placeholder="请选择">
              <el-option
                v-for="item in data.answerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </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 { reactive, ref, watchEffect } from "vue";
import { addQuestion, editQuestion } from "@/request/online_learn_exam.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  type: {
    type: String,
    required: true,
    default: "",
  },
  form: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const emits = defineEmits(["update:visible", "update:form", "get-data"]);

const { visible, type, form } = useVModels(props, emits);

const data = reactive({
  questionTypeList: [
    {
      value: "1",
      label: "单选题",
    },
    {
      value: "2",
      label: "多选题",
    },
    {
      value: "3",
      label: "判断题",
    },
  ],
  answerList: [],
});

const rules = {
  QUESTIONTYPE: [
    {
      required: true,
      message: "试题类型（单选题、多选题、判断题）不能为空",
      trigger: "blur",
    },
  ],
  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: "blur" }],
  COURSEWARETYPE: [
    {
      required: true,
      message: "课件类型(1:视频课件、2:资料课件)不能为空",
      trigger: "blur",
    },
  ],
  COURSEWAREID: [
    { required: true, message: "课件ID不能为空", trigger: "blur" },
  ],
};

const formRef = ref(null);

const fnClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};

const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const respData =
      type.value === "add"
        ? await addQuestion({ ...form.value })
        : await editQuestion({ ...form.value });
    if (respData.result === "success") {
      fnClose();
      ElMessage.success("保存成功");
      emits("get-data");
    }
  },
  { atBegin: true }
);

const changeAnswerList = () => {
  data.answerList = [];
  if (form.value.QUESTIONTYPE === "1") {
    data.answerList = [
      { value: "A", label: "A" },
      { value: "B", label: "B" },
      { value: "C", label: "C" },
      { value: "D", label: "D" },
    ];
  } else if (form.value.QUESTIONTYPE === "2") {
    data.answerList = [
      { 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 (form.value.QUESTIONTYPE === "3") {
    data.answerList = [
      { value: "A", label: "正确" },
      { value: "B", label: "错误" },
    ];
  }
};

const changeQuestionType = () => {
  form.value.ANSWER = "";
  changeAnswerList();
};

watchEffect(() => {
  if (form.value.QUESTIONTYPE) {
    changeAnswerList();
  }
});
</script>

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