eep_page/src/views/book/courseware/preview/components/select/SelectPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="select-preview" :style="[getAreaStyle(), getComponentStyle()]">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <ul
        class="option-list"
        :style="{ flexDirection: data.property.arrange_type === arrangeTypeList[0].value ? 'row' : 'column' }"
      >
        <li
          v-for="({ content, mark, multilingual, paragraph_list, rich_text_list }, i) in data.option_list"
          :key="mark"
          :style="{ cursor: disabled ? 'not-allowed' : 'pointer', borderColor: data.unified_attrib?.topic_color }"
          :class="['option-item', { active: isAnswer(mark) }, ...computedAnswerClass(mark)]"
          @click="selectAnswer(mark)"
        >
          <span :class="[isSingle ? 'radio' : 'checkbox']">
            <SvgIcon icon-class="check-mark" width="10" height="7" />
          </span>
          <span 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"
          />
          <span
            v-else
            class="content rich-text"
            :style="{ fontSize: type === typeList[0] ? '12pt' : '' }"
            v-html="convertText(sanitizeHTML(content))"
          ></span>
          <div v-if="showLang" class="lang">
            {{ multilingual.find((item) => item.type === getLang())?.translation }}
          </div>
        </li>
      </ul>

      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
    </div>

    <AnswerCorrect
      :answer-correct="data?.answer_correct"
      :visible.sync="visibleAnswerCorrect"
      @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"
        :style="{ flexDirection: data.property.arrange_type === arrangeTypeList[0].value ? 'row' : 'column' }"
      >
        <li
          v-for="({ content, mark, multilingual, paragraph_list, rich_text_list }, i) in data.option_list"
          :key="mark"
          :style="{ cursor: disabled ? 'not-allowed' : 'pointer', borderColor: data.unified_attrib?.topic_color }"
          :class="['option-item', ...computedAnswerClass(mark, 'answer-analysis')]"
          @click="selectAnswer(mark)"
        >
          <span :class="[isSingle ? 'radio' : 'checkbox']">
            <SvgIcon icon-class="check-mark" width="10" height="7" />
          </span>
          <span 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"
          />
          <span
            v-else
            class="content rich-text"
            :style="{ fontSize: type === typeList[0] ? '12pt' : '' }"
            v-html="convertText(sanitizeHTML(content))"
          ></span>
          <div v-if="showLang" class="lang">
            {{ multilingual.find((item) => item.type === getLang())?.translation }}
          </div>
        </li>
      </ul>
    </AnswerAnalysis>
  </div>
</template>

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

import { getSelectData, arrangeTypeList, selectTypeList } from '@/views/book/courseware/data/select';
import { serialNumberTypeList, computeOptionMethods } from '@/views/book/courseware/data/common';

export default {
  name: 'SelectPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getSelectData(),
      arrangeTypeList,
    };
  },
  computed: {
    isSingle() {
      return this.data.property?.select_type === selectTypeList[0].value;
    },
  },
  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.includes(item));
      },
      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);
    },
    /**
     * 判断选项是否被选中
     * @param {string} mark - 选项的标识
     */
    isAnswer(mark) {
      return this.answer.answer_list.includes(mark);
    },
    selectAnswer(mark) {
      if (this.disabled) return;

      const list = this.answer.answer_list || [];
      const isSelected = list.includes(mark);

      if (this.isSingle) {
        this.answer.answer_list = isSelected ? [] : [mark];
        return;
      }

      this.answer.answer_list = isSelected ? list.filter((item) => item !== mark) : list.concat(mark);
    },
    /**
     * 计算选项的类名
     * @param {string} mark - 选项的标识
     * @param {string} type - 计算类名的类型，默认为 'default'，可选值为 'answer-analysis'
     * @returns {Array} - 选项的类名数组
     */
    computedAnswerClass(mark, type = 'default') {
      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
        return [];
      }
      let isHas = this.answer.answer_list.includes(mark); // 用户是否已选中
      let isRight = this.data.answer.answer_list.includes(mark); // 是否是正确答案

      let answerClass = [];
      if (this.isShowRightAnswer && type === 'answer-analysis') {
        answerClass = isRight ? ['answer-right'] : [];
      }

      // 判断是否是正确答案
      if (isHas && this.isJudgingRightWrong && type !== 'answer-analysis') {
        answerClass = isRight ? ['answer-right'] : ['wrong'];
      }
      return answerClass;
    },

    retry() {
      this.answer.answer_list = [];
    },
  },
};
</script>

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

.select-preview {
  @include preview-base;

  .option-list {
    display: flex;
    flex-flow: column wrap;
    gap: 16px;

    .option-item {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      column-gap: 8px;
      align-items: center;
      padding: 12px 24px;
      color: #706f78;
      cursor: pointer;
      background-color: $content-color;
      border: 1px solid $content-color;
      border-radius: 4px;

      .lang {
        // width: 100%;
        padding-left: 52px;
      }

      .radio,
      .checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        margin-right: 8px;
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 2px;

        .svg-icon {
          display: none;
        }
      }

      .radio {
        border-radius: 50%;
      }

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

      .content {
        flex: 1;
      }

      &.active {
        color: #34343a;
        background-color: $main-active-color;

        .checkbox {
          color: #fff;
          background-color: $light-main-color;

          .svg-icon {
            display: block;
          }
        }

        .radio {
          background-color: #fff;
          box-shadow: inset 0 0 0 4px $light-main-color;
        }
      }

      &.answer-right {
        background-color: #e8f7f2;

        &::after {
          font-size: 14px;
          color: $right-color;
          white-space: nowrap;
          content: '正确答案';
        }
      }

      &.wrong {
        margin: 1px 0;
        background-color: $content-color;
        box-shadow: 0 0 0 1px $error-color;

        &::after {
          font-size: 14px;
          color: #a09fa6;
          white-space: nowrap;
          content: '已选';
        }
      }
    }
  }
}
</style>