GCLS_Page_Book_Component_NPC/src/components/Adult/preview/NewWordShow.vue

<!--  -->
<template>
  <div
    v-if="curQue"
    class="Big-Book-prev-Textdes NewWordShow"
    :class="[isPhone ? 'NewWordShow-phone' : '']"
  >
    <h2 v-if="curQue.title">{{ curQue.title }}</h2>
    <div class="item-box">
      <div v-for="(item, index) in curQue.option" :key="index" class="item-pre">
        <template v-if="isPhone">
          <div class="item-info">
            <template v-if="item.pinyin">
              <span class="pinyin" :style="{ width: pinyinWidth + 'px' }">{{
                item.pinyin
              }}</span>
            </template>
            <div
              class="con-box"
              v-if="
                (item.imgOrText && item.imgOrText == 'text' && item.con) ||
                  (item.imgOrText == 'image' && item.img_list.length > 0)
              "
            >
              <template v-if="item.imgOrText == 'text'">
                <template v-if="item.con">
                  <div
                    v-for="(conItem, conindex) in item.con"
                    :key="conindex"
                    class="strockplay-newWord"
                    @click="writeWord(conItem, item.pinyin)"
                  >
                    <Strockplayredline
                      :Book_text="conItem"
                      :play-storkes="true"
                      :target-div="
                        'bwcHanziIntp' +
                          index +
                          conItem +
                          conindex +
                          indexStr +
                          judgeAnswer
                      "
                    />
                    <div
                      v-if="conindex < item.con.length - 1"
                      class="bwc-line"
                    />
                  </div>
                </template>
                <template v-else>
                  <div class="blank-item" @click="freeWrite('', index, 0)">
                    <img v-if="freeImg[index][0]" :src="freeImg[index][0]" />
                  </div>
                </template>
              </template>
              <template v-else-if="item.imgOrText == 'image'">
                <div
                  v-for="(imgItem, imgIndex) in item.img_list"
                  :key="imgIndex"
                  class="img-box"
                  @click="freeWrite(imgItem.id, imgIndex, 0)"
                >
                  <el-image :src="imgItem.id" fit="scale-down" class="img_url">
                    <div slot="placeholder" class="image-slot">
                      <img src="../../../assets/common/icon-imgloading.png" />
                    </div>
                  </el-image>
                </div>
              </template>
            </div>
            <span
              v-if="item.en"
              class="en"
              :style="{
                marginLeft: item.en.length < 12 ? '' : enMargin + 'px',
                textAlign: item.en.length < 12 ? 'center' : 'left',
                width: item.en.length < 12 ? '66px' : ''
              }"
              >{{ item.en }}</span
            >
          </div>

          <div class="item">
            <template v-if="item.type && item.type.indexOf('lm') > -1">
              <div
                v-for="(items, indexs) in item.imgarr"
                :key="indexs"
                class="con-box"
              >
                <div
                  class="strockplay-newWord"
                  @click="freeWrite(items, index, indexs)"
                >
                  <!-- <div
                @click.stop="playHanzi(index, indexs, items)"
                :class="[
                  'strock-play-box',
                  themeColor == 'green'
                    ? 'green-border'
                    : themeColor == 'red'
                    ? 'red-border'
                    : themeColor == 'brown'
                    ? 'brown-border'
                    : 'red-border',
                ]"
              ></div> -->
                  <img
                    v-if="!playStatus && items && items.strokes_image_url"
                    :src="items.strokes_image_url"
                    alt=""
                  />
                  <!-- <FreeWriteQP
                :id="'cans' + index + indexs"
                :ref="'cans'"
                :height="256"
                :width="256"
              /> -->
                </div>
              </div>
            </template>
          </div>
        </template>
        <template v-else>
          <template v-if="item.pinyin">
            <span class="pinyin" :style="{ width: pinyinWidth + 'px' }">{{
              item.pinyin
            }}</span>
          </template>
          <div class="item" style="margin-right: 20px">
            <div
              class="con-box"
              v-if="
                (item.imgOrText && item.imgOrText == 'text' && item.con) ||
                  (item.imgOrText == 'image' && item.img_list.length > 0)
              "
            >
              <template v-if="item.imgOrText == 'text'">
                <template v-if="item.con">
                  <div
                    v-for="(conItem, conindex) in item.con"
                    :key="conindex"
                    class="strockplay-newWord"
                    @click="writeWord(conItem, item.pinyin)"
                  >
                    <Strockplayredline
                      :Book_text="conItem"
                      :play-storkes="true"
                      :target-div="
                        'bwcHanziIntp' +
                          index +
                          conItem +
                          conindex +
                          indexStr +
                          judgeAnswer
                      "
                    />
                    <div
                      v-if="conindex < item.con.length - 1"
                      class="bwc-line"
                    />
                  </div>
                </template>
                <template v-else>
                  <div class="blank-item" @click="freeWrite('', index, 0)">
                    <img v-if="freeImg[index][0]" :src="freeImg[index][0]" />
                  </div>
                </template>
              </template>
              <template v-else-if="item.imgOrText == 'image'">
                <div
                  v-for="(imgItem, imgIndex) in item.img_list"
                  :key="imgIndex"
                  class="img-box"
                  @click="freeWrite(imgItem.id, imgIndex, 0)"
                >
                  <el-image :src="imgItem.id" fit="scale-down" class="img_url">
                    <div slot="placeholder" class="image-slot">
                      <img src="../../../assets/common/icon-imgloading.png" />
                    </div>
                  </el-image>
                </div>
              </template>
            </div>

            <template v-if="item.type && item.type.indexOf('lm') > -1">
              <div
                v-for="(items, indexs) in item.imgarr"
                :key="indexs"
                class="con-box"
              >
                <div
                  class="strockplay-newWord"
                  @click="freeWrite(items, index, indexs)"
                >
                  <!-- <div
                @click.stop="playHanzi(index, indexs, items)"
                :class="[
                  'strock-play-box',
                  themeColor == 'green'
                    ? 'green-border'
                    : themeColor == 'red'
                    ? 'red-border'
                    : themeColor == 'brown'
                    ? 'brown-border'
                    : 'red-border',
                ]"
              ></div> -->
                  <img
                    v-if="!playStatus && items && items.strokes_image_url"
                    :src="items.strokes_image_url"
                    alt=""
                  />
                  <!-- <FreeWriteQP
                :id="'cans' + index + indexs"
                :ref="'cans'"
                :height="256"
                :width="256"
              /> -->
                </div>
              </div>
            </template>
          </div>
          <span
            v-if="item.en"
            class="en"
            :style="{
              marginLeft: item.en.length < 12 ? '' : enMargin + 'px',
              textAlign: item.en.length < 12 ? 'center' : 'left',
              width: item.en.length < 12 ? pinyinWidth + 'px' : ''
            }"
            >{{ item.en }}</span
          >
        </template>
      </div>
    </div>
    <el-dialog
      :visible.sync="isPraShow"
      :show-close="false"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      :width="isPhone ? '100%' : '504px'"
      class="practiceBox practiceBoxStrock"
      v-if="isPraShow"
    >
      <Practice
        @changePraShow="changePraShow"
        :cur="curData"
        :theme-color="themeColor"
      />
    </el-dialog>
    <!-- <div v-if="isPraShow" class="practiceBox practiceBoxStrock">
      <Practice
        :change-pra-show="changePraShow"
        :cur="curData"
        :theme-color="themeColor"
      />
    </div> -->
    <el-dialog
      :visible.sync="ifFreeShow"
      :show-close="false"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      width="320px"
      top="0"
      class="practiceBox practiceBoxStrock practiceBoxCenter"
      v-if="ifFreeShow"
    >
      <FreewriteLettle
        ref="freePaint"
        :change-pra-show="changePraShow"
        :theme-color="themeColor"
        :current-tree-i-d="currentTreeID"
        :current-hz="currentHz"
        :curren-hz-data="currenHzData"
        :row-index="activeIndex"
        :col-index="activeColIndex"
        :closeif-free-show="closeifFreeShow"
        :task-model="TaskModel"
        @changeCurQue="changeCurQue"
        @deleteWriteRecord="deleteWriteRecord"
      />
    </el-dialog>
    <!-- <div v-if="ifFreeShow" class="practiceBox practiceBoxStrock">
      <FreewriteLettle
        ref="freePaint"
        :change-pra-show="changePraShow"
        :theme-color="themeColor"
        :current-tree-i-d="currentTreeID"
        :current-hz="currentHz"
        :curren-hz-data="currenHzData"
        :row-index="activeIndex"
        :col-index="activeColIndex"
        :closeif-free-show="closeifFreeShow"
        :task-model="TaskModel"
        @changeCurQue="changeCurQue"
        @deleteWriteRecord="deleteWriteRecord"
      />
    </div> -->
  </div>
</template>

<script>
import Strockplayredline from "../preview/components/Strockplayredline.vue";
import Practice from "../preview/components/Practice.vue";
import FreewriteLettle from "../preview/components/FreewriteLettle.vue";
import { getContentFile, LearnWebSI } from "../../../api/ajax";
import FreeWriteQP from "./components/FreewriteWord.vue";
export default {
  components: { Strockplayredline, Practice, FreewriteLettle, FreeWriteQP },
  props: [
    "curQue",
    "themeColor",
    "indexStr",
    "currentTreeID",
    "TaskModel",
    "judgeAnswer",
    "isPhone"
  ],
  data() {
    return {
      isPraShow: false,
      curData: null,
      ifFreeShow: false,
      freeImg: [],
      activeIndex: null,
      activeColIndex: null,
      currentHz: "", // 当前汉字
      currenHzData: null, // 当前汉字数据
      playStatus: false, // 播放状态
      userAnswer: {
        writeModel: {} // 生词/取词模式
      },
      pinyinWidth: 91,
      enMargin: 13
    };
  },
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let _this = this;
    if (!_this.curQue.Bookanswer) {
      _this.curQue.Bookanswer = JSON.parse(JSON.stringify(_this.userAnswer));
    }
    // if (_this.TaskModel != "ANSWER") {
    //   _this.handleData();
    // } else {
    _this.handleAnswerData();
    // }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    playHanzi(rowIndex, colIndex, item) {
      if (this.playStatus) {
        this.$message({
          showClose: true,
          message: "请等待播放完成",
          type: "warning",
          duration: 2000
        });
        return;
      }
      this.playStatus = true;
      let ref = null;
      this.$refs.cans.forEach(items => {
        if (items.$el.id == `cans${rowIndex}${colIndex}`) {
          ref = items;
        }
      });
      ref.reset();

      let c = document.getElementById(`cans${rowIndex}${colIndex}`);
      let cxt = document
        .getElementById(`cans${rowIndex}${colIndex}`)
        .getContext("2d");
      cxt.clearRect(0, 0, c.width, c.height);
      let history = item.history;
      const len = item.history.length;
      let i = 0;
      const runner = () => {
        i++;
        if (i < len) {
          ref.draw(null, history[i][0], history[i][1]);
          requestAnimationFrame(runner);
        } else {
          this.playStatus = false;
        }
      };
      requestAnimationFrame(runner);
    },
    // 处理数据
    handleData() {
      let _this = this;
      let MethodName = "teaching-practice_manager-GetMyHZHandwrittenRecordList";
      this.curQue.option.forEach((item, index) => {
        let data = {
          courseware_id: this.currentTreeID,
          hz: item.con,
          search_scope: 1,
          count_limit: 6
        };
        LearnWebSI(MethodName, data).then(res => {
          let imgarr = res.hz_handwritten_record_list;
          let newimgarr = imgarr.map(it => {
            it.history = JSON.parse(it.strokes_content);
            return it;
          });
          if (newimgarr.length < 6) {
            let num = 6 - newimgarr.length;
            for (let i = 0; i < num; i++) {
              newimgarr.push({});
            }
          }
          if (
            !item.imgOrText ||
            (item.imgOrText === "text" && !item.con.trim()) ||
            (item.imgOrText === "image" && item.img_list.length === 0)
          ) {
            newimgarr.push({});
          }
          item.imgarr = newimgarr;
          this.$forceUpdate();
        });
      });
    },
    // 处理数据
    handleAnswerData() {
      let _this = this;
      _this.curQue.option.forEach((item, index) => {
        let con =
          item.imgOrText == "text"
            ? item.con
            : item.img_list && item.img_list.length > 0 && item.img_list[0].id
            ? item.img_list[0].id
            : index;
        let arr = [];
        if (
          _this.curQue.Bookanswer.writeModel &&
          _this.curQue.Bookanswer.writeModel[con]
        ) {
          arr = _this.curQue.Bookanswer.writeModel[con].map(it => {
            if (it && it.strokes_content) {
              it.history = JSON.parse(it.strokes_content);
            }

            return it;
          });
        } else {
          for (let i = 0; i < this.curQue.numberList.con; i++) {
            arr.push(null);
          }
          if (
            !item.imgOrText ||
            (item.imgOrText === "text" && !item.con.trim()) ||
            (item.imgOrText === "image" && item.img_list.length === 0)
          ) {
            arr.push(null);
          }
          //   arr = [null, null, null, null, null, null, null];
        }
        item.imgarr = arr;
        this.pinyinWidth = Number(
          730 / (Number(this.curQue.numberList.con) + 1)
        );
        this.enMargin =
          (Number(730 / (Number(this.curQue.numberList.con) + 1)) - 64) / 2;
      });
      console.log(this.curQue);
    },
    changePraShow() {
      this.isPraShow = false;
      this.ifFreeShow = false;
      // this.freeImg[this.activeIndex][this.activeColIndex] =
      //   this.$refs.freePaint.imgSrc;
    },
    async writeWord(words, pinyin) {
      this.activeIndex = null;
      this.activeColIndex = null;
      const MethodName = "tool-ChineseSCConvert";
      const data = {
        text: words,
        swap_mode: "S-C"
      };
      let TChinese = await getContentFile(MethodName, data);
      this.curData = {
        stem: [
          {
            con: words || "",
            pinyin: pinyin || "",
            mp3_url: "",
            TChinese: TChinese.text
          }
        ]
      };
      this.isPraShow = true;
    },
    closeifFreeShow(data, rowIndex, colIndex) {
      this.curQue.option[rowIndex].imgarr[colIndex] = data;
      this.ifFreeShow = false;
      this.freeWrite(data, rowIndex, colIndex);
      this.ifFreeShow = false;
      this.$forceUpdate();
    },
    freeWrite(imgUrl, index, indexs) {
      let _this = this;
      if (_this.TaskModel == "ANSWER" && !imgUrl) {
        return;
      }
      _this.ifFreeShow = true;
      _this.activeIndex = index;
      _this.activeColIndex = indexs;
      _this.currentHz =
        _this.curQue.option[index].imgOrText == "text"
          ? _this.curQue.option[index].con
          : _this.curQue.option[index].img_list[0]
          ? _this.curQue.option[index].img_list[0].id
          : index;
      _this.currenHzData = imgUrl;
      console.log(_this.curQue);
    },
    // 删除记录
    deleteWriteRecord(rowIndex, colIndex, currentHz) {
      this.$set(this.curQue.option[rowIndex].imgarr, colIndex, {});
      let answer = {
        hz: currentHz,
        strokes_content: "",
        strokes_image_url: ""
      };
      this.changeCurQue(answer, colIndex);
      this.$forceUpdate();
    },
    changeCurQue(answer, colIndex) {
      if (answer) {
        let writeModel = this.curQue.Bookanswer.writeModel;
        let hz = answer.hz;
        if (writeModel.hasOwnProperty(hz)) {
          writeModel[hz][colIndex] = answer;
        } else {
          writeModel[hz] = [];
          for (let i = 0; i < 6; i++) {
            writeModel[hz].push(null);
          }
          writeModel[hz][colIndex] = answer;
        }
      }
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.NewWordShow {
  width: 100%;
  margin-bottom: 24px;
  h2 {
    margin: 0 0 8px 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
  }
  .item-box {
    padding-bottom: 8px;
    padding: 0 4px;
    background: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    .item-pre {
      padding: 9px 20px;
    }
    .pinyin {
      text-align: center;
      display: block;
      margin-bottom: 4px;
      font-family: Sans-GBNPC;
      color: #000;
    }
    .en {
      display: block;
      margin-top: 4px;
      font-family: robot, "alabo";
    }
    .item {
      box-sizing: border-box;
      // width: 66px;
      cursor: pointer;
      display: flex;
      flex-flow: wrap;
      align-items: flex-end;
      > p {
        white-space: nowrap;
        :nth-child(1) {
          font-family: "GB-PINYINOK-B";
        }
        :nth-child(2) {
          font-family: "robot", "alabo";
          margin-left: 4px;
        }
        color: #2c2c2c;
        font-size: 14px;
        line-height: 130%;
        text-align: center;
        margin: 0 0 8px 0;
      }
    }
    .strockplay {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 64px;
      height: 64px;
    }
    .strockplayRedInner {
      width: 64px;
      height: 64px;
    }
    .bwc-line {
      width: 1px;
      height: 62px;
      background: #de4444;
    }
    .con-box {
      width: 66px;
      height: 66px;
      display: flex;
      border: 1px solid #de4444;
      border-radius: 8px;
      overflow: hidden;
      margin: 0 auto;
      .img-box {
        background: #fff url("../../../assets/NPC/chinaTianRed.png") center
          no-repeat;
        background-size: cover;
        .img_url {
          width: 64px;
          height: 64px;
        }
      }
    }
    .strockplay-newWord {
      width: 64px;
      height: 64px;
      background: #fff url("../../../assets/NPC/chinaTianRed.png") center
        no-repeat;
      background-size: cover;
      position: relative;
      .strock-play-box {
        position: absolute;
        cursor: pointer;
      }
      canvas {
        width: 64px;
        height: 64px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .practiceBox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    &.practiceBoxStrock {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 0px;
    }
  }
  &-phone {
    .item-box {
      .item-pre {
        padding: 10px 4px;
      }
      .item-info {
        .pinyin {
          width: 66px !important;
        }
      }
      .con-box {
        margin: 0;
      }
      .item {
        margin-top: 10px;
        gap: 10px;
        justify-content: start;
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .NewWordShow {
    .item-box {
      .item {
        .bwc-line {
          background: #bf875e;
        }
      }
      .con-box {
        border: 1px solid #bf875e;
        .img-box {
          background: #fff url("../../../assets/NPC/chinaTianYellow.png") center
            no-repeat;
          background-size: cover;
        }
        .blank-item {
          background: #fff url("../../../assets/NPC/chinaTianYellow.png") center
            no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .NewWordShow {
    .item-box {
      .item {
        .bwc-line {
          background: #24b99e;
        }
      }
      .con-box {
        border: 1px solid #24b99e;
        .img-box {
          background: #fff url("../../../assets/NPC/chinaTianGreen.png") center
            no-repeat;
          background-size: cover;
        }
        .blank-item {
          background: #fff url("../../../assets/NPC/chinaTianGreen.png") center
            no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.NPC-Big-Book-preview-red {
  .strockplay-newWord {
    .strock-play-box {
      width: 16px !important;
      height: 16px !important;
      right: -1px;
      top: 0;
      background: url("../../../assets/NPC/strock-play-red-click.png") center
        no-repeat;
      background-size: cover;
    }
    .character-target-div {
      // background-color: initial;
    }
  }
}
.NPC-Big-Book-preview-green {
  .strockplay-newWord {
    .strock-play-box {
      width: 16px !important;
      height: 16px !important;
      right: -1px;
      top: 0;
      background: url("../../../assets/NPC/strock-play-green-click.png") center
        no-repeat;
      background-size: cover;
    }
    .character-target-div {
      // background-color: initial;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .strockplay-newWord {
    .strock-play-box {
      width: 16px !important;
      height: 16px !important;
      right: -1px;
      top: 0;
      background: url("../../../assets/NPC/strock-play-yellow-click.png") center
        no-repeat;
      background-size: cover;
    }
    .character-target-div {
      // background-color: initial;
    }
  }
}
.practiceBoxCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>