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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="select-preview">
    <div class="stem">
      <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
        {{ questionNumberEndIsBracket(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 v-if="isEnable(data.property.is_option_subdivision)" class="option-subdivision">
      <ul v-for="(item, i) in data.option_list" :key="item.mark" class="option-subdivision-list">
        <span class="serial-number" :style="{ fontSize: data.property.option_question_number_font_size }">
          {{
            isEnable(isEnableManualModify)
              ? item.custom_number
                ? `${item.custom_number}.`
                : ''
              : computeOptionMethods[data.option_number_show_mode](i)
          }}
        </span>
        <li
          v-for="{ content, mark } in item.data_list"
          :key="mark"
          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
          :class="['option-item', { active: isAnswer(mark, item.mark) }, ...computedAnswerClass(mark, item.mark)]"
          @click="selectAnswer(mark, item.mark)"
        >
          <span v-if="data.property.select_type === selectTypeList[0].value" class="selectionbox"></span>
          <span v-else class="checkbox">
            <SvgIcon icon-class="check-mark" width="10" height="7" />
          </span>
          <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
        </li>
      </ul>
    </div>

    <ul v-else class="option-list">
      <li
        v-for="({ content, mark, custom_number }, i) in data.option_list"
        :key="mark"
        :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
        :class="['option-item', { active: isAnswer(mark) }, ...computedAnswerClass(mark)]"
        @click="selectAnswer(mark)"
      >
        {{ selectTypeList[0].type }}
        <span v-if="data.property.select_type === selectTypeList[0].value" class="selectionbox"></span>
        <span v-else class="checkbox">
          <SvgIcon icon-class="check-mark" width="10" height="7" />
        </span>
        <span class="serial-number" :style="{ fontSize: data.property.option_question_number_font_size }">
          {{
            isEnable(isEnableManualModify)
              ? custom_number
                ? `${custom_number}.`
                : ''
              : computeOptionMethods[data.option_number_show_mode](i)
          }}
        </span>
        <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
      </li>
    </ul>

    <div v-if="isEnable(data.property.is_enable_analysis) && isShowRightAnswer" class="analysis">
      <span class="analysis-title">解析</span>
      <div class="analysis-content" v-html="sanitizeHTML(data.analysis)"></div>
    </div>
  </div>
</template>

<script>
import { computeOptionMethods, isEnable, selectTypeList } from '@/views/exercise_questions/data/common';

import PreviewMixin from './components/PreviewMixin';

export default {
  name: 'SelectPreview',
  mixins: [PreviewMixin],
  props: {
    isEnableManualModify: {
      type: String,
      default: 'false',
    },
  },
  data() {
    return {
      selectTypeList,
      computeOptionMethods,
    };
  },
  computed: {
    isSubdivision() {
      return isEnable(this.data.property.is_option_subdivision);
    },
  },
  methods: {
    /**
     * 判断是否为选中答案
     * @param {string} mark 标记
     * @param {string} parent_mark 父级标记
     */
    isAnswer(mark, parent_mark) {
      if (isEnable(this.data.property.is_option_subdivision)) {
        return this.answer.answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark);
      }
      return this.answer.answer_list.includes(mark);
    },
    /**
     * 选择答案
     * @param {string} mark 标记
     * @param {string} parent_mark 父级标记
     */
    selectAnswer(mark, parent_mark) {
      if (this.disabled) return;
      let answer_list = this.answer.answer_list;
      let index = this.isSubdivision
        ? answer_list.findIndex((item) => item.mark === parent_mark)
        : answer_list.indexOf(mark);
      if (this.data.property.select_type === selectTypeList[0].value) {
        if (this.isSubdivision) {
          if (index === -1) {
            answer_list.push({ mark: parent_mark, value_list: [mark] });
          } else {
            this.$set(this.answer.answer_list[index], 'value_list', [mark]);
          }
        } else {
          this.$set(this.answer, 'answer_list', [mark]);
        }
      }
      if (this.data.property.select_type === selectTypeList[1].value) {
        if (this.isSubdivision) {
          if (index === -1) {
            answer_list.push({ mark: parent_mark, value_list: [mark] });
          } else {
            let mIndex = answer_list[index].value_list.findIndex((item) => item === mark);
            if (mIndex === -1) {
              answer_list[index].value_list.push(mark);
            } else {
              answer_list[index].value_list.splice(mIndex, 1);
            }
          }
          return;
        }
        if (index === -1) {
          answer_list.push(mark);
        } else {
          answer_list.splice(index, 1);
        }
      }
    },
    /**
     * 计算答题对错选项class样式
     * @param {string} mark 选项标识
     * @param {string} parent_mark 选项父级标识
     */
    computedAnswerClass(mark, parent_mark) {
      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
        return [];
      }
      let answer_list = this.answer.answer_list;
      let isHas = this.isSubdivision
        ? answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark)
        : answer_list.includes(mark); // 是否已选中的选项
      let isRight = this.isSubdivision
        ? this.data.answer.answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark)
        : this.data.answer.answer_list.includes(mark); // 是否是正确答案

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

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

.select-preview {
  @include preview;

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

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

      .selectionbox {
        width: 14px;
        min-width: 14px;
        height: 14px;
        min-height: 14px;
        margin-right: 8px;
        border: 2px solid #dcdbdd;
        border-radius: 50%;
      }

      .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;
        }
      }

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

      .content {
        flex: 1;
      }

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

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

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

        .selectionbox {
          border-color: $light-main-color;
          border-width: 4px;
        }

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

          .svg-icon {
            display: block;
          }
        }

        &.right {
          background-color: $content-color;
          border: 1px solid $right-color;

          &::after {
            font-size: 14px;
            color: $right-color;
            content: '已选';
          }
        }

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

          &::after {
            font-size: 14px;
            color: #a09fa6;
            content: '已选';
          }
        }
      }
    }
  }

  .option-subdivision {
    display: flex;
    flex-direction: column;
    row-gap: 24px;

    &-list {
      @extend %option-list;

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

      flex-direction: row;
      column-gap: 24px;
      align-items: center;

      .option-item {
        flex: 1;
      }

      :deep p {
        margin: 0;
      }
    }
  }
}
</style>