eep_page/src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="pinyin-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <div
        class="content-box"
        :class="[data.property.arrange_type === 'horizontal' ? 'content-box-flex' : 'content-box-vertical']"
      >
        <div class="first-con">
          <AudioPlay
            v-if="data.audio_file_id && data.property.audio_position === 'front'"
            :file-id="data.audio_file_id"
          />
          <div
            class="option-content"
            :class="[isJudgingRightWrong ? (con_preview[0].all_right ? 'all-right' : 'has-error') : '']"
          >
            <span v-if="data.content_hz" class="items-hz">{{ data.content_hz }}</span>
            <!-- 拼音输入 -->
            <template v-if="data.property.fun_type === 'input'">
              <span
                v-for="(itemc, indexc) in con_preview"
                :key="indexc"
                :class="[
                  'item-con',
                  isJudgingRightWrong && itemc.type === 'input' && item.answer && item.con !== item.answer
                    ? 'error'
                    : '',
                ]"
              >
                <el-input
                  v-if="itemc.type === 'input'"
                  v-model="itemc.con"
                  :disabled="disabled"
                  :style="[{ width: Math.max(20, itemc.con.length * 10) + 'px' }]"
                  class="item-input"
                  @blur="onInputChange(itemc)"
                />
                <span v-else>{{ itemc.con }}</span>
              </span>
            </template>
            <template v-else-if="data.property.answer_mode === 'select'">
              <template v-if="data.property.fun_type === 'show'">
                <span v-for="(itemc, indexc) in data.matically_pinyin_str[data.mark]" :key="indexc" class="items-box">
                  <span v-for="(itemi, indexi) in itemc" :key="indexi" :class="['items-con']">{{ itemi }}</span>
                </span>
              </template>
              <template v-else>
                <span
                  v-for="(itemc, indexc) in con_preview[0].item_con"
                  :key="indexc"
                  :class="[
                    'item-con',
                    active_index_str === 0 + '-' + indexc ? 'active' : '',
                    isJudgingRightWrong && !con_preview[0].user_answer[indexc].is_right ? 'error' : '',
                    data.property.fun_type === 'show' ? 'item-con-in' : '',
                  ]"
                  @click="
                    if (data.property.fun_type === 'show') return;
                    con_preview[0].item_active_index = indexc;
                    active_index_str = 0 + '-' + indexc;
                  "
                >
                  {{ itemc }}
                </span>
              </template>
            </template>
            <template v-else>
              <span v-for="(itemc, indexc) in con_preview[0].item_con" :key="indexc" class="items-box">
                <span
                  v-for="(itemi, indexi) in itemc"
                  :key="indexi"
                  :class="[
                    'items-con',
                    active_index_str === 0 + '-' + indexc + '-' + indexi ? 'active' : '',
                    isJudgingRightWrong &&
                    !con_preview[0].user_answer[indexc].is_right &&
                    con_preview[0].user_answer[indexc].select_index_submit === indexi
                      ? 'error'
                      : '',
                    isJudgingRightWrong &&
                    !con_preview[0].user_answer[indexc].is_right &&
                    con_preview[0].user_answer[indexc].right_index === indexi
                      ? 'right'
                      : '',
                  ]"
                  @click="handleSelectItemTone(0, indexc, indexi, con_preview[0].item_con_yuan[indexc][indexi])"
                  >{{ itemi }}</span
                >
              </span>
            </template>
          </div>
          <AudioPlay
            v-if="data.audio_file_id && data.property.audio_position === 'back'"
            :file-id="data.audio_file_id"
          />
        </div>
        <div v-if="data.property.fun_type === 'mark'" class="tone-box">
          <span
            v-for="({ img, value }, j) in toneList"
            :key="j"
            :class="[
              'tone',
              data.property.answer_mode === 'select' &&
              con_preview[0].user_answer[con_preview[0].item_active_index] &&
              con_preview[0].user_answer[con_preview[0].item_active_index].select_tone === value
                ? 'active'
                : data.property.answer_mode === 'label' &&
                    con_preview[0].user_answer[con_preview[0].item_active_index] &&
                    con_preview[0].user_answer[con_preview[0].item_active_index].select_tone === value &&
                    con_preview[0].user_answer[con_preview[0].item_active_index].select_letter === active_letter &&
                    select_item_index === 0
                  ? 'active'
                  : '',
              (isJudgingRightWrong &&
                con_preview[0].user_answer[con_preview[0].item_active_index].right_answer === value &&
                con_preview[0].user_answer[con_preview[0].item_active_index].select_index_submit !==
                  con_preview[0].user_answer[con_preview[0].item_active_index].right_answer &&
                data.property.answer_mode === 'select') ||
              (isJudgingRightWrong &&
                data.property.answer_mode === 'label' &&
                con_preview[0].user_answer[con_preview[0].item_active_index].right_answer === value &&
                con_preview[0].user_answer[con_preview[0].item_active_index].right_index ===
                  con_preview[0].user_answer[con_preview[0].item_active_index].select_index &&
                select_item_index === 0)
                ? 'right'
                : '',
            ]"
            @click="chooseTone(con_preview[0], value)"
          >
            <SvgIcon :icon-class="img" />
          </span>
        </div>
        <template v-else-if="data.property.fun_type !== 'mark' && isEnable(data.property.is_enable_voice_answer)">
          <SoundRecord
            ref="record"
            type="normal"
            class="record-box"
            :answer-record-list="data.record_list"
            :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
            @handleWav="handleWav"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getPinyinBaseData, arrangeTypeList, audioPositionList } from '@/views/book/courseware/data/pinyinBase';

import PreviewMixin from '../common/PreviewMixin';
import AudioPlay from '../character_base/components/AudioPlay.vue';
import SoundRecord from '../../common/SoundRecord.vue';
import { addTone, handleToneValue } from '@/utils/common';

export default {
  name: 'PinyinBasePreview',
  components: {
    AudioPlay,
    SoundRecord,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getPinyinBaseData(),
      arrangeTypeList,
      audioPositionList,
      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'],
        ['n', 'ń', 'ň', 'ǹ', 'n'],
        ['m̄', 'ḿ', 'm', 'm̀', 'n'],
      ],
      final_con: '',
      active_index_str: '', // 高亮索引的字符串
      active_letter: '', // 选中字母的值
      active_letter_index: 0, // 选择字母索引
      select_item_index: 0, // 小题索引
    };
  },
  watch: {
    data: {
      handler(val) {
        // if (!val || this.data.type !== 'choose_tone') return;
        this.handleData();
      },
      deep: true,
      immediate: true,
    },
    isJudgingRightWrong: {
      handler(val) {
        if (!val) return;
        this.judgeRight();
      },
      immediate: true,
    },
    'data.record_list'(val) {
      this.data.record_list = val;
    },
  },
  created() {
    // console.log(this.data);
  },
  methods: {
    chooseTone(item, value) {
      if (this.disabled) return;
      if (!this.active_letter && this.data.property.answer_mode === 'label') return;
      if (
        item.user_answer[item.item_active_index].select_tone &&
        item.user_answer[item.item_active_index].select_tone === value &&
        this.data.property.answer_mode === 'label' &&
        item.user_answer[item.item_active_index].select_letter === this.active_letter
      ) {
        item.user_answer[item.item_active_index].select_tone = '';
        this.handleReplaceTone(this.active_letter + 0);
        setTimeout(() => {
          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.$forceUpdate();
          this.answer.answer_list[0].value[item.item_active_index] = new_con[0] + this.active_letter + new_con[1];
        }, 100);
      } else if (
        item.user_answer[item.item_active_index].select_tone &&
        item.user_answer[item.item_active_index].select_tone === value &&
        this.data.property.answer_mode === 'select'
      ) {
        item.user_answer[item.item_active_index].select_tone = '';
        this.handleReplaceTone(item.item_con_yuan[item.item_active_index] + 0);
        setTimeout(() => {
          item.item_con[item.item_active_index] = this.final_con;
          this.$forceUpdate();
        }, 100);
        this.answer.answer_list[0].value[item.item_active_index] = '';
      } else {
        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 = `${0}-${item.item_active_index}-${this.active_letter_index}`;
          this.handleReplaceTone(this.active_letter + value);
          setTimeout(() => {
            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.$forceUpdate();
            this.answer.answer_list[0].value[item.item_active_index] =
              new_con[0] + this.active_letter + value + new_con[1];
          }, 100);
        } else {
          this.active_index_str = `${0}-${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);
          this.answer.answer_list[0].value[item.item_active_index] = value;
        }
      }
    },
    // 处理数据
    handleData() {
      this.con_preview = [];
      this.show_preview = false;
      if (!this.isJudgingRightWrong) {
        this.answer.answer_list = [];
      }
      if (this.data.property.fun_type === 'input') {
        let arr = this.data.content.split(/_{3,}/g);
        let inputIndex = 0;
        arr.forEach((item, index) => {
          let obj = {
            con: item,
            type: 'text',
          };

          this.con_preview.push(obj);
          if (index !== arr.length - 1) {
            let objs = {
              con: '',
              type: 'input',
              inputIndex,
              answer: this.data.answer.answer_list[inputIndex] ? this.data.answer.answer_list[inputIndex].con : '',
            };
            this.con_preview.push(JSON.parse(JSON.stringify(objs)));
            inputIndex++;
          }
        });
      } else {
        // this.data.option_list.forEach((item) => {
        let con_arr = JSON.parse(JSON.stringify(this.data.content_view));
        let user_answer = [];
        let user_submit = []; // 用户提交答案
        con_arr.forEach((items) => {
          user_answer.push({
            select_tone: null,
            select_letter: '',
            select_index: '',
          });
          user_submit.push(this.data.property.answer_mode === 'label' ? items : '');
        });
        let obj = {
          item_con: con_arr,
          item_con_yuan: JSON.parse(JSON.stringify(con_arr)),
          mark: this.data.mark,
          user_answer,
          item_active_index: 0,
          active_letter: '',
        };
        if (!this.isJudgingRightWrong) {
          let obj = {
            mark: this.data.mark,
            value: user_submit,
          };
          this.answer.answer_list.push(obj);
        }
        this.con_preview.push(obj);
        // });
      }
      this.show_preview = true;
    },
    handleReplaceTone(e, arr, index, resArr) {
      this.$nextTick(() => {
        let value = e;
        this.resArr = [];
        if (value) {
          let reg = /\s+/g;
          let valueArr = value.split(reg);
          valueArr.forEach((item) => {
            this.handleValue(item, resArr);
          });
          let str = '';
          setTimeout(() => {
            if (resArr) {
              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} `;
                  }
                });
              });
              if (this.data.property.answer_mode === 'label') {
                let number_index = e.search(/0|1|2|3|4/) + 1;
                arr[index] = str.trim() + (number_index === 0 ? '' : e.substring(number_index));
              } else {
                arr[index] = str.trim();
              }
            } else {
              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, resArr) {
      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 (resArr) {
        if (numList.length === 0) {
          resArr.push([{ con: valItem }]);
        } else {
          resArr.push(numList);
        }
      } else 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', 'n', 'm'];
      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) {
      if (this.data.property.fun_type === 'show') {
        return;
      }
      this.con_preview[0].item_active_index = indexc;
      this.con_preview[0].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;
    },
    // 判断对错
    judgeRight() {
      this.con_preview = [];
      this.show_preview = false;
      // this.data.option_list.forEach((item, index) => {
      let con_arr = JSON.parse(JSON.stringify(this.data.content_view));
      let user_answer = [];
      let user_select = [];
      let user_res_arr = [];

      let answer_list_item = this.answer.answer_list.filter((items) => this.data.mark === items.mark);
      con_arr.forEach((items, indexs) => {
        user_answer.push({
          select_tone: answer_list_item[0].value[indexs],
          select_letter: '',
          select_index: '',
          is_right: answer_list_item[0].value[indexs] === this.data.answer.answer_list[0].value[indexs],
          right_answer: this.data.answer.answer_list[0].value[indexs],
        });
        user_res_arr.push([]);
        user_select.push('');
        if (this.data.property.answer_mode === 'label') {
          this.handleReplaceTone(answer_list_item[0].value[indexs], user_select, indexs, user_res_arr[indexs]);
          if (
            answer_list_item[0].value[indexs].match(/\d+/g) &&
            answer_list_item[0].value[indexs].match(/\d+/g).length > 0
          ) {
            user_answer[indexs].select_tone = answer_list_item[0].value[indexs].match(/\d+/g)[0];
            let letter_number = answer_list_item[0].value[indexs].match(/\d+/g)[0];
            let letter_index = answer_list_item[0].value[indexs].indexOf(letter_number) - 1;
            user_answer[indexs].select_letter = answer_list_item[0].value[indexs].substring(
              letter_index,
              letter_index + 1,
            );
            user_answer[indexs].select_index_submit = letter_index;
          } else {
            user_select[indexs] = items;
          }
          user_answer[indexs].right_answer = this.data.answer.answer_list[0].value[indexs].match(/0|1|2|3|4/)
            ? this.data.answer.answer_list[index].value[indexs].match(/0|1|2|3|4/)[0]
            : '';
          user_answer[indexs].right_index = this.data.answer.answer_list[0].value[indexs].search(/0|1|2|3|4/) - 1;
        } else {
          this.handleReplaceTone(items + answer_list_item[0].value[indexs], user_select, indexs, user_res_arr[indexs]);
        }
      });
      let obj = {
        item_con: user_select,
        item_con_yuan: JSON.parse(JSON.stringify(con_arr)),
        mark: this.data.mark,
        user_answer,
        item_active_index: 0,
        active_letter: '',
        user_res_arr,
        all_right: JSON.stringify(answer_list_item[0].value) === JSON.stringify(this.data.answer.answer_list[0].value),
      };
      this.con_preview.push(obj);
      // });
      setTimeout(() => {
        this.show_preview = true;
      }, 100);
    },
    handleWav(data) {
      this.data.record_list = data;
    },
    onInputChange(item) {
      let answer = item.con;

      answer = answer
        .trim()
        .split(/\s+/)
        .map((item) => {
          return handleToneValue(item);
        })
        .map((item) =>
          item.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
        )
        .filter((item) => item.length > 0)
        .join(' ');
      item.con = answer;
    },
  },
};
</script>

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

.pinyin-preview {
  @include preview-base;

  .content-box {
    &-flex {
      display: flex;
      flex-wrap: wrap;
      column-gap: 8px;
      align-items: center;
    }

    &-vertical {
      .tone-box,
      .record-box {
        margin-top: 8px;
      }
    }
  }

  .first-con {
    display: flex;
    column-gap: 8px;
    align-items: center;
  }

  .option-content {
    padding: 10px 22px;
    color: #706f78;
    background-color: $content-color;
    border: 1px solid $content-color;
    border-radius: 40px;

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

    &.has-error {
      border-color: $error-color;
    }
  }

  .items-hz {
    margin-right: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #000;
  }

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

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

    &.error {
      color: $error-color;
    }

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

  .item-con-in {
    cursor: initial;
  }

  .tone-box {
    display: flex;
    column-gap: 8px;
  }

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

    &.right {
      color: $right-color;
      background-color: $right-bc-color;
      border-radius: 16px;
    }

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

  .record-box {
    padding: 7px 12px;
    background: #f2f3f5;
    border-radius: 2px;
  }

  .item-input {
    :deep .el-input__inner {
      padding: 0;
      font-family: 'League';
      font-size: 16px;
      color: #1d2129;
      text-align: center;
      background-color: transparent;
      border-width: 0;
      border-bottom: 1px solid #1d2129;
      border-radius: 0;
    }
  }
}
</style>