<template>
  <transition name="fade">
    <div
      v-show="question && examQuestion && examQuestion.getQuestionContent"
      :key="examQuestion.order"
      class="question-view"
    >
      <div style="margin-bottom: -45px;">{{ examQuestion.groupOrder }}、</div>
      <template
        v-if="
          question &&
            question.questionType === 'SINGLE_CHOICE' &&
            examQuestion.questionType === 'SINGLE_CHOICE'
        "
      >
        <single-question-view
          :key="examQuestion.order"
          :question="question"
          :exam-question="examQuestion"
        />
      </template>
      <template
        v-if="
          question &&
            question.questionType === 'MULTIPLE_CHOICE' &&
            examQuestion.questionType === 'MULTIPLE_CHOICE'
        "
      >
        <multiple-question-view
          :key="examQuestion.order"
          :question="question"
          :exam-question="examQuestion"
        />
      </template>
      <template
        v-if="
          question &&
            question.questionType === 'TRUE_OR_FALSE' &&
            examQuestion.questionType === 'TRUE_OR_FALSE'
        "
      >
        <boolean-question-view
          :key="examQuestion.order"
          :question="question"
          :exam-question="examQuestion"
        />
      </template>
      <template
        v-if="
          question &&
            question.questionType === 'FILL_UP' &&
            examQuestion.questionType === 'FILL_UP'
        "
      >
        <fill-blank-question-view
          :key="examQuestion.order"
          :question="question"
          :exam-question="examQuestion"
        />
      </template>
      <template
        v-if="
          question &&
            question.questionType === 'ESSAY' &&
            examQuestion.questionType === 'ESSAY'
        "
      >
        <text-question-view
          :key="examQuestion.order"
          :question="question"
          :exam-question="examQuestion"
        />
      </template>
    </div>
  </transition>
</template>

<script>
import SingleQuestionView from "./SingleQuestionView";
import MultipleQuestionView from "./MultipleQuestionView";
import BooleanQuestionView from "./BooleanQuestionView";
import FillBlankQuestionView from "./FillBlankQuestionView";
import TextQuestionView from "./TextQuestionView";

export default {
  name: "QuestionViewSingle",
  components: {
    SingleQuestionView,
    MultipleQuestionView,
    BooleanQuestionView,
    FillBlankQuestionView,
    TextQuestionView,
  },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    examQuestion: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

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