<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts">
defineOptions({ name: 'AnswerData' })

// 最基础的数据
const sharedData = inject('sharedData') as any
// 表单数据
const { formData, editQuestion, formDisabled, isFillType, isSubjectiveType } =
  sharedData
// 组件
const answerRef = ref()

const addFillAnswer = () => {
  formData.value.fillAnswers.push('')
}

const removeFillAnswer = (index: number) => {
  if (formData.value.fillAnswers.length > 1) {
    formData.value.fillAnswers.splice(index, 1)
  }
}

watch(
  () => editQuestion.value?.id,
  async () => {
    // 初始化
    if (editQuestion.value?.id) {
      formData.value.analysis = editQuestion.value.analysis
      formData.value.solve = editQuestion.value.solve
      formData.value.comment = editQuestion.value.comment
      formData.value.knowledge = editQuestion.value.knowledge
      formData.value.exam = editQuestion.value.exam
    } else {
      formData.value.analysis = undefined
      formData.value.solve = undefined
      formData.value.comment = undefined
      formData.value.knowledge = undefined
      formData.value.exam = undefined
    }
  },
  {
    deep: true,
  },
)

defineExpose({
  submit() {
    return {
      analysis: formData.value.analysis || undefined,
      solve: formData.value.solve || undefined,
      comment: formData.value.comment || undefined,
      knowledge: formData.value.knowledge || undefined,
      exam: formData.value.exam || undefined,
    }
  },
})
</script>

<template>
  <el-card shadow="never" class="form-section">
    <template #header>
      <span class="section-title">答案</span>
    </template>

    <!-- 单选题答案 -->
    <!-- <el-form-item v-if="isOptionType" label="答案" prop="answer">
      <el-radio-group v-model="formData.answer">
        <el-radio
          v-for="option in formData.options"
          :key="option.label"
          :value="option.label"
        >
          <span class="answer-option">
            <span>{{ option.label }}</span>
            <latex-text :text="option.value" />
          </span>
        </el-radio>
      </el-radio-group>
    </el-form-item> -->

    <!-- 填空题答案 -->
    <el-form-item v-if="isFillType" label="填空答案" prop="answer">
      <div class="fill-answers">
        <div
          v-for="(_, index) in formData.fillAnswers"
          :key="index"
          class="fill-answer-item"
        >
          <span class="fill-label">第{{ index + 1 }}空：</span>
          <el-input
            class="fill-input"
            v-model="formData.fillAnswers[index]"
            placeholder="请输入答案"
          />
          <el-button
            v-if="formData.fillAnswers.length > 1"
            type="danger"
            size="small"
            @click="removeFillAnswer(index)"
          >
            删除
          </el-button>
        </div>
        <el-button type="primary" size="small" @click="addFillAnswer">
          添加答案
        </el-button>
      </div>
    </el-form-item>

    <!-- 应用题答案 -->
    <el-form-item v-if="isSubjectiveType" label="答案" prop="answer">
      <mj-editor
        ref="answerRef"
        v-model="formData.answer"
        :disabled="formDisabled"
      />
    </el-form-item>

    <el-form-item label="分析" prop="analysis">
      <mj-editor v-model="formData.analysis" :disabled="formDisabled" />
    </el-form-item>

    <el-form-item label="解答" prop="solve">
      <mj-editor v-model="formData.solve" :disabled="formDisabled" />
    </el-form-item>

    <el-form-item label="点评" prop="comment">
      <mj-editor v-model="formData.comment" :disabled="formDisabled" />
    </el-form-item>

    <el-form-item label="知识点" prop="knowledge">
      <mj-editor v-model="formData.knowledge" :disabled="formDisabled" />
    </el-form-item>

    <el-form-item label="考点" prop="exam">
      <mj-editor v-model="formData.exam" :disabled="formDisabled" />
    </el-form-item>
  </el-card>
</template>

<style lang="scss" scoped>
.fill-input {
  width: 400px;
}

.answer-option {
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>
