<template>
  <el-dialog
    title="试题"
    :close-on-click-modal="false"
    append-to-body
    v-model="visible"
    width="900px"
  >
    <div>
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="dataRule"
        label-width="auto"
        label-position="right"
        @keyup.enter="dialogFormSubmit()"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="题目" prop="question">
              <el-input
                v-model="dialogForm.question"
                maxlength="200"
                placeholder="请输入题目"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="题目关键字" prop="titleWords">
              <el-input
                v-model="dialogForm.titleWords"
                maxlength="1000"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="专项" prop="categoryTitle">
              <el-input
                v-model="dialogForm.categoryTitle"
                maxlength="1000"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="章节" prop="chapter">
              <el-select v-model="dialogForm.chapter" style="width: 100%">
                <el-option
                  v-for="dict in chapterOptions"
                  :key="dict.chapterId"
                  :label="dict.chapterName"
                  :value="dict.chapterId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="题型" prop="type">
              <el-radio-group v-model="dialogForm.type">
                <el-radio label="1" value="1">判断题</el-radio>
                <el-radio label="2" value="2">单选题</el-radio>
                <el-radio label="3" value="3">多选题</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序" prop="showOrder">
              <el-input
                v-model="dialogForm.showOrder"
                maxlength="20"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="选项A" prop="chooseA">
              <el-input
                v-model="dialogForm.chooseA"
                maxlength="200"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选项B" prop="chooseB">
              <el-input
                v-model="dialogForm.chooseB"
                maxlength="200"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="选项C" prop="chooseC">
              <el-input
                v-model="dialogForm.chooseC"
                maxlength="200"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选项D" prop="chooseD">
              <el-input
                v-model="dialogForm.chooseD"
                maxlength="200"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="答案" prop="trueAnswer">
              <el-input
                v-model="dialogForm.trueAnswer"
                maxlength="200"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="难点分析" prop="bestAnswer">
              <el-input
                v-model="dialogForm.bestAnswer"
                maxlength="1000"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="答题技巧" prop="skillInfo">
              <el-input
                v-model="dialogForm.skillInfo"
                maxlength="1000"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="技巧关键字" prop="skillWords">
              <el-input
                v-model="dialogForm.skillWords"
                maxlength="1000"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="车型" prop="carTypeId">
              <span v-if="dialogForm.carTypeId == '1001'">小车</span>
              <span v-if="dialogForm.carTypeId == '1002'">摩托车</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="科目" prop="subject">
              <span v-if="dialogForm.subject == '1'">科一</span>
              <span v-if="dialogForm.subject == '4'">科四</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="题目图片" prop="imageUrl">
            <el-upload
              action="#"
              accept=".png,.jpg,.jpeg,.gif"
              :limit="1"
              :http-request="handleImport"
              :on-exceed="handleExceed"
              :show-file-list="false"
            >
              <img v-if="imgUrl" :src="imgUrl" style="width: 200px" />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button plain @click="visible = false">取消</el-button>
        <el-button type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="QuesAddForm">
import { addQuestion, updateQuestion, uploadFile } from '@/api/xjapplet/xjdatabase'

const message = useMessage() // 消息弹窗

const emit = defineEmits(['update'])

const visible = ref(false)
const canSubmit = ref(true)
const imgUrl = ref(undefined)
const chapterOptions = ref([])
const dialogForm = ref({
  id: undefined,
  showOrder: 0,
  categoryTitle: undefined,
  question: undefined,
  bestAnswer: undefined,
  chooseA: undefined,
  chooseB: undefined,
  chooseC: undefined,
  chooseD: undefined,
  imageUrl: undefined,
  type: undefined,
  trueAnswer: undefined,
  carTypeId: undefined,
  skillInfoPic: undefined,
  source: undefined
})

const dataRule = {
  schoolName: [{ required: true, message: '驾校名称不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
}

const open = (info = undefined, opts) => {
  visible.value = true
  chapterOptions.value = opts
  resetDialogForm()
  if (info) {
    dialogForm.value = { ...info, chapter: parseInt(info.chapter) }
    if (dialogForm.value.imageUrl) {
      imgUrl.value = 'https://ss-cloud.ahduima.com/xjxc/pic/' + dialogForm.value.imageUrl
    }
  }
  info.source = info.source
}

defineExpose({
  open
})

const resetDialogForm = () => {
  dialogForm.value = {
    id: undefined,
    showOrder: 0,
    question: undefined,
    bestAnswer: undefined,
    chooseA: undefined,
    chooseB: undefined,
    chooseC: undefined,
    chooseD: undefined,
    imageUrl: undefined,
    type: undefined,
    trueAnswer: undefined,
    carTypeId: undefined,
    skillInfoPic: undefined,
    skillInfo: undefined,
    jqtp: undefined,
    biaoji: undefined,
    titleWords: undefined,
    skillWords: undefined,
    optaWords: undefined,
    optbWords: undefined,
    optcWords: undefined,
    optdWords: undefined,
    carTypeId: undefined,
    source: undefined
  }
}
const dialogFormRef = ref(null)
// 表单提交
const dialogFormSubmit = async () => {
  if (!dialogFormRef.value) return
  const valid = await dialogFormRef.value.validate()
  if (!valid) return

  if (dialogForm.value.questionId) {
    updateQuestion(dialogForm.value).then((response) => {
      if (response) {
        message.success('修改成功')
        emit('update')
        visible.value = false
      }
    })
  } else {
    addQuestion(dialogForm.value).then((response) => {
      if (response) {
        message.success('新增成功')
        visible.value = false
        emit('update')
      }
    })
  }
}
const handleImport = (opt) => {
  const data = new FormData()
  data.append('file', opt.file)
  uploadFile(data).then((resp) => {
    if (resp.code == 200) {
      message.success('文件上传成功')
      dialogForm.value.imageUrl = resp.data
      imgUrl.value = 'https://ss-cloud.ahduima.com/xjxc/pic/' + dialogForm.value.imageUrl
    }
  })
}
const handleExceed = (files) => {
  handleImport({ file: files[0] })
}
</script>
