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 rich-text"
      v-html="sanitizeHTML(data.description)"
    ></div>

    <div class="container">
      <div class="articel rich-text" v-html="sanitizeHTML(data.article)"></div>
      <div class="question-list">
        <template v-if="isAnswer">
          <component
            :is="previewComponents[item.type]"
            v-for="(item, i) in question_list"
            :key="i"
            ref="preview"
            class="preview"
            :data="item"
            @change="changeAnswer(i, item.type, $event)"
          />
        </template>
        <template v-else>
          <component
            :is="previewComponents[item.type]"
            v-for="(item, i) in childPreviewData"
            :key="i"
            class="preview"
            :data="item"
            @change="changeAnswer(i, item.type, $event)"
          />
        </template>
      </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';

import { GetQuestionInfo } from '@/api/exercise';

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,
      },
      question_list: [],
    };
  },
  computed: {
    // 是否答题
    isAnswer() {
      return this.childPreviewData.length === 0 && this.childPreviewData.length !== this.data.question_list;
    },
  },
  watch: {
    isAnswer: {
      handler(val) {
        if (val) {
          const promises = this.data.question_list.map(({ id }) => {
            return GetQuestionInfo({ question_id: id });
          });
          Promise.all(promises).then((res) => {
            this.question_list = res.map(({ question }) => {
              let content = JSON.parse(question.content);
              if (!question.content) return { answer_list: [] };
              content.id = question.id;
              return content;
            });
          });
        }
      },
      immediate: true,
    },
  },
  created() {
    this.$set(
      this.answer,
      'question_list',
      this.data.question_list.map((item) => {
        return { id: item.id, type: item.type, answer_list: [] };
      }),
    );
  },
  methods: {
    /**
     * 改变答案
     * @param {number} i 序号
     * @param {string} type 类型
     * @param {object} param2
     * @param {array} param2.answer_list 答案列表
     */
    changeAnswer(i, type, { answer_list }) {
      if (this.disabled) return;
      this.answer.question_list[i].answer_list = answer_list;
      this.answer.question_list[i].type = type;
    },
    /**
     * 显示答案
     * @param {boolean} isJudgingRightWrong 是否判断对错
     * @param {boolean} isShowRightAnswer 是否显示正确答案
     * @param {Object} userAnswer 用户答案
     * @param {boolean} disabled 是否禁用
     */
    showAnswer(isJudgingRightWrong, isShowRightAnswer, userAnswer, disabled) {
      this.isJudgingRightWrong = isJudgingRightWrong;
      this.isShowRightAnswer = isShowRightAnswer;
      if (userAnswer) this.answer = userAnswer;
      if (this.question_list.length === this.answer.question_list.length) {
        return this.fillAnswer(isJudgingRightWrong, isShowRightAnswer, disabled);
      }
      this.$watch('question_list', (val) => {
        if (val.length !== this.answer.question_list.length) return;
        this.fillAnswer(isJudgingRightWrong, isShowRightAnswer, disabled);
      });
    },
    /**
     * 填充答案
     * @param {boolean} isJudgingRightWrong 是否判断对错
     * @param {boolean} isShowRightAnswer 是否显示正确答案
     * @param {boolean} disabled 是否禁用
     */
    fillAnswer(isJudgingRightWrong, isShowRightAnswer, disabled) {
      this.answer.question_list.forEach(({ id, answer_list }) => {
        const index = this.question_list.findIndex((item) => item.id === id);
        if (index !== -1) {
          this.$refs.preview[index].showAnswer(isJudgingRightWrong, isShowRightAnswer, { answer_list }, disabled);
        }
      });
    },
  },
};
</script>

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

.read-preview {
  @include preview;

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

    .articel {
      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>