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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="choosetone-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">
      <li v-for="(item, i) in data.option_list" :key="i" :class="['option-item']">
        <span>{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
        <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" />
        <div class="option-content">
          <template v-if="data.property.answer_mode === 'select'">
            <span
              v-for="(itemc, indexc) in con_preview[i].item_con"
              :key="indexc"
              :class="['item-con', active_index_str === i + '-' + indexc ? 'active' : '']"
              @click="
                con_preview[i].item_active_index = indexc;
                active_index_str = i + '-' + indexc;
              "
            >
              {{ itemc }}
            </span>
          </template>
          <template v-else>
            <span v-for="(itemc, indexc) in con_preview[i].item_con" :key="indexc" class="items-box">
              <span
                v-for="(itemi, indexi) in itemc"
                :key="indexi"
                :class="['items-con', active_index_str === i + '-' + indexc + '-' + indexi ? 'active' : '']"
                @click="handleSelectItemTone(i, indexc, indexi, con_preview[i].item_con_yuan[indexc][indexi])"
                >{{ itemi }}</span
              >
            </span>
          </template>
        </div>
        <span
          v-for="({ img, value }, j) in toneList"
          :key="j"
          :class="[
            'tone',
            data.property.answer_mode === 'select' &&
            con_preview[i].user_answer[con_preview[i].item_active_index] &&
            con_preview[i].user_answer[con_preview[i].item_active_index].select_tone === value
              ? 'active'
              : data.property.answer_mode === 'label' &&
                  con_preview[i].user_answer[con_preview[i].item_active_index] &&
                  con_preview[i].user_answer[con_preview[i].item_active_index].select_tone === value &&
                  con_preview[i].user_answer[con_preview[i].item_active_index].select_letter === active_letter &&
                  select_item_index === i
                ? 'active'
                : '',
          ]"
          @click="chooseTone(con_preview[i], value, i)"
        >
          <SvgIcon :icon-class="img" />
        </span>
      </li>
    </div>
    <div class="answer-tips-box">
      <img v-if="show_tips" class="answer-tips" src="../../../assets/select-tone-tips.png" />
      <span :class="['tips-btn', show_tips ? 'tips-btn-active' : '']" @click="show_tips = !show_tips">
        <img src="../../../assets/tips-icon.png" />
      </span>
    </div>
  </div>
</template>

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

export default {
  name: 'ChooseTonePreview',
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
      toneList: [
        { value: '1', label: '一声', img: 'first-tone' },
        { value: '2', label: '二声', img: 'second-tone' },
        { value: '3', label: '三声', img: 'third-tone' },
        { value: '4', label: '四声', img: 'fourth-tone' },
        { value: '0', label: '轻声', img: 'neutral-tone' },
      ],
      con_preview: [],
      tone_data: [
        ['ā', 'á', 'ǎ', 'à', 'a'],
        ['ō', 'ó', 'ǒ', 'ò', 'o'],
        ['ē', 'é', 'ě', 'è', 'e'],
        ['ī', 'í', 'ǐ', 'ì', 'i'],
        ['ū', 'ú', 'ǔ', 'ù', 'u'],
        ['ǖ', 'ǘ', 'ǚ', 'ǜ', 'ü'],
        ['Ā', 'Á', 'Â', 'À', 'A'],
        ['Ō', 'Ó', 'Ô', 'Ò', 'O'],
        ['Ē', 'É', 'Ê', 'È', 'E'],
        ['Ī', 'Í', 'Î', 'Ì', 'I'],
        ['Ū', 'Ú', 'Û', 'Ù', 'U'],
      ],
      final_con: '',
      active_index_str: '', // 高亮索引的字符串
      active_letter: '', // 选中字母的值
      active_letter_index: 0, // 选择字母索引
      select_item_index: 0, // 小题索引
      show_tips: false, // 是否显示答题提示
    };
  },
  created() {
    this.handleData();
  },
  methods: {
    chooseTone(item, value, i) {
      if ((!this.active_letter || this.select_item_index !== i) && this.data.property.answer_mode === 'label') return;
      item.user_answer[item.item_active_index].select_tone = value;
      if (this.data.property.answer_mode === 'label') {
        item.user_answer[item.item_active_index].select_letter = this.active_letter;
        this.active_index_str = `${i}-${item.item_active_index}-${this.active_letter_index}`;
        this.handleReplaceTone(this.active_letter + value);
        setTimeout(() => {
          // item.item_con[item.item_active_index][this.active_letter_index] = this.final_con;
          let new_con = item.item_con_yuan[item.item_active_index].split(this.active_letter);
          item.item_con[item.item_active_index] = new_con[0] + this.final_con + new_con[1];
          // this.active_letter = this.final_con;
          this.$forceUpdate();
        }, 100);
      } else {
        this.active_index_str = `${i}-${item.item_active_index}`;
        this.handleReplaceTone(item.item_con_yuan[item.item_active_index] + value);
        setTimeout(() => {
          item.item_con[item.item_active_index] = this.final_con;
          this.$forceUpdate();
        }, 100);
      }
    },
    // 处理数据
    handleData() {
      this.con_preview = [];
      this.data.option_list.forEach((item) => {
        let con_arr = JSON.parse(JSON.stringify(item.content_view));
        let user_answer = [];
        con_arr.forEach(() => {
          user_answer.push({
            select_tone: null,
            select_letter: '',
            select_index: '',
          });
        });
        let obj = {
          item_con: con_arr,
          item_con_yuan: JSON.parse(JSON.stringify(con_arr)),
          mark: item.mark,
          user_answer,
          item_active_index: 0,
          active_letter: '',
        };
        this.con_preview.push(obj);
      });
    },
    handleReplaceTone(e) {
      this.$nextTick(() => {
        let value = e;
        this.resArr = [];
        if (value) {
          let reg = /\s+/g;
          let valueArr = value.split(reg);
          valueArr.forEach((item) => {
            this.handleValue(item);
          });
          let str = '';
          setTimeout(() => {
            this.resArr.forEach((item) => {
              str += ' ';
              item.forEach((sItem) => {
                if (sItem.number && sItem.con) {
                  let number = Number(sItem.number);
                  let con = sItem.con;
                  let word = this.addTone(number, con);
                  str += word;
                } else if (sItem.number) {
                  str += sItem.number;
                } else if (sItem.con) {
                  str += ` ${sItem.con} `;
                }
              });
            });
            this.final_con = str.trim();
          }, 10);
        }
      });
    },
    handleValue(valItem) {
      let reg = /\d/;
      let reg2 = /[A-Za-z]+\d/g;
      let numList = [];
      let valArr = valItem.split('');
      if (reg2.test(valItem)) {
        for (let i = 0; i < valArr.length; i++) {
          let item = valItem[i];
          if (reg.test(item)) {
            let numIndex = numList.length === 0 ? 0 : numList[numList.length - 1].index;
            let con = valItem.substring(numIndex, i);
            con = con.replace(/\d/g, '');
            let obj = {
              index: i,
              number: item,
              con,
              isTran: true,
            };
            numList.push(obj);
          }
        }
      } else {
        numList = [];
      }
      if (numList.length === 0) {
        this.resArr.push([{ con: valItem }]);
      } else {
        this.resArr.push(numList);
      }
    },
    addTone(number, con) {
      let zmList = ['a', 'o', 'e', 'i', 'u', 'v', 'A', 'O', 'E', 'I', 'U'];
      let cons = con;
      if (number) {
        for (let i = 0; i < zmList.length; i++) {
          let zm = zmList[i];
          if (con.indexOf(zm) > -1) {
            let zm2 = this.tone_data[i][number - 1];
            if (con.indexOf('iu') > -1) {
              zm2 = this.tone_data[4][number - 1];
              cons = con.replace('u', zm2);
            } else if (con.indexOf('ui') > -1) {
              zm2 = this.tone_data[3][number - 1];
              cons = con.replace('i', zm2);
            } else if (
              con.indexOf('yv') > -1 ||
              con.indexOf('jv') > -1 ||
              con.indexOf('qv') > -1 ||
              con.indexOf('xv') > -1
            ) {
              zm2 = this.tone_data[4][number - 1];
              cons = con.replace('v', zm2);
            } else {
              cons = con.replace(zm, zm2);
            }

            break;
          }
        }
      }
      return cons;
    },
    handleSelectItemTone(i, indexc, indexi, itemi) {
      this.con_preview[i].item_active_index = indexc;
      this.con_preview[i].user_answer[indexc].select_index = indexi;
      this.active_index_str = `${i}-${indexc}-${indexi}`;
      this.active_letter = itemi;
      this.active_letter_index = indexi;
      this.select_item_index = i;
    },
  },
};
</script>

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

.choosetone-preview {
  @include preview;

  position: relative;
  min-height: 450px;

  .option-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;

    .option-item {
      display: flex;
      column-gap: 16px;
      align-items: center;
      width: 45%;
      margin-right: 5%;

      .option-content {
        padding: 12px 24px;
        color: #706f78;
        background-color: $content-color;
        border-radius: 40px;
      }

      .item-con,
      .items-con {
        font-family: 'League';
        color: #000;
        cursor: pointer;

        &.active {
          color: #2f6fec;
        }
      }

      .items-box {
        margin-right: 3px;
      }

      .tone {
        width: 32px;
        height: 32px;
        padding: 8px;
        font-size: 0;
        color: #9f9f9f;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #2f6fec;
          background: #dfe9fd;
          border-radius: 16px;
        }
      }
    }
  }

  .answer-tips-box {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;

    .answer-tips {
      width: 307px;
      margin-top: 32px;
    }

    .tips-btn {
      width: 34px;
      height: 34px;
      padding: 5px;
      font-size: 0;
      background: #fff5e3;
      border: 1px solid rgba(0, 0, 0, 8%);
      border-radius: 8px;

      &-active {
        background: #e3d5b3;
      }

      img {
        width: 22px;
        height: 22px;
        cursor: pointer;
      }
    }
  }
}
</style>