<template>
  <div class="main-container">
    <div class="detail-head">
      <div class="left" @click="back()">
        <span class="iconfont iconxiangzuojiantou !text-xs"></span>
        <span class="ml-[1px]">{{ t('returnToPreviousPage') }}</span>
      </div>
      <span class="adorn">|</span>
      <span class="right">{{ pageName }}</span>
    </div>
    <el-card class="box-card !border-none" shadow="never">
      <el-form
        :model="formData"
        label-width="90px"
        ref="formRef"
        :rules="formRules"
        class="page-form"
      >
        <el-form-item :label="t('questionType')" prop="question_type">
          <el-input
            v-model="formData.question_type"
            clearable
            :placeholder="t('questionTypePlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item
          :label="t('questionContentType')"
          prop="question_content_type"
        >
          <el-input
            v-model="formData.question_content_type"
            clearable
            :placeholder="t('questionContentTypePlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('questionContent')" prop="question_content">
          <el-input
            v-model="formData.question_content"
            clearable
            :placeholder="t('questionContentPlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('optionAContentType')">
          <el-input
            v-model="formData.option_a_content_type"
            clearable
            :placeholder="t('optionAContentTypePlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('optionAContent')">
          <el-input
            v-model="formData.option_a_content"
            clearable
            :placeholder="t('optionAContentPlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('optionBContentType')">
          <el-input
            v-model="formData.option_b_content_type"
            clearable
            :placeholder="t('optionBContentTypePlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('optionBContent')">
          <el-input
            v-model="formData.option_b_content"
            clearable
            :placeholder="t('optionBContentPlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('optionCContentType')">
          <el-input
            v-model="formData.option_c_content_type"
            clearable
            :placeholder="t('optionCContentTypePlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('optionCContent')">
          <el-input
            v-model="formData.option_c_content"
            clearable
            :placeholder="t('optionCContentPlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('optionDContentType')">
          <el-input
            v-model="formData.option_d_content_type"
            clearable
            :placeholder="t('optionDContentTypePlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('optionDContent')">
          <el-input
            v-model="formData.option_d_content"
            clearable
            :placeholder="t('optionDContentPlaceholder')"
            class="input-width"
          />
        </el-form-item>

        <el-form-item :label="t('correctAnswer')" prop="correct_answer">
          <el-input
            v-model="formData.correct_answer"
            clearable
            :placeholder="t('correctAnswerPlaceholder')"
            class="input-width"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <div class="fixed-footer-wrap">
      <div class="fixed-footer">
        <el-button type="primary" @click="onSave(formRef)">{{
          t('save')
        }}</el-button>
        <el-button @click="back()">{{ t('cancel') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch } from 'vue'
import { t } from '@/lang'
import { useDictionary } from '@/app/api/dict'
import type { FormInstance } from 'element-plus'
import {
  getExamQuestionsInfo,
  addExamQuestions,
  editExamQuestions,
} from '@/app/api/exam_questions'
import { useRoute } from 'vue-router'

const route = useRoute()
const id: number = parseInt(route.query.id)
const loading = ref(false)
const pageName = route.meta.title

/**
 * 表单数据
 */
const initialFormData = {
  id: 0,
  question_type: '',
  question_content_type: '',
  question_content: '',
  option_a_content_type: '',
  option_a_content: '',
  option_b_content_type: '',
  option_b_content: '',
  option_c_content_type: '',
  option_c_content: '',
  option_d_content_type: '',
  option_d_content: '',
  correct_answer: '',
}
const formData: Record<string, any> = reactive({ ...initialFormData })

const setFormData = async (id: number = 0) => {
  Object.assign(formData, initialFormData)
  const data = await (await getExamQuestionsInfo(id)).data
  Object.keys(formData).forEach((key: string) => {
    if (data[key] != undefined) formData[key] = data[key]
  })
}
if (id) setFormData(id)

const formRef = ref<FormInstance>()
// 选中数据
const selectData = ref<any[]>([])

// 字典数据

// 表单验证规则
const formRules = computed(() => {
  return {
    question_type: [
      {
        required: true,
        message: t('questionTypePlaceholder'),
        trigger: 'blur',
      },
    ],
    question_content_type: [
      {
        required: true,
        message: t('questionContentTypePlaceholder'),
        trigger: 'blur',
      },
    ],
    question_content: [
      {
        required: true,
        message: t('questionContentPlaceholder'),
        trigger: 'blur',
      },
    ],
    option_a_content_type: [
      {
        required: true,
        message: t('optionAContentTypePlaceholder'),
        trigger: 'blur',
      },
    ],
    option_a_content: [
      {
        required: true,
        message: t('optionAContentPlaceholder'),
        trigger: 'blur',
      },
    ],
    option_b_content_type: [
      {
        required: true,
        message: t('optionBContentTypePlaceholder'),
        trigger: 'blur',
      },
    ],
    option_b_content: [
      {
        required: true,
        message: t('optionBContentPlaceholder'),
        trigger: 'blur',
      },
    ],
    option_c_content_type: [
      {
        required: true,
        message: t('optionCContentTypePlaceholder'),
        trigger: 'blur',
      },
    ],
    option_c_content: [
      {
        required: true,
        message: t('optionCContentPlaceholder'),
        trigger: 'blur',
      },
    ],
    option_d_content_type: [
      {
        required: true,
        message: t('optionDContentTypePlaceholder'),
        trigger: 'blur',
      },
    ],
    option_d_content: [
      {
        required: true,
        message: t('optionDContentPlaceholder'),
        trigger: 'blur',
      },
    ],
    correct_answer: [
      {
        required: true,
        message: t('correctAnswerPlaceholder'),
        trigger: 'blur',
      },
    ],
  }
})

const onSave = async (formEl: FormInstance | undefined) => {
  if (loading.value || !formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true
      let data = formData

      const save = id ? editExamQuestions : addExamQuestions
      save(data)
        .then((res) => {
          loading.value = false
          history.back()
        })
        .catch((err) => {
          loading.value = false
        })
    }
  })
}

// 验证手机号格式
const mobileVerify = (rule: any, value: any, callback: any) => {
  if (value && !/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error(t('generateMobile')))
  } else {
    callback()
  }
}

// 验证身份证号
const idCardVerify = (rule: any, value: any, callback: any) => {
  if (
    value &&
    !/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
      value
    )
  ) {
    callback(new Error(t('generateIdCard')))
  } else {
    callback()
  }
}

// 验证邮箱号
const emailVerify = (rule: any, value: any, callback: any) => {
  if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
    callback(new Error(t('generateEmail')))
  } else {
    callback()
  }
}

// 验证请输入整数
const numberVerify = (rule: any, value: any, callback: any) => {
  if (!Number.isInteger(value)) {
    callback(new Error(t('generateNumber')))
  } else {
    callback()
  }
}
const back = () => {
  history.back()
}
</script>

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