eep_page/src/views/book/courseware/preview/components/fill/FillPreview.vue

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

    <div class="main" :style="getMainStyle()">
      <AudioFill :file-id="data.audio_file_id" />
      <div class="fill-wrapper">
        <p v-for="(item, i) in data.model_essay" :key="i">
          <template v-for="(li, j) in item">
            <span v-if="li.type === 'text'" :key="j" v-html="sanitizeHTML(li.content)"></span>
            <template v-if="li.type === 'input'">
              <el-input
                :key="j"
                v-model="li.content"
                :disabled="disabled"
                :class="[data.property.fill_font, ...computedAnswerClass(li.mark)]"
                :style="[{ width: Math.max(80, li.content.length * 21.3) + 'px' }]"
              />
              <span v-show="computedAnswerText(li.mark).length > 0" :key="`answer-${j}`" class="right-answer">
                {{ computedAnswerText(li.mark) }}
              </span>
            </template>
          </template>
        </p>
      </div>
      <SoundRecord
        v-if="isEnable(data.property.is_enable_voice_answer)"
        ref="record"
        type="normal"
        class="record-box"
        :answer-record-list="data.record_list"
        :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
        @handleWav="handleWav"
      />
    </div>
  </div>
</template>

<script>
import { getFillData, fillFontList, arrangeTypeList, audioPositionList } from '@/views/book/courseware/data/fill';

import PreviewMixin from '../common/PreviewMixin';
import AudioFill from './components/AudioFillPlay.vue';
import SoundRecord from '../../common/SoundRecord.vue';

export default {
  name: 'FillPreview',
  components: {
    AudioFill,
    SoundRecord,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getFillData(),
    };
  },
  computed: {
    fontFamily() {
      return fillFontList.find(({ value }) => this.data.property.fill_font === value).font;
    },
  },
  watch: {
    'data.model_essay': {
      handler(list) {
        this.answer.answer_list = list
          .map((item) => {
            return item
              .map(({ type, content, mark }) => {
                if (type === 'input') {
                  return {
                    value: content,
                    mark,
                  };
                }
              })
              .filter((item) => item);
          })
          .flat();
      },
      deep: true,
    },
    isJudgingRightWrong(val) {
      if (!val) return;

      this.answer.answer_list.forEach(({ mark, value }) => {
        this.data.model_essay.forEach((item) => {
          item.forEach((li) => {
            if (li.mark === mark) {
              li.content = value;
            }
          });
        });
      });

      this.handleWav(this.answer.record_list);
    },
    'data.record_list'(val) {
      this.answer.record_list = val;
    },
  },
  created() {
    this.answer.answer_list = this.data.model_essay
      .map((item) => {
        return item
          .map(({ type, content, mark }) => {
            if (type === 'input') {
              return {
                value: content,
                mark,
              };
            }
          })
          .filter((item) => item);
      })
      .flat();
  },
  methods: {
    handleWav(data) {
      this.data.record_list = data;
    },
    getMainStyle() {
      const isRow = this.data.property.arrange_type === arrangeTypeList[0].value;
      const isFront = this.data.property.audio_position === audioPositionList[0].value;
      const isEnableVoice = this.data.property.is_enable_voice_answer === 'true';
      let _list = [
        { name: 'audio', value: '24px' },
        { name: 'fill', value: '1fr' },
      ];
      if (!isFront) {
        _list = _list.reverse();
      }
      let grid = isRow
        ? `"${_list[0].name} ${_list[1].name}${isEnableVoice ? ' record' : ''}" auto / ${_list[0].value} ${_list[1].value}${isEnableVoice ? ' 160px' : ''}`
        : `"${_list[0].name}" ${_list[0].value} "${_list[1].name}" ${_list[1].value}${isEnableVoice ? `" record" 32px ` : ''} / 1fr`;
      let style = {
        'grid-auto-flow': isRow ? 'column' : 'row',
        'column-gap': isRow ? '16px' : undefined,
        'row-gap': isRow ? undefined : '8px',
        grid,
      };
      return style;
    },
    /**
     * 计算答题对错选项字体颜色
     * @param {string} mark 选项标识
     */
    computedAnswerClass(mark) {
      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
        return '';
      }
      let selectOption = this.answer.answer_list.find((item) => item.mark === mark);
      let answerOption = this.data.answer.answer_list.find((item) => item.mark === mark);
      if (!selectOption) return '';
      let selectValue = selectOption.value;
      let answerValue = answerOption.value;
      let classList = [];
      let isRight = selectValue === answerValue;
      if (this.isJudgingRightWrong) {
        isRight ? classList.push('right') : classList.push('wrong');
      }

      if (this.isShowRightAnswer && !isRight) {
        classList.push('show-right-answer');
      }
      return classList;
    },
    /**
     * 计算正确答案文本
     * @param {string} mark 选项标识
     */
    computedAnswerText(mark) {
      if (!this.isShowRightAnswer) return '';
      let selectOption = this.answer.answer_list.find((item) => item.mark === mark);
      let answerOption = this.data.answer.answer_list.find((item) => item.mark === mark);
      if (!selectOption) return '';
      let selectValue = selectOption.value;
      let answerValue = answerOption.value;
      let isRight = selectValue === answerValue;
      if (isRight) return '';
      return `（${answerValue}）`;
    },
  },
};
</script>

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

.select-preview {
  @include preview-base;

  .main {
    display: grid;
    align-items: center;
  }

  .fill-wrapper {
    grid-area: fill;
    font-size: 16pt;

    p {
      margin: 0;
    }

    .el-input {
      display: inline-flex;
      align-items: center;
      width: 120px;
      margin: 0 2px;

      &.pinyin :deep input.el-input__inner {
        font-family: 'PINYIN-B', sans-serif;
      }

      &.chinese :deep input.el-input__inner {
        font-family: 'arial', sans-serif;
      }

      &.english :deep input.el-input__inner {
        font-family: 'arial', sans-serif;
      }

      &.right {
        :deep input.el-input__inner {
          color: $right-color;
        }
      }

      &.wrong {
        :deep input.el-input__inner {
          color: $error-color;
        }
      }

      & + .right-answer {
        position: relative;
        left: -4px;
        display: inline-block;
        height: 32px;
        line-height: 28px;
        vertical-align: bottom;
        border-bottom: 1px solid $font-color;
      }

      :deep input.el-input__inner {
        padding: 0;
        font-size: 16pt;
        color: $font-color;
        text-align: center;
        background-color: #fff;
        border-width: 0;
        border-bottom: 1px solid $font-color;
        border-radius: 0;
      }
    }
  }

  .record-box {
    padding: 6px 12px;
    background-color: $fill-color;

    :deep .record-time {
      width: 100px;
    }
  }
}
</style>