eep_page/src/views/book/courseware/preview/components/write/WritePreview.vue

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

    <div class="main">
      <div :class="['words-box']">
        <div v-for="(item, index) in option_list" :key="index" :class="['words-item']">
          <template
            v-if="
              item.con &&
              item.con.trim() &&
              item.hz_strokes_list &&
              item.hz_strokes_list[0] &&
              item.hz_strokes_list[0].strokes &&
              data.property.content_type === 'con'
            "
          >
            <div
              class="words-top"
              :style="{
                width: 64 * item.hz_strokes_list.length + 'px',
              }"
            >
              <div class="words-left" :style="{ width: '64' * item.hz_strokes_list.length + 'px' }">
                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
                <span class="pinyin">{{ item.pinyin }}</span>
              </div>
            </div>
            <div class="card-box">
              <!-- 描红 -->
              <template v-for="(items, indexs) in item.hz_strokes_list">
                <Strockplayredline
                  :key="'miao' + indexs"
                  :play-storkes="true"
                  :book-text="item.con"
                  :target-div="'pre' + item.con + index + indexs + Math.random().toString(36).substring(2, 10)"
                  :book-strokes="items.strokes"
                  :class="['strock-chinese', 'border-right-none']"
                />
              </template>

              <div
                v-for="(itemI, indexI) in miao_arr[index]"
                :key="indexI + index"
                style="display: flex"
                @click="miaoStorkes(index, indexI, item.mark, item.con, itemI.strokes)"
              >
                <Strockplayredline
                  v-if="item.imgArr[indexI] && item.imgArr[indexI] === 'true'"
                  :play-storkes="false"
                  :book-text="item.con"
                  :target-div="'write-praT' + item.con + itemI + Math.random().toString(36).substring(2, 10)"
                  :book-strokes="itemI.strokes"
                  :class="[
                    'strock-chinese',
                    'strock-chinese' + ((indexI + itemI.length + 1) % writer_number_yuan),
                    (indexI + itemI.length + 1) % writer_number_yuan !== 0 && indexI !== miao_arr[index].length - 1
                      ? 'border-right-none'
                      : '',
                  ]"
                />
                <Strockplayredline
                  v-else
                  :play-storkes="false"
                  :book-text="item.con"
                  :target-div="'write-praT' + item.con + itemI + Math.random().toString(36).substring(2, 10)"
                  :book-strokes="itemI.strokes"
                  :stroke-color="'#ddd'"
                  :class="[
                    'strock-chinese',
                    'strock-chinese' + ((indexI + itemI.length + 1) % writer_number_yuan),
                    (indexI + itemI.length + 1) % writer_number_yuan !== 0 && indexI !== miao_arr[index].length - 1
                      ? 'border-right-none'
                      : '',
                  ]"
                />
              </div>
              <!-- 书写 -->
              <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
                <div
                  :class="[
                    'strockplay-newWord',
                    (indexs + item.hz_strokes_list.length) % writer_number_yuan !== 0 ? 'border-left-none' : '',
                  ]"
                  @click="freeWrite(items ? JSON.parse(items) : null, index, indexs, item.mark)"
                >
                  <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
                  <img
                    v-if="!play_status && items && JSON.parse(items).strokes_image"
                    class="hanzi-writer-img"
                    :src="JSON.parse(items).strokes_image"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </template>
          <template v-else-if="data.property.content_type === 'upload'">
            <!-- 书写 -->
            <div class="card-box">
              <el-image :src="item.file_url" fit="scale-down" class="img_url" :preview-src-list="[item.file_url]">
                <div slot="placeholder" class="image-slot">
                  <img src="@/assets/icon-imgloading.png" />
                </div>
              </el-image>
              <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
                <div
                  :class="[
                    'strockplay-newWord',
                    (indexs + item.imgArr.length) % writer_number_yuan !== 0 ? 'border-left-none' : '',
                  ]"
                  @click="freeWrite(items ? JSON.parse(items) : null, index, indexs, item.mark)"
                >
                  <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
                  <img
                    v-if="!play_status && items && JSON.parse(items).strokes_image"
                    class="hanzi-writer-img"
                    :src="JSON.parse(items).strokes_image"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div v-if="if_free_show" class="practiceBox practice-box-strock">
        <FreewriteLettle
          ref="freePaint"
          :current-tree-i-d="'1234456'"
          :current-hz="current_hz"
          :curren-hz-data="current_hz_data"
          :row-index="active_index"
          :col-index="active_col_index"
          :disabled="disabled"
          :show-play="isEnable(data.property.is_enable_play_back)"
          @closeIfFreeShow="closeIfFreeShow"
          @changePraShow="changePraShow"
          @changeCurQue="changeCurQue"
          @deleteWriteRecord="deleteWriteRecord"
        />
      </div>
      <div v-if="if_miao_show" class="practiceBox practice-box-strock">
        <div class="miao-box">
          <i class="el-icon-close close-icon" @click="if_miao_show = false"></i>
          <Strockplayredline
            v-if="
              (data.answer.answer_list[active_index].strokes_content_list[active_col_index] &&
                data.answer.answer_list[active_index].strokes_content_list[active_col_index] === 'true') ||
              disabled
            "
            :play-storkes="false"
            :book-text="current_hz"
            :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
            :book-strokes="current_hz_data"
            :stroke-color="
              disabled &&
              (!data.answer.answer_list[active_index].strokes_content_list[active_col_index] ||
                (data.answer.answer_list[active_index].strokes_content_list[active_col_index] &&
                  data.answer.answer_list[active_index].strokes_content_list[active_col_index] === 'false'))
                ? '#ddd'
                : ''
            "
          />
          <Strockred
            ref="strockRed"
            :class="[
              'strock-red',
              data.answer.answer_list[active_index].strokes_content_list[active_col_index] &&
              data.answer.answer_list[active_index].strokes_content_list[active_col_index] === 'true'
                ? 'strock-red-zindex'
                : '',
            ]"
            :book-text="current_hz"
            :hanzi-color="hanzi_color"
            :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
            :book-strokes="current_hz_data"
            :is-answer.sync="data.answer.answer_list[active_index].strokes_content_list[active_col_index]"
            :show-error-tip="isEnable(data.property.is_enable_error)"
          />
          <div v-if="!disabled" :class="['reset-box']" @click="resetHanzi">
            <SvgIcon icon-class="reset" class="reset-btn" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWriteData } from '@/views/book/courseware/data/write';

import PreviewMixin from '../common/PreviewMixin';
import AudioPlay from '../character_base/components/AudioPlay.vue';
import Strockplayredline from '../character_base/components/Strockplayredline.vue';
import Strockred from '../character_base/components/Strockred.vue';
import FreewriteLettle from '../character_base/components/FreewriteLettle.vue';

export default {
  name: 'WritePreview',
  components: {
    AudioPlay,
    Strockplayredline,
    Strockred,
    FreewriteLettle,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getWriteData(),
      hanzi_color: '#404040', // 描红汉字底色
      writer_number_yuan: 15,
      writer_number: null, // 书写个数
      miao_number: null, // 描红个数
      if_free_show: false,
      free_img: [],
      active_index: null,
      active_col_index: null,
      current_hz: '', // 当前汉字
      current_hz_data: null, // 当前汉字数据
      play_status: false, // 播放状态
      active_mark: '',
      option_list: [],
      show_preview: false,
      miao_arr: [],
      if_miao_show: false, // 描红模块
    };
  },
  computed: {},
  watch: {
    'data.content': {
      handler(val) {
        if (val) {
          this.handleData();
        }
      },
      deep: true,
      immediate: true,
    },
    'data.file_list': {
      handler(val) {
        if (val.length > 0) {
          this.handleData();
        }
      },
      deep: true,
      immediate: true,
    },
    isJudgingRightWrong: {
      handler(val) {
        if (!val) return;
        this.handleData();
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    handleData() {
      if (!this.isJudgingRightWrong) {
        this.data.answer.answer_list = [];
      }
      this.writer_number = this.data.property.write_number ? Number(this.data.property.write_number) : 5;
      this.miao_number = this.data.property.miao_number ? Number(this.data.property.miao_number) : 5;
      let option_list = JSON.parse(JSON.stringify(this.data)).content_list;
      let img_list = JSON.parse(JSON.stringify(this.data)).file_list;

      this.miao_arr = [];
      if (this.data.property.content_type === 'con') {
        option_list.forEach((item, index) => {
          let arr = [];
          this.miao_arr.push([]);
          if (item.con.trim()) {
            for (let i = 0; i < this.writer_number; i++) {
              item.hz_strokes_list.forEach((items) => {
                arr.push(null);
              });
            }
            for (let i = 0; i < this.miao_number; i++) {
              item.hz_strokes_list.forEach((items) => {
                this.miao_arr[index].push({
                  strokes: items && items.strokes ? items.strokes : null,
                  length: item.hz_strokes_list.length,
                });
              });
            }
            item.imgArr = arr;
            if (this.isJudgingRightWrong) {
              item.imgArr = this.data.answer.answer_list.find(
                (items) => items.mark === item.mark,
              )?.strokes_content_list;
            }
          }
          let obj = {
            mark: item.mark,
            strokes_content_list: arr,
          };
          if (!this.isJudgingRightWrong) {
            this.data.answer.answer_list.push(obj);
          }
        });
        this.option_list = option_list;
      } else {
        img_list.forEach((item, index) => {
          let arr = [];
          this.miao_arr.push([]);
          if (item.file_id) {
            for (let i = 0; i < this.writer_number; i++) {
              // item.hz_strokes_list.forEach((items) => {
              arr.push(null);
              // });
            }
            item.imgArr = arr;
            if (this.isJudgingRightWrong) {
              item.imgArr = this.data.answer.answer_list.find(
                (items) => items.mark === item.mark,
              )?.strokes_content_list;
            }
          }
          let obj = {
            mark: item.mark,
            strokes_content_list: arr,
          };
          if (!this.isJudgingRightWrong) {
            this.data.answer.answer_list.push(obj);
          }
        });

        this.option_list = img_list;
      }
      setTimeout(() => {
        if (document.getElementsByClassName('chinese-preview').length > 0) {
          this.writer_number_yuan = Math.floor(
            (document.getElementsByClassName('chinese-preview')[0].clientWidth - 128) / 64,
          );
        }
      }, 10);
    },
    changePraShow() {
      this.if_free_show = false;
    },
    closeIfFreeShow(data, rowIndex, colIndex, mark) {
      this.option_list[rowIndex].imgArr[colIndex] = JSON.stringify(data);
      this.if_free_show = false;
      this.freeWrite(data, rowIndex, colIndex, mark);
      this.$forceUpdate();
    },
    freeWrite(imgUrl, index, indexs, mark) {
      this.if_free_show = true;
      this.active_index = index;
      this.active_col_index = indexs;
      this.active_mark = mark;

      this.current_hz = this.option_list[index].content;
      this.current_hz_data = imgUrl;
    },
    // 删除记录
    deleteWriteRecord(rowIndex, colIndex) {
      this.$set(this.option_list[rowIndex].imgArr, colIndex, JSON.stringify({}));
      this.changeCurQue(null, colIndex, this.active_mark);
      this.current_hz_data = null;
      this.active_mark = '';
      this.$forceUpdate();
    },
    changeCurQue(answer, colIndex, mark) {
      if (answer) {
        let write_model = [];
        this.answer.answer_list.forEach((itema) => {
          if (itema.mark === mark) {
            write_model = itema.strokes_content_list;
          }
        });
        write_model[colIndex] = JSON.stringify(answer);
      }
    },
    // 点击描红模块
    miaoStorkes(index, indexs, mark, content, storkes) {
      this.if_miao_show = true;
      this.active_index = index;
      this.active_col_index = indexs;
      this.active_mark = mark;
      this.current_hz = content;
      this.current_hz_data = storkes;
    },
    // 保存描红
    saveComplete(flag) {
      this.answer.answer_list[this.active_index].strokes_content_list[this.active_col_index] = flag;
    },
    resetHanzi() {
      this.$refs.strockRed.resetHanzi();
    },
    updateColor(color) {
      this.writer.updateColor('strokeColor', color);
      this.writer.updateColor('drawingColor', color);
    },
  },
};
</script>

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

.chinese-preview {
  @include preview-base;

  .audio-wrapper-nobg {
    height: 16px;

    :deep .audio-play {
      width: 16px;
      height: 16px;
      color: #000;
      background-color: initial;
    }

    :deep .audio-play.not-url {
      color: #a1a1a1;
    }

    :deep .voice-play {
      width: 16px;
      height: 16px;
    }
  }

  .words-box {
    .words-item {
      // display: flex;
      // flex-wrap: wrap;
      min-width: 64px;
      margin-bottom: 24px;
    }

    .words-top {
      display: flex;
      width: 100%;
      min-height: 30px;
      border: 1px solid #e81b1b;

      .words-left {
        box-sizing: border-box;
        display: flex;
        column-gap: 4px;
        align-items: center;
        justify-content: center;
        width: 64px;
      }

      .words-right {
        padding: 8px 4px;
        margin: 0;
        font-size: 14px;
        line-height: 14px;
        color: #000;
      }
    }

    .audio-wrapper {
      height: 16px;

      :deep .audio-play {
        width: 16px;
        height: 16px;
        color: #000;
        background-color: initial;
      }

      :deep .audio-play.not-url {
        color: #a1a1a1;
      }

      :deep .voice-play {
        width: 16px;
        height: 16px;
      }
    }

    .words-info {
      display: flex;
      column-gap: 4px;
      align-items: center;
      justify-content: center;
      width: max-content;
      padding: 5px 16px;
      margin: 0 auto 8px;
      font-size: 14px;
      line-height: 22px;
      color: #fff;
      background: #165dff;
      border-radius: 20px;

      .pinyin {
        font-size: 14px;
        color: #fff;
      }

      .audio-wrapper {
        :deep .audio-play {
          color: #fff;
        }

        :deep .audio-play.not-url {
          color: #a1a1a1;
        }
      }
    }

    .card-box {
      display: flex;
      flex-wrap: wrap;
    }

    .pinyin {
      font-family: 'League';
      font-size: 12px;
      font-weight: 500;
      color: #000;
    }

    .strock-chinese {
      border: 1px solid #e81b1b;
    }

    .img_url {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border: 1px solid #e81b1b;
    }

    .strockplay-newWord {
      position: relative;
      box-sizing: border-box;
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border: 1px solid #e81b1b;

      .character-target-bg,
      .hanzi-writer-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #dedede;
      }

      .hanzi-writer-img {
        z-index: 1;
      }
    }

    // .border-left-none {
    //   border-left: none;
    // }

    // .border-right-none {
    //   border-right: none;
    // }

    &-learn {
      display: flex;
      column-gap: 24px;

      .words-item {
        display: block;
      }
    }
  }

  .words-dic-item {
    .strockplay-newWord {
      border-top: 1px solid #e81b1b;
    }
  }

  .practiceBox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background: rgba(0, 0, 0, 19%);

    &.practice-box-strock {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 0;
    }

    .miao-box {
      position: relative;
      width: 332px;
      height: 360px;
      padding: 30px 16px;
      margin: 0 auto;
      background: #f3f3f3;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);

      .close-icon {
        position: absolute;
        top: 0;
        right: 8px;
        z-index: 2;
        width: 32px;
        height: 32px;
        padding: 8px;
        cursor: pointer;
      }

      .strockredBox,
      .strockplay-redInner {
        width: 300px;
        height: 300px;
        margin: 0 auto;
      }

      .strock-red {
        position: absolute;
        top: 30px;
        left: 16px;

        &-zindex {
          z-index: -1;
        }
      }

      .reset-box {
        position: absolute;
        right: 22px;
        bottom: 22px;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 11px;
        height: 11px;
        color: $text-color;
        cursor: pointer;

        &:hover {
          color: #000;
        }
      }
    }
  }
}
</style>