<template>
  <div class="container preview-container">
    <div v-for="(element, index) in questionsInfo.questions" :key="index" class="element-container">
      <Choice v-if="element.question_type === 1" :element="element" :active="false"></Choice>
      <!-- 填空题 -->
      <Completion
        v-if="element.question_type === 4"
        :element="element"
        :active="chooseQuestionId === element.id"
        sn="lXEBBpE2"
      ></Completion>

      <martrix-question
        v-if="element.question_type === 9"
        :element="element"
        :active="chooseQuestionId === element.id"
      />

      <!-- 打分题 -->
      <Rate
        v-if="element.question_type === 5"
        :element="element"
        :active="chooseQuestionId === element.id"
        sn="lXEBBpE2"
      />
    </div>
  </div>
</template>
<script setup>
import Choice from '@/views/Design/components/Questions/Choice.vue';
// store paine
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/stores/counter';
import MartrixQuestion from '@/views/Design/components/Questions/MartrixQuestion.vue';
import Rate from '@/views/Design/components/Questions/Rate.vue';
import Completion from '@/views/Design/components/Questions/Completion.vue';
const store = useCounterStore();
const { questionsInfo } = storeToRefs(store);
</script>
<style scoped lang="scss">
.preview-container {
  background: #f5f5f5;

  & .element-container {
    padding: 8px;
  }
}
</style>
