<template>
  <view v-if="(isReadOnly) || (!isReadOnly && question.showParse)" class="mt-40">
    <!-- 主观题的答案在这里显示，其他题型在 question-result 面板显示 -->
    <view v-if="isOnlySubjective" class="mb-20">
      <view class="text-30 text-fore-title font-bold">答案</view>
      <view class="mt-10 text-26 text-fore-light">
        <mp-html :content="decodeHtmlEntities(question.answer2 || '略')" />
      </view>
    </view>
    <view class="text-30 text-fore-title font-bold">解析</view>
    <view class="mt-10 text-26 text-fore-light">
      <mp-html :content="decodeHtmlEntities(question.parse || '暂无解析')" />
    </view>
  </view>
</template>
<script lang="ts" setup>
import { EnumQuestionType, EnumReviewMode } from '@/common/enum';
import { useExam, decodeHtmlEntities } from '@/composables/useExam';
import { Study, Transfer } from '@/types';
import { EXAM_DATA, EXAM_PAGE_OPTIONS } from '@/types/injectionSymbols';

const examPageOptions = inject(EXAM_PAGE_OPTIONS) || {} as Transfer.ExamAnalysisPageOptions;
const examData = inject(EXAM_DATA) || {} as ReturnType<typeof useExam>;
const { practiceSettings } = examData;

const props = defineProps<{
  question: Study.Question;
}>();
const isReadOnly = computed(() => {
  const { readonly } = examPageOptions;
  if (readonly) {
    return true;
  }
  // 练习模式下，需要背题模式且题目已经做过且解析过
  if (practiceSettings.value.reviewMode === EnumReviewMode.DURING_ANSWER && props.question.hasParsed) {
    return true;
  }
  return false;
});
const isOnlySubjective = computed(() => {
  // 除了单选、判断、多选题，其他题型都是主观题
  return ![EnumQuestionType.SINGLE_CHOICE, EnumQuestionType.JUDGMENT, EnumQuestionType.MULTIPLE_CHOICE].includes(props.question.typeId);
});

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