EEP_BookPreview/src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

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

    <div class="main">
      <div
        class="option"
        :style="{
          background: data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
        }"
      >
        <draggable
          v-model="SortArr"
          animation="300"
          group="site"
          class="content-box"
          :disabled="disabled"
          @start="onStart($event)"
          @end="onEnd($event)"
          @choose="choose($event)"
        >
          <transition-group>
            <div
              v-for="(item, i) in data.structure_select_list"
              :id="item.id"
              :key="'op' + i"
              class="option_one"
              :class="['option_one-' + data.property.frame_size]"
              :style="{
                background:
                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
              }"
            >
              <img
                :src="item.type === 'local' ? require('@/assets/structure/' + item.value) : item.value"
                class="small-img"
              />
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="one-box">
        <div
          v-for="(items, row) in data.option_list"
          :key="'row' + row"
          class="one"
          :class="[!items.pinyin ? 'one_nopy' : '']"
          :style="{ marginRight: (row + 1) % 3 == 0 ? '' : '16px' }"
        >
          <div
            class="number"
            :style="{
              background: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
            }"
          >
            {{ row + 1 }}
          </div>
          <div class="hzpinyin">
            <div
              v-if="isEnable(data.property.view_pinyin)"
              class="pinyin"
              :style="{
                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
              }"
            >
              {{ items.pinyin }}
            </div>
            <template v-if="items.hz_info.length > 0">
              <!-- @click="writeWord(conItem, items.pinyin)" -->
              <div
                class="strockplay-newWord"
                :class="['frame-size-' + data.property.frame_size]"
                :style="{
                  borderColor:
                    data.unified_attrib && data.unified_attrib.topic_color
                      ? data.unified_attrib.topic_color
                      : '#346CDA',
                }"
              >
                <Strockplay
                  class-name="adult-strockplay"
                  :Book_text="items.hz_info[0].con"
                  :play-storkes="true"
                  :stroke-play-color="
                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#346CDA'
                  "
                  :stroke-color="'#000000'"
                  :paly-width="'18px'"
                  :BoxbgType="'0'"
                  :cur-item="items.hz_info[0].hzDetail.hz_json"
                  :target-div="'writeTops-item-' + '-' + items.hz_info[0].con + row"
                  class="writeTop-item"
                  :style="{
                    borderColor:
                      data.unified_attrib && data.unified_attrib.topic_color
                        ? data.unified_attrib.topic_color
                        : '#346CDA',
                  }"
                />
              </div>
            </template>
          </div>
          <div class="image">
            <img src="@/assets/drag-arrows.png" alt="" />
          </div>
          <div class="answer" :class="['answer-' + data.property.frame_size]">
            <!-- :disabled="TaskModel == 'ANSWER' ? true : items.is_example ? true : false" -->

            <draggable
              v-model="answer.answer_list[row].answer_list"
              animation="300"
              group="site"
              :disabled="items.is_example"
              class="content-box content-boxs"
              :class="['content-boxs-' + data.property.frame_size]"
              :move="onMove"
            >
              <transition-group>
                <div
                  v-for="(answer, i) in answer.answer_list[row].answer_list"
                  :key="'op' + i"
                  class="option_one"
                  :class="[
                    items.is_example ? 'option_one_example' : classNameJudge(items, row),
                    'option_one-' + data.property.frame_size,
                  ]"
                  :index="'form' + i"
                  :style="{
                    borderColor:
                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                  }"
                >
                  <img
                    v-if="answer.img_url || answer.value"
                    :src="
                      answer.img_url
                        ? answer.img_url
                        : answer.type === 'local'
                          ? require('@/assets/structure/' + answer.value)
                          : answer.value
                    "
                    alt=""
                  />
                </div>
                <div
                  v-if="answer.answer_list[row].answer_list.length == 0"
                  :key="row"
                  class="option_one"
                  :class="[
                    isJudgingRightWrong && items.answer ? 'wrong' : '',
                    'option_one-' + data.property.frame_size,
                  ]"
                  :style="{
                    borderColor:
                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                  }"
                ></div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @judgeCorrect="judgeCorrect" @retry="retry" />
      <AnswerCorrect
        :answer-correct="data?.answer_correct"
        :visible.sync="visibleAnswerCorrect"
        :is-check-correct="isCheckCorrect"
        @closeAnswerCorrect="closeAnswerCorrect"
      />
      <AnswerAnalysis
        :visible.sync="visibleAnswerAnalysis"
        :answer-list="data.answer_list"
        :analysis-list="data.analysis_list"
        @closeAnswerAnalysis="closeAnswerAnalysis"
      >
        <div slot="right-answer">
          <div class="one-box">
            <div
              v-for="(items, row) in data.option_list"
              :key="'row' + row"
              class="one"
              :class="[!items.pinyin ? 'one_nopy' : '']"
              :style="{ marginRight: (row + 1) % 3 == 0 ? '' : '16px' }"
            >
              <div
                class="number"
                :style="{
                  background:
                    data.unified_attrib && data.unified_attrib.topic_color
                      ? data.unified_attrib.topic_color
                      : '#346CDA',
                }"
              >
                {{ row + 1 }}
              </div>
              <div class="hzpinyin">
                <div v-if="isEnable(data.property.view_pinyin)" class="pinyin">
                  {{ items.pinyin }}
                </div>
                <template v-if="items.hz_info.length > 0">
                  <div
                    class="strockplay-newWord"
                    :class="['frame-size-' + data.property.frame_size]"
                    :style="{
                      borderColor:
                        data.unified_attrib && data.unified_attrib.topic_color
                          ? data.unified_attrib.topic_color
                          : '#346CDA',
                    }"
                  >
                    <Strockplay
                      class-name="adult-strockplay"
                      :Book_text="items.hz_info[0].con"
                      :play-storkes="true"
                      :stroke-play-color="
                        data.unified_attrib && data.unified_attrib.topic_color
                          ? data.unified_attrib.topic_color
                          : '#346CDA'
                      "
                      :stroke-color="'#000000'"
                      :paly-width="'18px'"
                      :BoxbgType="'0'"
                      :cur-item="items.hz_info[0].hzDetail.hz_json"
                      :target-div="'writeTops-item-right' + '-' + items.hz_info[0].con"
                      class="writeTop-item"
                      :style="{
                        borderColor:
                          data.unified_attrib && data.unified_attrib.topic_color
                            ? data.unified_attrib.topic_color
                            : '#346CDA',
                      }"
                    />
                  </div>
                </template>
              </div>
              <div class="image">
                <img src="@/assets/drag-arrows.png" alt="" />
              </div>
              <div class="answer">
                <div
                  class="option_one"
                  :class="[items.is_example ? 'option_one_example' : '', 'option_one-' + data.property.frame_size]"
                  :style="{
                    borderColor:
                      data.unified_attrib && data.unified_attrib.topic_color
                        ? data.unified_attrib.topic_color
                        : '#346CDA',
                  }"
                >
                  <img
                    v-if="items.answer"
                    :src="
                      items.answer.length > 3
                        ? data.file_list.find((p) => p.file_id === items.answer).file_url
                        : require('@/assets/structure/structure-' + items.answer + '.png')
                    "
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </AnswerAnalysis>
    </div>
  </div>
</template>

<script>
import { getCharacterStructureData } from '@/views/book/courseware/data/characterStructure';

import PreviewMixin from '../common/PreviewMixin';
import draggable from 'vuedraggable';
import Strockplay from '../new_word/components/Strockplay.vue';
import { getRandomNumber } from '@/utils';

export default {
  name: 'CharacterStructurePreview',

  components: { draggable, Strockplay },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getCharacterStructureData(),
      dragData: [],
      SortArr: [],
      single: [],
      drag: false,
      currentId: null,
      isPraShow: false,
      curData: null,
      userErrorList: [],
      correctArr: [],
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  watch: {
    'data.option_list': {
      handler(val) {
        if (val) {
          this.handleData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    onMove(e) {
      return false;
    },
    choose(e) {
      let index = e.item.outerHTML.indexOf('id');
      let formIndex = e.item.outerHTML[index + 4];
      let formIndex2 = e.item.outerHTML[index + 5];
      if (!isNaN(Number(formIndex))) {
        this.currentId = Number(formIndex);
      }
      if (!isNaN(Number(formIndex2))) {
        this.currentId = (String(this.currentId) + formIndex2) * 1;
      }
    },
    // 开始拖拽事件
    onStart() {
      this.drag = true;
      this.dragData = JSON.parse(JSON.stringify(this.SortArr));
    },
    // 拖拽结束事件
    onEnd(e) {
      this.drag = false;
      let formIndex = Number(e.to.firstChild.attributes[1].value[4]);
      if (`${formIndex}` !== 'NaN') {
        if (this.answer.answer_list[formIndex].answer_list.length > 1) {
          let arr = [];
          this.data.option_list.forEach((item) => {
            if (item.id === this.currentId) {
              arr.push(item);
            }
          });
          this.answer.answer_list[formIndex].answer_list = JSON.parse(JSON.stringify(arr));
        }
      }

      this.SortArr = JSON.parse(JSON.stringify(this.dragData));
    },
    handleData() {
      this.single = [];
      this.data.structure_select_list.forEach((item) => {
        let items = this.data.file_list.find((p) => p.file_id === item.file_id);
        if (items) {
          item.value = items.file_url;
        }
      });
      this.data.option_list.forEach((items) => {
        if (items.is_example) {
          let obj = {
            id: items.answer,
            img_list: [],
            img_url:
              items.answer.length > 3
                ? this.data.structure_select_list.find((p) => p.file_id === items.answer)
                  ? this.data.structure_select_list.find((p) => p.file_id === items.answer).value
                  : ''
                : require(`@/assets/structure/structure-${items.answer}.png`),
            userAnswerJudge: 'example',
          };
          this.single.push({
            answer_list: [obj],
          });
        } else {
          this.single.push({
            answer_list: [],
          });
        }
      });
      this.data.structure_select_list.forEach((item, i) => {
        item.id = i;
        this.SortArr.push(item);
      });
      if (!this.isJudgingRightWrong) {
        this.$set(this.answer, 'answer_list', this.single);
      }
    },
    classNameJudge(item, index) {
      let classname = '';
      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
        return '';
      }
      if (item.answer && this.isJudgingRightWrong) {
        if (item.answer === this.answer.answer_list[index].answer_list[0].file_id) {
          classname = 'right';
        } else {
          classname = 'wrong';
        }
      }

      return classname;
    },
    // 重做
    retry() {
      this.isJudgingRightWrong = false;
      this.isShowRightAnswer = false;
      this.handleData([]);
    },
    /**
     * 获取无文本内容的数据结构，用于保存为个人模板时的样式模板
     */
    getNoTextContentData() {
      let noTextContentData = JSON.parse(JSON.stringify(this.data));
      const resetFieldMap = {
        analysis_list: [],
        answer_list: [],
        structure_select_id: [], // 存放已选选项id
        structure_select_list: [],
        image_list: [],
        image_id_list: [],
        file_list: [],
        file_id_list: [],
      };

      Object.assign(noTextContentData, resetFieldMap);

      noTextContentData.option_list.forEach((item) => {
        item.content = '';
        item.pinyin = '';
        item.mark = getRandomNumber();
        item.hz_info = [];
        item.is_example = false;
        item.answer = '';
      });

      if (noTextContentData.answer) {
        noTextContentData.answer.answer_list = [];
        noTextContentData.answer.reference_answer = '';
      }

      return noTextContentData;
    },
  },
};
</script>

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

.structure-preview {
  .content-box {
    span {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .content-boxs {
    height: 80px;
    overflow: hidden;

    &-middle {
      height: 70px;
    }

    &-small {
      height: 60px;
    }
  }

  .option {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
    background: #deebff;
    border-radius: 4px;

    .option_one {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;
      margin: 10px 15px;
      overflow: hidden;
      cursor: pointer;
      background: #9dcaff;
      border-radius: 4px;

      &-middle {
        width: 62px;
        height: 62px;
      }

      &-small {
        width: 52px;
        height: 52px;
      }

      img {
        max-width: 100%;
        max-height: 100%;

        // position: relative;
        // top: 2px;
        opacity: 0.8;
      }
    }
  }

  .strockplay-newWord {
    position: relative;
    box-sizing: border-box;
    width: 80px;
    height: 80px;

    // padding: 5px;
    overflow: hidden;

    // background: #fff;
    background-size: cover;
    border: 2px solid #346cda;
    border-radius: 4px;
  }

  .frame-size-middle {
    width: 70px !important;
    height: 70px !important;
  }

  .frame-size-small {
    width: 60px !important;
    height: 60px !important;
  }

  .one {
    display: flex;
    align-items: center;
    margin: 35px 0 32px;

    &.one_nopy {
      margin: 16px 0;
    }

    .number {
      display: block;
      width: 24px;
      height: 24px;
      margin-right: 16px;
      font-family: 'arial';
      font-size: 14px;
      font-weight: bold;
      line-height: 24px;
      color: #fff;
      text-align: center;
      background: #346cda;
      border-radius: 100%;
    }

    .hzpinyin {
      position: relative;

      .pinyin {
        position: absolute;
        top: -28px;
        width: 100%;
        font-family: 'League';
        font-size: 16px;
        font-weight: 400;
        color: rgba($color: #000, $alpha: 50%);
        text-align: center;
      }
    }

    .image {
      img {
        width: 15px;
        margin: 0 9px;
      }
    }

    .answer {
      width: 80px;
      height: 80px;

      &-middle {
        width: 70px;
        height: 70px;
      }

      &-small {
        width: 60px;
        height: 60px;
      }

      .option_one {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        overflow: hidden;
        border: 2px solid #346cda;
        border-radius: 4px;

        &-middle {
          width: 70px;
          height: 70px;
        }

        &-small {
          width: 60px;
          height: 60px;
        }

        &.right {
          background: #e9f7f2 !important;
          border-color: $right-color !important;
        }

        &.wrong {
          border-color: $error-color !important;
        }

        img {
          max-width: 100%;
          max-height: 100%;

          // position: relative;
          // left: -2px;
          opacity: 0.8;
        }
      }
    }

    .answer:hover {
      // @include background_color("theme_color");
    }
  }

  .one-box {
    display: flex;
    flex-flow: wrap;
    column-gap: 16px;
    padding: 20px 0;
  }
}
</style>