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">{{ data.description }}</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) }, ...computedAnswerClass(mark)]"
        @click="selectAnswer(mark)"
      >
        <span class="selectionbox"></span>
        <span>{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
        <span class="content" v-html="sanitizeHTML(content)"></span>
      </li>
    </ul>
  </div>
</template>

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

import PreviewMixin from './components/PreviewMixin';

export default {
  name: 'SelectPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
    };
  },
  methods: {
    isAnswer(mark) {
      return this.answer.answer_list.includes(mark);
    },
    selectAnswer(mark) {
      const index = this.answer.answer_list.indexOf(mark);
      if (this.data.property.select_type === selectTypeList[0].value) {
        this.answer.answer_list = [mark];
      }
      if (this.data.property.select_type === selectTypeList[1].value) {
        if (index === -1) {
          this.answer.answer_list.push(mark);
        } else {
          this.answer.answer_list.splice(index, 1);
        }
      }
    },
    computedAnswerClass(mark) {
      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
        return [];
      }
      let isHas = this.answer.answer_list.includes(mark);
      if (!isHas) {
        return [];
      }
      let isRight = this.data.answer.answer_list.includes(mark) && this.isJudgingRightWrong;
      return isRight ? ['right'] : ['wrong'];
    },
  },
};
</script>

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

.select-preview {
  @include preview;

  .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;
        height: 14px;
        margin-right: 8px;
        border: 2px solid #dcdbdd;
        border-radius: 50%;
      }

      .content {
        flex: 1;
      }

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

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

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

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

        &.wrong {
          background-color: $content-color;
          border: 1px solid #f2555a;

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