<script setup lang="ts">
/**
 * 试题预览组件
 * 支持单选、多选、判断、填空、简答等题型
 */
import { isNumber } from 'lodash-es';

interface QuestionItem {
  id: number;
  questionType: string;
  questionContent: string;
  options: null | string;
  correctAnswer: string;
  answerAnalysis: string;
}

interface Props {
  questions: any[]; // 试题数组
}

withDefaults(defineProps<Props>(), {
  questions: () => [],
});

/**
 * 计算每个试题的选项
 */
const getOptions = (question: QuestionItem): string[] => {
  try {
    const options = question.options ? JSON.parse(question.options) : [];
    // 确保返回的是字符串数组
    return Array.isArray(options) ? options.map(String) : [];
  } catch {
    return [];
  }
};

/**
 * 计算每个试题的正确答案
 */
const getCorrectAnswer = (question: QuestionItem): number[] => {
  try {
    const answer = JSON.parse(question.correctAnswer);
    // 确保返回的是数字数组
    return Array.isArray(answer)
      ? answer.map((item: any) =>
          isNumber(item) ? Number.parseInt(item.toString(), 10) : item,
        )
      : [];
  } catch {
    return [];
  }
};

/**
 * 获取选项字母标识（A、B、C...）
 */
const getOptionLabel = (index: number | string) => {
  return String.fromCodePoint(65 + Number(index));
};
</script>

<template>
  <div class="question-preview">
    <div
      v-for="(question, index) in questions"
      :key="question.id"
      class="question-item mb-6"
    >
      <!-- 题目序号和内容 -->
      <div class="question-header mb-3 flex items-start">
        <span
          v-if="question.sortOrder"
          class="question-number mr-2 font-medium"
        >
          {{ question.sortOrder }}.
        </span>
        <span v-else class="question-number mr-2 font-medium">
          {{ index + 1 }}.
        </span>
        <div
          class="question-content flex-1"
          v-html="question.questionContent"
        ></div>
        <span v-if="question.score" class="question-score ml-2 font-medium">
          {{ question.score }}分
        </span>
      </div>

      <!-- 选项（单选、多选、判断） -->
      <div
        v-if="
          ['single_choice', 'multiple_choice', 'judgment'].includes(
            question.questionType,
          )
        "
        class="question-options pl-6"
      >
        <div
          v-for="(option, optionIndex) in getOptions(question)"
          :key="optionIndex"
          class="option-item mb-2 flex items-center"
        >
          <!-- 单选题 -->
          <div
            v-if="question.questionType === 'single_choice'"
            class="flex w-full items-center"
          >
            <el-radio
              :value="optionIndex"
              :model-value="getCorrectAnswer(question)[0]"
              disabled
              class="mr-1 flex-shrink-0"
            >
              <span class="option-label mr-2 flex-shrink-0">
                {{ getOptionLabel(optionIndex) }}.
              </span>
              <span class="option-content flex-1" v-html="option"></span>
            </el-radio>
          </div>

          <!-- 多选题 -->
          <div
            v-else-if="question.questionType === 'multiple_choice'"
            class="flex w-full items-center"
          >
            <el-checkbox
              :value="optionIndex"
              :checked="getCorrectAnswer(question).includes(optionIndex)"
              disabled
              class="mr-1 flex-shrink-0"
            >
              <span class="option-label mr-2 flex-shrink-0">
                {{ getOptionLabel(optionIndex) }}.
              </span>
              <span class="option-content flex-1" v-html="option"></span>
            </el-checkbox>
          </div>

          <!-- 判断题 -->
          <div
            v-else-if="question.questionType === 'judgment'"
            class="flex w-full items-center"
          >
            <el-radio
              :value="optionIndex"
              :model-value="getCorrectAnswer(question)[0]"
              disabled
              class="mr-1 flex-shrink-0"
            >
              <span class="option-content flex-1" v-html="option"></span>
            </el-radio>
          </div>
        </div>
      </div>

      <!-- 填空题 -->
      <div
        v-else-if="question.questionType === 'fill_blank'"
        class="question-blanks flex items-start pl-6"
      >
        <div class="blank-label mr-2 flex-shrink-0 font-medium">答案：</div>
        <div class="blank-answers flex-1 text-[#4E5969]">
          {{ getCorrectAnswer(question).join('、') }}
        </div>
      </div>

      <!-- 简答题 -->
      <div
        v-else-if="question.questionType === 'essay'"
        class="question-essay flex items-start pl-6"
      >
        <div class="blank-label mr-2 flex-shrink-0 font-medium">答案：</div>
        <div
          class="essay-answer flex-1 text-[#4E5969]"
          v-html="getCorrectAnswer(question)[0] || ''"
        ></div>
      </div>

      <!-- 答案解析 -->
      <div
        v-if="question.answerAnalysis"
        class="question-analysis mt-3 flex items-start pl-6"
      >
        <div class="analysis-label mr-2 flex-shrink-0 font-medium">解析：</div>
        <div
          class="analysis-content flex-1 text-[#4E5969]"
          v-html="question.answerAnalysis"
        ></div>
      </div>
    </div>
  </div>
</template>
