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">{{ 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="i" class="option-subdivision-list">
        <span class="serial-number">{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
        <li
          v-for="{ content, mark } in item"
          :key="mark"
          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
          :class="['option-item', { active: isAnswer(mark, i) }, ...computedAnswerClass(mark, i)]"
          @click="selectAnswer(mark, i)"
        >
          <span class="selectionbox"></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 }, i) in data.option_list"
        :key="mark"
        :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
        :class="['option-item', { active: isAnswer(mark) }, ...computedAnswerClass(mark)]"
        @click="selectAnswer(mark)"
      >
        <span class="selectionbox"></span>
        <span class="serial-number">{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
        <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
      </li>
    </ul>
  </div>
</template>

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

import PreviewMixin from './components/PreviewMixin';

export default {
  name: 'SelectPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
    };
  },
  computed: {
    isSubdivision() {
      return isEnable(this.data.property.is_option_subdivision);
    },
  },
  created() {
    if (isEnable(this.data.property.is_option_subdivision)) {
      this.answer.answer_list = this.data.option_list.map(() => []);
    }
  },
  methods: {
    isAnswer(mark, i) {
      if (isEnable(this.data.property.is_option_subdivision)) {
        return this.answer.answer_list?.[i]?.includes(mark);
      }
      return this.answer.answer_list.includes(mark);
    },
    selectAnswer(mark, i) {
      if (this.disabled) return;
      let answer_list = this.isSubdivision ? this.answer.answer_list[i] : this.answer.answer_list;
      let index = answer_list.indexOf(mark);
      if (this.data.property.select_type === selectTypeList[0].value) {
        if (this.isSubdivision) {
          this.$set(this.answer.answer_list, i, [mark]);
        } else {
          this.$set(this.answer, 'answer_list', [mark]);
        }
      }
      if (this.data.property.select_type === selectTypeList[1].value) {
        if (index === -1) {
          answer_list.push(mark);
        } else {
          answer_list.splice(index, 1);
        }
      }
    },
    computedAnswerClass(mark, i) {
      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
        return [];
      }
      let isHas = this.isSubdivision
        ? this.answer.answer_list[i].includes(mark)
        : this.answer.answer_list.includes(mark); // 是否已选中的选项
      if (!isHas && this.isShowRightAnswer) {
        let isRight = this.isSubdivision
          ? this.data.answer.answer_list[i].includes(mark)
          : this.data.answer.answer_list.includes(mark); // 是否是正确答案
        return isRight ? ['answer-right'] : [];
      }
      // 判断是否是正确答案
      if (this.isJudgingRightWrong) {
        let isRight = this.isSubdivision
          ? this.data.answer.answer_list[i].includes(mark)
          : this.data.answer.answer_list.includes(mark); // 是否是正确答案
        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%;
      }

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

        &.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>