<script setup lang="ts">
import { store } from "@/store/store";
import ChoiceQuestionView from "./ChoiceQuestionView.vue";
import BooleanQuestionView from "./BooleanQuestionView.vue";
import FillBlankQuestionView from "./FillBlankQuestionView.vue";
import TextQuestionView from "./TextQuestionView.vue";

const examQuestion = $computed(() => store.exam.currentQuestion);
</script>

<template>
  <transition name="fade">
    <div
      v-show="examQuestion.gotQuestionContent"
      :key="examQuestion.order"
      class="question-view"
    >
      <div style="margin-bottom: -45px">{{ examQuestion.inGroupOrder }}、</div>
      <ChoiceQuestionView
        v-if="
          examQuestion.questionType === 'SINGLE_CHOICE' ||
          examQuestion.questionType === 'MULTIPLE_CHOICE'
        "
        :key="examQuestion.order"
      />
      <BooleanQuestionView
        v-if="examQuestion.questionType === 'TRUE_OR_FALSE'"
        :key="examQuestion.order"
      />
      <FillBlankQuestionView
        v-if="examQuestion.questionType === 'FILL_UP'"
        :key="examQuestion.order"
      />
      <TextQuestionView
        v-if="examQuestion.questionType === 'ESSAY'"
        :key="examQuestion.order"
      />
    </div>
  </transition>
</template>

<style scoped>
.question-view {
  padding: 20px 30px;
  font-size: 16px;
  text-align: left;
  overflow: auto;
}
</style>
