EEP_BookPreview/src/views/book/courseware/preview/components/judge/JudgePreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="judge-preview" :style="[getAreaStyle(), getComponentStyle()]">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
    <div class="main">
      <ul class="option-list">
        <li
          v-for="({ content, mark, paragraph_list, rich_text_list }, i) in data.option_list"
          :key="mark"
          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
          :class="['option-item', { active: isAnswer(mark) }]"
        >
          <div
            :style="{ borderColor: data.unified_attrib?.topic_color }"
            :class="['option-content', computedIsJudgeRight(mark)]"
          >
            <span
              v-if="!('enable_serial' in data.property) || isEnable(data.property.enable_serial)"
              class="serial-number"
            >
              {{ computedOptionNumber(i) }}.
            </span>
            <PinyinText
              v-if="isEnable(data.property.view_pinyin)"
              class="content"
              :paragraph-list="paragraph_list"
              :rich-text-list="rich_text_list"
              :pinyin-position="data.property.pinyin_position"
              :is-preview="true"
            />
            <div
              v-else
              class="rich-text"
              :style="{ fontSize: type === typeList[0] ? '12pt' : '' }"
              v-html="convertText(sanitizeHTML(content))"
            ></div>
          </div>
          <div class="option-type">
            <div
              v-for="option_type in incertitudeList"
              :key="option_type"
              :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
              :class="[
                'option-type-item',
                {
                  active: isAnswer(mark, option_type),
                },
              ]"
              @click="selectAnswer(mark, option_type)"
            >
              <SvgIcon
                v-if="option_type === option_type_list[0].value"
                icon-class="check-mark"
                width="17"
                height="12"
              />
              <SvgIcon v-if="option_type === option_type_list[1].value" icon-class="cross" size="12" />
              <SvgIcon v-if="option_type === option_type_list[2].value" icon-class="circle" size="16" />
            </div>
          </div>
        </li>
      </ul>
      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @judgeCorrect="judgeCorrect" @retry="retry" />
    </div>

    <AnswerCorrect
      :answer-correct="data?.answer_correct"
      :visible.sync="visibleAnswerCorrect"
      :is-check-correct="isCheckCorrect"
      @closeAnswerCorrect="closeAnswerCorrect"
    />
    <AnswerAnalysis
      :visible.sync="visibleAnswerAnalysis"
      :answer-list="data.answer_list"
      :analysis-list="data.analysis_list"
      @closeAnswerAnalysis="closeAnswerAnalysis"
    >
      <ul slot="right-answer" class="option-list">
        <li
          v-for="({ content, mark, paragraph_list, rich_text_list }, i) in data.option_list"
          :key="mark"
          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
          :class="['option-item', { active: isAnswer(mark) }]"
        >
          <div
            :style="{ borderColor: data.unified_attrib?.topic_color }"
            :class="['option-content', computedIsJudgeRight(mark)]"
          >
            <span
              v-if="!('enable_serial' in data.property) || isEnable(data.property.enable_serial)"
              class="serial-number"
            >
              {{ computedOptionNumber(i) }}.
            </span>
            <PinyinText
              v-if="isEnable(data.property.view_pinyin)"
              class="content"
              :paragraph-list="paragraph_list"
              :rich-text-list="rich_text_list"
              :pinyin-position="data.property.pinyin_position"
              :is-preview="true"
            />
            <div
              v-else
              class="rich-text"
              :style="{ fontSize: type === typeList[0] ? '12pt' : '' }"
              v-html="convertText(sanitizeHTML(content))"
            ></div>
          </div>
          <div class="option-type">
            <div
              v-for="option_type in incertitudeList"
              :key="option_type"
              :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
              :class="['option-type-item', computedIsShowRightAnswer(mark, option_type)]"
              @click="selectAnswer(mark, option_type)"
            >
              <SvgIcon
                v-if="option_type === option_type_list[0].value"
                icon-class="check-mark"
                width="17"
                height="12"
              />
              <SvgIcon v-if="option_type === option_type_list[1].value" icon-class="cross" size="12" />
              <SvgIcon v-if="option_type === option_type_list[2].value" icon-class="circle" size="16" />
            </div>
          </div>
        </li>
      </ul>
    </AnswerAnalysis>
  </div>
</template>

<script>
import PreviewMixin from '../common/PreviewMixin';

import { getJudgeData, option_type_list, isEnable } from '@/views/book/courseware/data/judge';
import { serialNumberTypeList, computeOptionMethods } from '@/views/book/courseware/data/common';

export default {
  name: 'JudgePreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getJudgeData(),
      option_type_list,
      isEnable,
    };
  },
  computed: {
    incertitudeList() {
      let _option_type_list = this.data.property.option_type_list;
      if (isEnable(this.data.property.is_view_incertitude)) {
        return _option_type_list;
      }
      // 返回不包含第三个元素的新数组
      return [..._option_type_list.slice(0, 2), ..._option_type_list.slice(3)];
    },
  },
  watch: {
    'answer.answer_list': {
      handler(val) {
        if (val.length === 0) {
          this.answer.is_right = false;
          return;
        }
        if (val.length !== this.data.answer.answer_list.length) {
          this.answer.is_right = false;
          return;
        }
        this.answer.is_right = val.every((item) =>
          this.data.answer.answer_list.some(
            (answerItem) => answerItem.mark === item.mark && answerItem.option_type === item.option_type,
          ),
        );
      },
      deep: true,
    },
  },
  methods: {
    computedOptionNumber(number) {
      let type = serialNumberTypeList.find((item) => item.value === this.data.property.option_serial_type)?.value;
      if (!type) return number + 1;
      return computeOptionMethods[type](number);
    },

    isAnswer(mark, option_type) {
      return this.answer.answer_list.some((li) => li.mark === mark && li.option_type === option_type);
    },

    // 选择答案
    selectAnswer(mark, option_type) {
      if (this.disabled) return;
      const index = this.answer.answer_list.findIndex((li) => li.mark === mark);
      if (index === -1) {
        this.answer.answer_list.push({ mark, option_type });
      } else {
        this.answer.answer_list[index].option_type = option_type;
      }
    },
    // 计算判断题小题题目样式
    computedIsJudgeRight(mark) {
      if (!this.isJudgingRightWrong) return '';
      let selectOption = this.answer.answer_list.find((item) => item.mark === mark); // 查找是否已选中的选项
      if (!selectOption) return '';
      // 正确选项的类型
      const correctOption = this.data.answer.answer_list.find((item) => item.mark === mark)?.option_type;
      if (!correctOption) return '';
      return correctOption === selectOption.option_type ? 'right' : 'wrong';
    },
    // 计算是否显示正确答案的样式
    computedIsShowRightAnswer(mark, option_type) {
      if (!this.isShowRightAnswer) return '';
      // 是否是正确的选项类型
      let isCorrectType = this.data.answer.answer_list.find((item) => item.mark === mark)?.option_type === option_type;
      return isCorrectType ? 'answer-right' : '';
    },
    retry() {
      this.isJudgingRightWrong = false;
      this.isShowRightAnswer = false;
      this.answer.answer_list = [];
    },

    /**
     * 获取无文本内容的数据结构，用于保存为个人模板时的样式模板
     */
    getNoTextContentData() {
      let noTextContentData = JSON.parse(JSON.stringify(this.data));
      const resetFieldMap = {
        analysis_list: [],
        answer_list: [],
      };

      Object.assign(noTextContentData, resetFieldMap);

      noTextContentData.option_list.forEach((item) => {
        item.content = '';
        item.paragraph_list = [];
        item.paragraph_list_parameter = {
          text: '',
          pinyin_proofread_word_list: [],
        };
      });

      if (noTextContentData.answer) {
        noTextContentData.answer.answer_list = [];
        noTextContentData.answer.reference_answer = '';
      }

      return noTextContentData;
    },
  },
};
</script>

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

.judge-preview {
  @include preview-base;

  .option-list {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .option-item {
      display: flex;
      column-gap: 16px;

      .option-content {
        display: flex;
        flex: 1;
        column-gap: 8px;
        align-items: center;
        padding: 12px 24px;
        background-color: $content-color;
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;

        &.right {
          background-color: $right-bc-color;
        }

        &.wrong {
          box-shadow: 0 0 0 1px $error-color;
        }

        .serial-number {
          font-size: 16pt;
          color: #000;
        }
      }

      .option-type {
        display: flex;
        column-gap: 8px;
        align-items: center;

        &-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          color: #000;
          cursor: pointer;
          background-color: $content-color;
          border-radius: 50%;

          &.active {
            color: #fff;
            background-color: $light-main-color;
          }

          &.answer-right {
            color: $right-color;
            border: 1px solid $right-color;
          }
        }
      }
    }
  }
}
</style>