<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>
          <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-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-row>

        <el-row>
          <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>
          <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>
          <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"
                type="textarea"
                :autosize="{ minRows: 2 }"
                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"
                type="textarea"
                :autosize="{ minRows: 2 }"
                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="errorInfo">
              <el-input
                v-model="dialogForm.errorInfo"
                type="textarea"
                :autosize="{ minRows: 2 }"
                maxlength="1000"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <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> -->
              <Icon icon="ep:plus" style="width: 80px; height: 80px; border: 1px dashed #dcdfe6" />
            </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/uav/question.js'

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: '2',
  trueAnswer: undefined,
  carTypeId: undefined,
  skillInfoPic: undefined,
  chapter: undefined,
  skillInfo: undefined,
  skillWords: 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()
  dialogForm.value.driveTypeName = info.driveTypeName
  dialogForm.value.carTypeName = info.carTypeName
  if (info) {
    dialogForm.value = { ...dialogForm.value, ...info, chapter: info.chapter }
    if (dialogForm.value.imageUrl) {
      imgUrl.value = dialogForm.value.imageUrl.includes('http')
        ? dialogForm.value.imageUrl
        : 'https://ss-cloud.ahduima.com/xjxc/pic/' + dialogForm.value.imageUrl
    } else {
      imgUrl.value = ''
    }
  }
}

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: '2',
    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,
    chapter: '1'
  }
}
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>
