GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/SelectDrag.vue

<!-- 选择 -> 拖拽 -->
<template>
  <div
    class="select-drag select-drag-phone"
    v-if="curQue && judgeAnswer == 'standardAnswer' ? IsError : true"
  >
    <!-- 选项 -->
    <div class="select-drag-options">
      <draggable
        v-model="curQue.options"
        group="option"
        animation="300"
        class="draggable-options"
        :sort="false"
        :disabled="isAnswerMode"
        :move="onMove"
      >
        <span
          v-for="(item, i) in curQue.options"
          :key="`option-${i}`"
          class="drag-option"
          :style="{
            cursor: `${isAnswerMode ? 'default' : 'pointer'}`
          }"
        >
          <template v-if="item.wordsList.length > 0">
            <div>
              <span
                v-for="({ chs, pinyin }, j) in item.wordsList"
                :key="`${isPyTop ? 'pinyin' : 'chs'}-${j}`"
                :class="[`${isPyTop ? 'pinyin' : 'chs'}`]"
                v-text="`${isPyTop ? pinyin : chs}`"
              />
            </div>
            <div>
              <span
                v-for="({ chs, pinyin }, j) in item.wordsList"
                :key="`${isPyTop ? 'chs' : 'pinyin'}-${j}`"
                :class="[`${isPyTop ? 'chs' : 'pinyin'}`]"
                v-text="`${isPyTop ? chs : pinyin}`"
              />
            </div>
          </template>
          <div v-else>
            <span
              :key="`${isPyTop ? 'chs' : 'pinyin'}-${j}`"
              :class="['chs']"
              v-text="`${item.sentence}`"
            />
          </div>
        </span>
      </draggable>
    </div>
    <!-- 句子 -->
    <div class="select-drag-sentences">
      <div
        v-for="(sentence, i) in judgeAnswer == 'standardAnswer'
          ? CorrectData.sentences
          : curQue.sentences"
        :key="`sentence-${i}`"
        :data-serial="judgeAnswer == 'standardAnswer' ? changeNumber(i) : i + 1"
        class="drag-sentence"
      >
        <span
          v-for="(item, j) in sentence"
          :key="`sentence-item-${j}`"
          :class="[
            'drag-sentence-item',
            `${item.isSpace && item.dragList.length <= 0 ? 'space' : ''}`,
            changeClass(i, item.index, j),
            hasPy ? 'drag-sentence-item-hasPy' : ''
          ]"
          :style="{
            'grid-template': item.isSpace
              ? ''
              : `repeat(${item.wordsList.length}, auto) / repeat(${item.wordsList.length}, auto)`,
            fontSize: baseSizePhone + 2 + 'px'
          }"
        >
          <!-- 空格 -> 拖拽 -->
          <template v-if="item.isSpace">
            <draggable
              v-model="item.dragList"
              class="draggable-space"
              :data-sentence="i"
              :data-subsection="j"
              :sort="false"
              :disabled="isAnswerMode"
              group="option"
              animation="300"
              :move="onMoveTo"
              @change="change({ ...arguments }, i)"
            >
              <div
                :class="[`${item.dragList.length > 0 ? 'drag-list' : ''}`]"
                :style="{
                  'grid-template':
                    item.dragList.length > 0
                      ? `repeat(${item.dragList[0].wordsList.length}, auto) / repeat(${item.dragList[0].wordsList.length}, auto)`
                      : '',
                  cursor: `${isAnswerMode ? 'default' : 'pointer'}`
                }"
              >
                <template v-if="item.dragList.length > 0">
                  <template v-if="item.dragList[0].wordsList.length > 0">
                    <span
                      v-for="({ chs, pinyin }, k) in item.dragList[0].wordsList"
                      :key="`${isPyTop ? 'pinyin' : 'chs'}-${k}`"
                      :class="[`${isPyTop ? 'pinyin' : 'chs'}`]"
                      v-text="isPyTop ? pinyin : chs"
                      :style="{
                        fontSize: isPyTop
                          ? baseSizePhone + 'px'
                          : baseSizePhone + 2 + 'px'
                      }"
                    />
                    <span
                      v-for="({ chs, pinyin }, k) in item.dragList[0].wordsList"
                      :key="`${isPyTop ? 'chs' : 'pinyin'}-${k}`"
                      :class="[`${isPyTop ? 'chs' : 'pinyin'}`]"
                      v-text="isPyTop ? chs : pinyin"
                      :style="{
                        fontSize: isPyTop
                          ? baseSizePhone + 2 + 'px'
                          : baseSizePhone + 'px'
                      }"
                    />
                  </template>
                  <span
                    v-else
                    :class="['chs']"
                    v-text="item.dragList[0].sentence"
                    :style="{
                      fontSize: baseSizePhone + 2 + 'px'
                    }"
                  />
                </template>
              </div>
            </draggable>
          </template>
          <template v-else-if="item.wordsList.length > 0">
            <span
              v-for="({ chs, pinyin }, k) in item.wordsList"
              :key="`${isPyTop ? 'pinyin' : 'chs'}-${k}`"
              :class="[`${isPyTop ? 'pinyin' : 'chs'}`]"
              :style="{
                fontSize: isPyTop
                  ? baseSizePhone + 'px'
                  : baseSizePhone + 2 + 'px'
              }"
            >
              {{ isPyTop ? pinyin : chs }}
            </span>
            <span
              v-for="({ chs, pinyin }, k) in item.wordsList"
              :key="`${isPyTop ? 'chs' : 'pinyin'}-${k}`"
              :class="[`${isPyTop ? 'chs' : 'pinyin'}`]"
              :style="{
                fontSize: isPyTop
                  ? baseSizePhone + 2 + 'px'
                  : baseSizePhone + 'px'
              }"
            >
              {{ isPyTop ? chs : pinyin }}
            </span>
          </template>
          <span
            :class="['chs']"
            v-else
            :style="{
              fontSize: baseSizePhone + 2 + 'px'
            }"
          >
            {{ item.sentence }}
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: { draggable },
  props: {
    curQue: {
      type: Object,
      required: true
    },
    themeColor: {
      type: String,
      required: true
    },
    TaskModel: {
      type: String,
      required: true
    },
    judgeAnswer: {
      type: String,
      required: true
    },
    baseSizePhone: {
      type: Number
    }
  },
  data() {
    return {
      isAnswerMode: false,
      curDrag: {
        sentenceIndex: 0,
        subsectionIndex: 0
      },
      IsError: false,
      CorrectData: null,
      hasPy: false
    };
  },
  computed: {
    isPyTop() {
      return this.curQue.pyPosition === "top";
    }
  },
  created() {
    const Bookanswer = this.curQue.Bookanswer;
    if (Bookanswer) {
      this.isAnswerMode = true;
      if (this.judgeAnswer == "userAnswer") {
      } else if (this.judgeAnswer == "standardAnswer") {
        let data = JSON.parse(JSON.stringify(this.curQue));
        let arr = [];
        data.sentences.forEach((item, index) => {
          let flag = false;
          item.forEach((items, indexs) => {
            if (items.isSpace) {
              if (
                this.curQue.Bookanswer.answerList[index][items.index]
                  .userAnswerJudge == "[JUDGE##F##JUDGE]"
              ) {
                if (!flag) {
                  flag = true;
                }
              }
            }
          });
          arr.push(flag);
        });
        arr.forEach((item, index) => {
          if (!item) {
            data.sentences.splice(index, 1);
          }
        });
        data.sentences.forEach((item, index) => {
          item.forEach((items, indexs) => {
            if (items.isSpace) {
              items.dragList = [];
              this.curQue.oldOptions.forEach(op => {
                if (items.answer == op.sentence) {
                  items.dragList.push(op);
                }
              });
            }
          });
        });
        this.CorrectData = data;
      }
      this.iSErrorEvent();
    } else {
      let Bookanswer = {
        dragList: [],
        answerList: []
      };
      this.curQue.oldOptions = JSON.parse(JSON.stringify(this.curQue.options));
      this.curQue.sentences.forEach(item => {
        let arr = [];
        let index = 0;
        item.forEach((items, i) => {
          if (items.isSpace) {
            let obj = {
              userAnswerJudge: "",
              answer: items.answer,
              index: index
            };
            items.index = index;
            if (items.answer) {
              obj.userAnswerJudge = "[JUDGE##F##JUDGE]";
            }
            arr.push(obj);
            index++;
          }
        });
        Bookanswer.dragList.push([]);
        Bookanswer.answerList.push(arr);
      });
      this.$set(this.curQue, "Bookanswer", Bookanswer);
    }
    this.curQue.sentences.forEach(item => {
      item.forEach((items, i) => {
        if (!items.isSpace) {
          items.wordsList.forEach(itemw => {
            if (itemw.pinyin) {
              this.hasPy = true;
            }
          });
        }
      });
    });
  },
  methods: {
    // 计算序号
    changeNumber(i) {
      let index = null;
      this.curQue.sentences.forEach((item, indexs) => {
        let flag = true;
        if (this.CorrectData.sentences[i].length == item.length) {
          item.forEach((items, indexss) => {
            if (items.isSpace) {
              if (
                this.CorrectData.sentences[i][indexss].answer != items.answer
              ) {
                flag = false;
              }
            } else {
              if (
                this.CorrectData.sentences[i][indexss].sentence !=
                items.sentence
              ) {
                flag = false;
              }
            }
          });
        } else {
          flag = false;
        }
        if (flag) {
          index = indexs;
        }
      });
      return index + 1;
    },
    changeClass(index, indexs, indexss) {
      let className = "";
      if (Object.prototype.toString.call(index).indexOf("Number") != -1) {
        if (
          this.judgeAnswer == "studentAnswer" ||
          this.judgeAnswer == "userAnswer"
        ) {
          if (this.curQue.Bookanswer.answerList[index][indexs]) {
            if (
              this.curQue.Bookanswer.answerList[index][indexs].userAnswerJudge
            ) {
              if (
                this.curQue.Bookanswer.answerList[index][indexs]
                  .userAnswerJudge == "[JUDGE##T##JUDGE]"
              ) {
                className = "correct";
              } else {
                className = "error";
              }
            }
          }
        } else if (this.judgeAnswer == "standardAnswer") {
          if (this.CorrectData.sentences[index][indexss].isSpace) {
            if (
              this.CorrectData.sentences[index][indexss].dragList.length > 0
            ) {
              className = "correct";
            }
          }
        }
      }
      return className;
    },
    onMove(e) {
      if (e.relatedContext.component.realList.length > 0) return false;
      let { sentence, subsection } = e.to.dataset;
      this.curDrag = {
        sentenceIndex: sentence,
        subsectionIndex: subsection
      };
      return true;
    },

    onMoveTo(e) {
      if (
        e.to.classList.contains("draggable-space") &&
        e.relatedContext.component.realList.length > 0
      ) {
        return false;
      }
      let { sentence, subsection } = e.from.dataset;
      this.curDrag = {
        sentenceIndex: sentence,
        subsectionIndex: subsection
      };
    },

    change(obj, i) {
      if (obj[0].added) {
        this.curQue.Bookanswer.dragList[i].push({
          ...this.curDrag,
          ...obj[0].added.element
        });
      }
      if (obj[0].removed) {
        this.curQue.Bookanswer.dragList[i] = this.curQue.Bookanswer.dragList[
          i
        ].filter(({ sentenceIndex, subsectionIndex }) => {
          let {
            sentenceIndex: senIndex,
            subsectionIndex: subIndex
          } = this.curDrag;
          if (sentenceIndex === senIndex && subsectionIndex === subIndex) {
            return false;
          }
          return true;
        });
      }
      this.changeuserAnswerJudge();
    },
    // 判断对错
    changeuserAnswerJudge() {
      this.curQue.sentences.forEach((item, index) => {
        item.forEach((items, indexs) => {
          if (items.isSpace) {
            if (items.answer) {
              if (items.dragList) {
                if (items.dragList.length > 0) {
                  if (items.answer == items.dragList[0].sentence) {
                    this.curQue.Bookanswer.answerList[index][
                      items.index
                    ].userAnswerJudge = "[JUDGE##T##JUDGE]";
                  } else {
                    this.curQue.Bookanswer.answerList[index][
                      items.index
                    ].userAnswerJudge = "[JUDGE##F##JUDGE]";
                  }
                } else {
                  this.curQue.Bookanswer.answerList[index][
                    items.index
                  ].userAnswerJudge = "[JUDGE##F##JUDGE]";
                }
              }
            }
          }
        });
      });
    },
    // 判断是否有错的
    iSErrorEvent() {
      let flag = false;
      this.curQue.Bookanswer.answerList.forEach(item => {
        item.forEach(items => {
          if (items.userAnswerJudge == "[JUDGE##F##JUDGE]") {
            flag = true;
          }
        });
      });
      if (flag) {
        this.IsError = true;
      } else {
        this.IsError = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.select-drag {
  width: 100%;
  color: #000;
  margin-bottom: 16px;

  .pinyin {
    font-family: "GB-PINYINOK-B";
    font-size: 14px;
    line-height: 1.3;
  }

  .chs {
    font-family: "FZJCGFKTK";
    font-size: 16px;
    line-height: 1.5;
  }

  &-options {
    width: 100%;
    // background-color: #f7f7f7;
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 24px;

    .draggable-options {
      display: flex;
      flex-wrap: wrap;
      column-gap: 6px;
      row-gap: 6px;

      .drag-option {
        min-width: 66px;
        // height: 58px;
        text-align: center;
        padding: 4px 10px;
        // background-color: #fff;
        border: 1px solid #dedede;
        border-radius: 8px;
      }
    }
  }
  &-phone {
    .select-drag-options {
      padding: 10px;
      .draggable-options {
        gap: 6px;
      }
    }
  }
  &-sentences {
    .drag-sentence {
      margin-top: 10px;
      display: flex;
      align-items: center;
      flex-flow: wrap;
      row-gap: 5px;
      .correct {
        background: rgba(44, 167, 103, 0.1);
        /* 正确答案 */

        border: 1px solid #2ca767;
      }
      .error {
        background: rgba(237, 52, 45, 0.1);
        /* 错误颜色 */

        border: 1px solid #ed342d;
      }

      &::before {
        content: attr(data-serial);
        display: inline-block;
        text-align: center;
        color: #fff;
        font-size: 16px;
        line-height: 1.5;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #32a5d8;
        margin-right: 12px;
        flex-shrink: 0;
      }

      &-item {
        padding: 4px 10px;
        // height: 58px;
        min-height: 34px;
        // background-color: #fff;
        border: 1px solid #dedede;
        border-radius: 8px;
        margin-left: 4px;
        display: grid;
        column-gap: 4px;
        &-hasPy {
          height: 58px;
        }

        > :not(:first-child) {
          text-align: center;
        }

        &.space {
          min-width: 96px;
          // background-color: #f1f1f1;
        }

        .drag-list {
          display: grid;
          column-gap: 4px;

          > :not(:first-child) {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>