GCLS_Page_Exercise/src/views/exercise_questions/preview/ReadPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="read-preview">
    <div class="stem">
      <span class="question-number">{{ data.property.question_number }}.</span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>

    <div class="container">
      <div class="articel" v-html="sanitizeHTML(data.article)"></div>
      <div class="question-list">
        <component
          :is="previewComponents[item.type]"
          v-for="(item, i) in childPreviewData"
          :key="i"
          class="preview"
          :data="item"
          @change="changeAnswer(i, item.type, $event)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import SelectPreview from '@/views/exercise_questions/preview/SelectPreview.vue';
import JudgePreview from '@/views/exercise_questions/preview/JudgePreview.vue';
import MatchingPreview from '@/views/exercise_questions/preview/MatchingPreview.vue';
import FillPreview from '../preview/FillPreview.vue';
import ShortAnswerPreview from './ShortAnswerPreview.vue';

export default {
  name: 'ReadPreview',
  mixins: [PreviewMixin],
  props: {
    childPreviewData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      previewComponents: {
        select: SelectPreview,
        judge: JudgePreview,
        matching: MatchingPreview,
        fill: FillPreview,
        short_answer: ShortAnswerPreview,
      },
    };
  },
  created() {
    this.$set(
      this.answer,
      'question_list',
      this.data.question_list.map((item) => {
        return { id: item.id, type: item.type, answer_list: [] };
      }),
    );
  },
  methods: {
    changeAnswer(i, type, { answer_list }) {
      this.data.question_list[i].answer_list = answer_list;
      this.data.question_list[i].type = type;
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.read-preview {
  @include preview;

  .container {
    display: flex;
    column-gap: 24px;

    .articel {
      max-width: 488px;
      padding: 24px 40px;
      color: #2f3742;
      background-color: $content-color;
      border-radius: 16px;
    }

    .question-list {
      display: flex;
      flex: 1;
      flex-direction: column;
      row-gap: 24px;

      .preview {
        min-height: 0;
        padding: 0;
        margin: 0;
      }
    }
  }
}
</style>