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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="replace-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>
    <div class="option-list">
      <div v-for="(item, i) in option_list" :key="i" :class="['option-item']">
        <template v-if="item.length > 1">
          <!-- <el-select v-model="answer.answer_list[0].mark_list[i]" placeholder="请选择">
            <el-option v-for="items in item" :key="items.content" :label="items.content" :value="items.content">
            </el-option>
          </el-select> -->
          <span class="select-item select-active">{{ active_content[i] }}</span>
          <ul :ref="'ui' + i" class="replace-ul" @scroll="handleScroll($event, i)">
            <li
              :class="[answer.answer_list[0].select_mark[i] === items.mark ? 'active' : '']"
              v-for="(items, indexs) in item"
              :key="indexs"
              @click="handleClickItem(i, indexs)"
            >
              {{ items.content }}
            </li>
          </ul>
        </template>
        <span v-else class="select-item">{{ item[0].content }}</span>
      </div>
      <SoundRecordPreview :wav-blob.sync="answer.answer_list[0].audio_file_id" />
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import { computeOptionMethods } from '@/views/exercise_questions/data/common';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';

export default {
  name: 'ReplaceAnswerPreview',
  components: {
    SoundRecordPreview,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
      // answer: {
      //   answer_list: [
      //     {
      //       audio_file_id: '',
      //       mark_list: [],
      //     },
      //   ],
      // },
      option_list: [],
      active_content: [],
    };
  },
  created() {
    this.handleData();
  },
  mounted() {},
  methods: {
    // 初始化数据
    handleData() {
      this.option_list = [];
      this.active_content = [];
      this.answer.answer_list = [
        {
          audio_file_id: '',
          mark_list: [],
        },
      ];
      let option_lists = [[], [], [], []];
      this.data.option_list.forEach((item) => {
        item.forEach((items, indexs) => {
          if (items.content) {
            option_lists[indexs].push(items);
          }
        });
      });
      option_lists.forEach((option_item) => {
        if (option_item.length > 0) {
          this.option_list.push(option_item);
          this.answer.answer_list[0].mark_list.push(option_item.length > 1 ? option_item[0].mark : '');
          this.active_content.push(option_item.length > 1 ? option_item[0].content : '');
        }
      });
    },
    // 处理滚动
    handleScroll(event, i) {
      let scrollTop = event.target.scrollTop;
      let scrollIndex = Math.round(scrollTop / 48);
      this.active_content[i] = this.option_list[i][scrollIndex].content;
      this.answer.answer_list[0].mark_list[i] = this.option_list[i][scrollIndex].mark;
      this.$forceUpdate();
    },
    handleClickItem(i, indexs) {
      this.$refs['ui' + i][0].scrollTop = indexs * 48;
      this.active_content[i] = this.option_list[i][indexs].content;
      this.answer.answer_list[0].mark_list[i] = this.option_list[i][indexs].mark;
      this.$forceUpdate();
    },
  },
};
</script>

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

.replace-preview {
  @include preview;

  .option-list {
    display: flex;
    justify-content: center;
    width: max-content;
    margin: 0 auto;
    border-left: 1px solid rgba(0, 0, 0, 8%);

    .option-item {
      position: relative;
      display: flex;
      align-items: center;
      height: 356px;
      border-right: 1px solid rgba(0, 0, 0, 8%);
    }

    .select-item {
      padding: 6px 8px;
      font-size: 20px;
      line-height: 28px;
      color: #1d2129;
      background-color: rgba(239, 239, 239, 100%);
    }

    .select-active {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 1;
      display: block;
      width: 100%;
      height: 40px;
      margin-top: -20px;
      color: rgba(29, 33, 41, 100%);
      background-color: rgba(239, 239, 239, 100%);
    }

    ul {
      height: 356px;
      padding: 158px 0 150px;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        padding: 6px 8px;
        margin-bottom: 8px;
        font-size: 20px;
        line-height: 28px;
        color: rgba(29, 33, 41, 100%);
        opacity: 0.4;
      }
    }
  }

  .sound-record-wrapper {
    margin-left: 80px;
  }
}
</style>