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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="structure-preview" :style="getAreaStyle()">
    <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"
          @start="onStart($event)"
          @end="onEnd($event)"
          @choose="choose($event)"
          group="site"
          class="content-box"
          :disabled="disabled"
        >
          <transition-group>
            <div class="option_one" :id="item.id" v-for="(item, i) in data.structure_select_list" :key="'op' + i">
              <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
              class="pinyin"
              v-if="isEnable(data.property.view_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"
                :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"
                  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">
            <!-- :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"
              :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)]"
                  :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
                  class="option_one"
                  :class="[isJudgingRightWrong && items.answer ? 'wrong' : '']"
                  :key="row"
                  v-if="answer.answer_list[row].answer_list.length == 0"
                  :style="{
                    borderColor:
                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                  }"
                ></div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
      <div v-if="isShowRightAnswer" class="right-answer">
        <div class="title">正确答案</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 : '#346CDA',
              }"
            >
              {{ row + 1 }}
            </div>
            <div class="hzpinyin">
              <div class="pinyin" v-if="isEnable(data.property.view_pinyin)">
                {{ items.pinyin }}
              </div>
              <template v-if="items.hz_info.length > 0">
                <div
                  class="strockplay-newWord"
                  :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' : '']"
                :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>
    </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';

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 (formIndex * 1 != NaN) {
        this.currentId = formIndex * 1;
      }
      if (formIndex2 * 1 != NaN) {
        this.currentId = (this.currentId + '' + formIndex2) * 1;
      }
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
      this.dragData = JSON.parse(JSON.stringify(this.SortArr));
    },
    //拖拽结束事件
    onEnd(e) {
      this.drag = false;
      let formIndex = e.to.firstChild.attributes[1].value[4] * 1;
      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;
    },
  },
};
</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;
  }

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

    .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: 8px;

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

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

    .option_one:hover {
    }
  }

  .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: 8px;
  }

  .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;

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

        &.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>