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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="judge-preview">
    <div class="stem">
      <span class="question-number">{{ data.property.question_number }}.</span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <AudioPlay
      v-if="isEnable(data.property.is_enable_listening) && data.file_id_list.length > 0"
      :file-id="data.file_id_list[0]"
    />

    <ul class="option-list">
      <li
        v-for="({ content, mark }, i) in data.option_list"
        :key="mark"
        :class="['option-item', { active: isAnswer(mark) }]"
      >
        <div :class="['option-content', computedIsJudgeRight(mark)]">
          <span class="serial-number">{{ computedQuestionNumber(i, data.option_number_show_mode) }}</span>
          <div v-html="sanitizeHTML(content)"></div>
        </div>
        <div class="option-type">
          <div
            v-for="option_type in data.property.option_type_list"
            :key="option_type"
            :style="{ cursor: isJudgingRightWrong || isShowRightAnswer ? 'not-allowed' : 'pointer' }"
            :class="[
              'option-type-item',
              {
                active: isAnswer(mark, option_type),
              },
              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="20" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { option_type_list } from '@/views/exercise_questions/data/judge';
import { computedQuestionNumber } from '@/views/exercise_questions/data/common';

import PreviewMixin from './components/PreviewMixin';

export default {
  name: 'JudgePreview',
  mixins: [PreviewMixin],
  data() {
    return {
      computedQuestionNumber,
      option_type_list,
    };
  },
  methods: {
    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.isJudgingRightWrong || this.isShowRightAnswer) 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;
      }
    },

    /**
     * 计算是否显示正确答案的样式
     * @param {string} mark 选项标识
     * @param {string} option_type 选项类型
     */
    computedIsShowRightAnswer(mark, option_type) {
      if (!this.isShowRightAnswer) return '';
      let selectOption = this.answer.answer_list.find((item) => item.mark === mark); // 查找是否已选中的选项
      if (!selectOption) return '';
      return this.data.answer.answer_list.find((item) => item.mark === mark).option_type === option_type &&
        !(selectOption.option_type === option_type)
        ? 'answer-right'
        : '';
    },
    /**
     * 计算判断题题干的样式
     * @param {string} mark 选项标识
     */
    computedIsJudgeRight(mark) {
      if (!this.isJudgingRightWrong) return '';
      let selectOption = this.answer.answer_list.find((item) => item.mark === mark); // 查找是否已选中的选项
      if (!selectOption) return 'wrong';
      return this.data.answer.answer_list.find((item) => item.mark === mark).option_type === selectOption.option_type
        ? 'right'
        : 'wrong';
    },
  },
};
</script>

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

.judge-preview {
  @include preview;

  .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: 24px;
        align-items: center;
        padding: 12px 24px;
        background-color: $content-color;
        border-radius: 40px;

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

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

        .serial-number {
          color: #000;
        }
      }

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

        &-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 48px;
          height: 48px;
          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>