GCLS_Page_Book_Component_NPC/src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

<!--  -->
<template>
  <div class="NNPE-ArticleView" v-if="curQue">
    <div
      class="aduioLine-box"
      v-if="
        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
      "
    >
      <AudioLine
        audioId="diaPhraAudio"
        :mp3="curQue.mp3_list[0].id"
        :getCurTime="getCurTime"
        :mp3Source="curQue.mp3_list[0].source"
        ref="audioLine"
      />
    </div>
    <template v-if="resArr.length > 0">
      <div class="NPC-sentences-list">
        <div class="NPC-article-empty">
          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
          <div class="empty-right"></div>
        </div>
        <p
          :class="['notice', isHasRemark ? 'hasRemark' : '']"
          v-if="curQue.notice"
        >
          {{ curQue.notice }}
        </p>
        <div
          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
          v-for="(item, index) in resArr"
          :key="'detail' + index"
        >
          <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
            <RoleChs :curRole="item.roleDetail" :type="1" />
            <div class="wordsList-box">
              <img
                :src="articleImg[index]"
                v-if="articleImg[0] && index == 0"
              />
              <div
                class="roleDetail"
                v-if="item.roleDetail.detail.wordsList.length > 0"
              >
                <span class="pinyin">{{
                  item.roleDetail.detail.wordsList | handlePinyin
                }}</span>
                <span class="chs">{{
                  item.roleDetail.detail.wordsList | handleChs
                }}</span>
              </div>
              <div
                class="para-con"
                :style="{ background: item.roleDetail.color.bg }"
              >
                <div
                  class="NNPE-words"
                  v-for="(pItem, pIndex) in item.wordsList"
                  :key="'wordsList' + pIndex"
                  :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
                  @click="showWordDetail($event, pItem.chs)"
                >
                  <template v-if="!pItem.width">
                    <template v-if="pItem.isShow">
                      <template
                        v-if="
                          item.wordsList[pIndex + 1] &&
                          item.wordsList[pIndex + 1].chs &&
                          chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
                        "
                      >
                        <span class="NNPE-words-box">
                          <span
                            v-if="curQue.pyPosition == 'top'"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                            ]"
                            >{{ pItem.pinyin }}</span
                          >
                          <span
                            class="NNPE-chs"
                            :class="[
                              newWordList.indexOf(pItem.chs) > -1
                                ? 'newActive'
                                : '',
                            ]"
                            >{{ pItem.chs }}</span
                          >
                          <span
                            v-if="curQue.pyPosition == 'bottom'"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                            ]"
                            >{{ pItem.pinyin }}</span
                          >
                        </span>
                        <span class="NNPE-words-box">
                          <span
                            v-if="curQue.pyPosition == 'top'"
                            class="NNPE-pinyin"
                            style="text-align: left"
                            :class="[
                              noFont.indexOf(
                                item.wordsList[pIndex + 1].pinyin
                              ) > -1
                                ? 'noFont'
                                : '',
                            ]"
                            >{{ item.wordsList[pIndex + 1].pinyin }}</span
                          >
                          <span class="NNPE-chs" style="text-align: left">{{
                            item.wordsList[pIndex + 1].chs
                          }}</span>
                          <span
                            v-if="curQue.pyPosition == 'bottom'"
                            class="NNPE-pinyin"
                            :class="[
                              noFont.indexOf(
                                item.wordsList[pIndex + 1].pinyin
                              ) > -1
                                ? 'noFont'
                                : '',
                            ]"
                            style="text-align: left"
                            >{{ item.wordsList[pIndex + 1].pinyin }}</span
                          >
                        </span>
                      </template>
                      <template v-else>
                        <span
                          v-if="curQue.pyPosition == 'top'"
                          class="NNPE-pinyin"
                          :class="[
                            pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                          ]"
                          @click.stop="viewNotes($event, pItem.pinyin)"
                          >{{ pItem.pinyin }}</span
                        >
                        <span
                          v-if="pItem.chs != '#'"
                          class="NNPE-chs"
                          :class="[
                            newWordList.indexOf(pItem.chs) > -1
                              ? 'newActive'
                              : '',
                            pItem.padding ? 'padding' : '',
                          ]"
                          >{{ pItem.chs }}</span
                        >
                        <span
                          v-if="curQue.pyPosition == 'bottom'"
                          class="NNPE-pinyin"
                          :class="[
                            pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                          ]"
                          >{{ pItem.pinyin }}</span
                        >
                      </template>
                    </template>
                  </template>
                  <template v-else>
                    <span
                      :style="{
                        height: pItem.height + 'px',
                        width: pItem.width + 'px',
                      }"
                    ></span>
                  </template>
                </div>
                <div style="clear: both; overflow: hidden"></div>
                <div v-if="item.enwords" class="enwords">
                  {{ item.enwords }}
                </div>
              </div>
              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
            </div>
          </div>
          <div class="remarkBox remark-top">
            <RemarkChs :remarkDetail="item.remarkDetail" />
          </div>
        </div>
        <div class="NPC-article-empty NPC-article-empty-bottom">
          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
          <div class="empty-right"></div>
        </div>
        <div class="dia-article-record">
          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
        </div>
      </div>
    </template>
    <template v-if="isShow">
      <div
        ref="wordcard"
        class="NNPE-wordDetail"
        :style="{ top: top + 'px', left: left + 'px' }"
      >
        <Wordcard
          :word="word"
          :changeWordCard="changeWordCard"
          :themeColor="themeColor"
          :currentTreeID="currentTreeID"
        />
      </div>
    </template>
    <template v-if="isNoteShow">
      <div
        ref="notecard"
        class="NNPE-wordDetail"
        :style="{ top: top + 'px', left: left + 'px' }"
      >
        <Notecard :item="curNoteCon" :changeCard="changeCard" />
      </div>
    </template>
  </div>
</template>

<script>
import { timeStrToSen } from "@/utils/index";
import AudioLine from "../AudioLine.vue";
import Wordcard from "../components/Wordcard.vue"; // 卡片
import Notecard from "../components/Notecard.vue"; // 注释
import RoleChs from "./RoleChs.vue";
import RemarkChs from "./RemarkChs.vue";
import Soundrecord from "../Soundrecord.vue";
export default {
  name: "PhraseModelChs",
  props: [
    "curQue",
    "bodyLeft",
    "NNPENewWordList",
    "NNPEAnnotationList",
    "colorBox",
    "themeColor",
    "noFont",
    "currentTreeID",
  ],
  components: {
    AudioLine,
    Wordcard,
    RoleChs,
    RemarkChs,
    Soundrecord,
    Notecard,
  },
  filters: {
    handlePinyin(wordsList) {
      let str = "";
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += item.pinyin + " ";
        } else {
          str += item.pinyin;
        }
      });
      return str;
    },
    handleChs(wordsList) {
      let str = "";
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += item.chs + " ";
        } else {
          str += item.chs;
        }
      });
      return str;
    },
  },
  data() {
    return {
      resArr: [],
      curTime: 0, //单位s
      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
      NumberList: [
        "①",
        "②",
        "③",
        "④",
        "⑤",
        "⑥",
        "⑦",
        "⑧",
        "⑨",
        "⑩",
        "⑪",
        "⑫",
        "⑬",
        "⑭",
        "⑮",
        "⑯",
        "⑰",
        "⑱",
        "⑲",
        "⑳",
      ],
      newWords: ["鱼", "辩礼义"],
      oldHz: "",
      hz: "",
      clientY: "",
      top: 0,
      left: 0,
      articleImg: {}, // 文章图片
      newWordList: [],
      word: null,
      isShow: false,
      screenHeight: 0,
      cardHeight: 0,
      isHasRemark: false,
      clickType: "",
      isNoteShow: false,
      noteNum: "",
      oldNoteNum: "",
      curNoteCon: null,
    };
  },
  computed: {},
  watch: {
    hz: {
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          _this.handleNewWords(val, _this.top, _this.left);
        }
      },
      // 深度观察监听
      deep: true,
    },
    isShow: {
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          setTimeout(() => {
            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
              _this.top = _this.clientY + 20;
            } else {
              _this.top = _this.clientY - _this.cardHeight - 30;
            }
          }, 50);
        }
      },
      // 深度观察监听
      deep: true,
    },
    noteNum: {
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          _this.handleNote(val);
        }
      },
      // 深度观察监听
      deep: true,
    },
    isNoteShow: {
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          setTimeout(() => {
            _this.cardHeight = _this.$refs.notecard.offsetHeight;
            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
              _this.top = _this.clientY + 20;
            } else {
              _this.top = _this.clientY - _this.cardHeight - 30;
            }
          }, 50);
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    handleWav() {},
    getCurTime(curTime) {
      this.curTime = curTime;
    },
    handleData() {
      let resArr = [];
      let leg = this.curQue.detail.length;
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      curQue.detail.forEach((dItem, dIndex) => {
        let roleDetail = this.getRole(dItem);
        let remarkDetail = dItem.remark;
        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
          this.isHasRemark = true;
        }
        let paraArr = [];
        dItem.wordsList.forEach((sItem, sIndex) => {
          sItem.forEach((wItem, wIndex) => {
            //this.judgePad(sItem, wItem, wIndex);
            this.mergeWordSymbol(wItem);
            let obj = {
              paraIndex: dIndex, //段落索引
              sentIndex: sIndex, //在段落中句子索引
              wordIndex: wIndex, //单词的索引
              pinyin: wItem.pinyin,
              chs: wItem.chs,
              padding: true, //wItem.padding,
              className: wItem.className,
              isShow: wItem.isShow,
              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
            };
            paraArr.push(obj);
          });
        });
        let enwords =
          dItem.sentencesEn && dItem.sentencesEn.length > 0
            ? dItem.sentencesEn.join(" ")
            : "";
        let paraObj = {
          wordsList: paraArr,
          enwords: enwords,
          roleDetail: roleDetail,
          remarkDetail: remarkDetail,
        };
        resArr.push(paraObj);
      });
      this.resArr = resArr;
      console.log(this.resArr);

      // 循环文章图片
      if (curQue.img_list) {
        curQue.img_list.forEach((item) => {
          this.articleImg[item.imgNumber] = item.url;
        });
      }
    },
    //词和标点合一起
    mergeWordSymbol(wItem) {
      if (this.chsFhList.indexOf(wItem.chs) > -1) {
        wItem.isShow = false;
      } else {
        wItem.isShow = true;
      }
    },
    //获取角色
    getRole(dItem) {
      let roleIndex = dItem.roleIndex;
      let resObj = null;
      let roleList = JSON.parse(JSON.stringify(this.curQue.roleList));
      for (let i = 0; i < roleList.length; i++) {
        let item = roleList[i];
        if (item.id == roleIndex) {
          resObj = item;
          resObj.color = this.colorBox[i];
          break;
        }
      }

      return resObj;
    },
    //判断是否有padding
    judgePad(sItem, wItem, curIndex) {
      let leg = sItem.length;
      if (curIndex < leg - 1) {
        let nextIndex = curIndex + 1;
        let chs = sItem[nextIndex].chs;
        if (
          this.chsFhList.indexOf(chs) > -1 ||
          this.chsFhList.indexOf(wItem.chs) > -1
        ) {
          wItem.padding = false;
        } else {
          wItem.padding = true;
        }
        if (this.enFhList.indexOf(wItem.pinyin) > -1) {
          wItem.className = "textLeft";
        }
      }
    },
    //转化时间
    handleTimeList(list) {
      let listRes = [];
      list.forEach((item) => {
        let res = timeStrToSen(item);
        listRes.push(res);
      });
      return listRes;
    },
    //点击播放某个句子
    handleChangeTime(time) {
      this.curTime = time;
      this.$refs.audioLine.onTimeupdateTime(time);
    },

    handleNewword() {
      let NewWordList = [];
      this.NNPENewWordList.forEach((item) => {
        item.forEach((wItem) => {
          console.log(wItem.new_word);
          NewWordList.push(wItem.new_word);
        });
      });
      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
    },

    showWordDetail(e, word) {
      let _this = this;
      if (_this.oldHz != word) {
        this.isShow = false;
        setTimeout(() => {
          _this.hz = word;
        }, 50);
      }
      _this.clientY = e.clientY;
      let left = e.clientX;
      let width = 0;

      if (word.length == 1 || word.length == 2) {
        width = 304;
      } else if (word.length == 3 || word.length == 4) {
        width = 432;
      } else if (word.length > 3) {
        width = 560;
      }

      if (left - this.bodyLeft > this.contentWidth / 2) {
        _this.left = left - width + 10;
      } else {
        _this.left = left;
      }
    },
    hideWordDetail() {
      this.isShow = false;
    },
    changeWordCard(isShow) {
      this.isShow = isShow;
      this.oldHz = "";
      this.hz = "";
    },
    // 处理分词数据
    handleNewWords(val, top, left) {
      this.isShow = true;
      this.word = null;
      for (let i = 0; i < this.NNPENewWordList.length; i++) {
        let pItem = this.NNPENewWordList[i];
        for (let j = 0; j < pItem.length; j++) {
          let item = pItem[j];
          if (item.new_word.trim() == val.trim()) {
            let wordlist = val.split("");
            this.word = { list: wordlist, detail: item, top: top, left: left };
            break;
          }
        }
      }
      this.oldHz = val;
    },
    viewNotes(e, noteNum) {
      let _this = this;
      _this.clickType = "note";
      let noteIndex = "";
      if (_this.NumberList.indexOf(noteNum) > -1) {
        for (let i = 0; i < _this.NumberList.length; i++) {
          if (_this.NumberList[i] == noteNum) {
            noteIndex = "" + i + "";
            break;
          }
        }
      }
      this.showNoteDetail(e, noteIndex);
    },
    showNoteDetail(e, noteNum) {
      let _this = this;
      if (_this.oldNoteNum != noteNum) {
        this.isNoteShow = false;
        setTimeout(() => {
          _this.noteNum = noteNum;
        }, 50);
      }
      _this.clientY = e.clientY;
      let left = e.clientX;
      let width = 442;

      if (left - this.bodyLeft > this.contentWidth / 2) {
        _this.left = left - width + 10;
      } else {
        _this.left = left;
      }
    },
    // 处理注释数据
    handleNote(val) {
      let _this = this;
      _this.isNoteShow = true;
      _this.oldNoteNum = val;
      let noteIndex = Number(val);
      if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
        _this.curNoteCon = _this.NNPEAnnotationList[noteIndex]
          ? _this.NNPEAnnotationList[noteIndex]
          : null;
      }
    },
    changeCard(isShow) {
      let _this = this;
      _this.isNoteShow = isShow;
      _this.oldNoteNum = "";
      _this.noteNum = "";
    },
    getScreenHeight() {
      this.screenHeight = window.innerHeight;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.curQue);
    if (this.curQue) {
      this.handleData();
    }
    console.log("生词");
    console.log(this.NNPENewWordList);
    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
      this.handleNewword();
    }
    $(window).resize(() => {
      this.getScreenHeight();
    });
    this.getScreenHeight();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  width: 100%;
  .NPC-sentences-list {
    .NPC-article-empty {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      > div {
        height: 24px;
        &.empty-left {
          width: 100%;
          box-sizing: border-box;

          &.hasRemark {
            width: 553px;
            box-sizing: border-box;
            border-right: 1px rgba(0, 0, 0, 0.1) solid;
          }
        }
        &.empty-right {
          flex: 1;
        }
      }
      &-bottom {
        > div {
          height: 40px;
        }
      }
    }
    .dia-article-record {
      width: 100%;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      .luyin-box {
        justify-content: start;
        padding: 8px 12px;
        height: 40px;
        width: 280px;
        justify-content: flex-start;
      }
    }
  }
  .NNPE-detail {
    clear: both;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    &.active {
      background: rgba(0, 0, 0, 0.06);
    }
    .article-content {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 24px 8px 24px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      &.hasRemark {
        width: 553px;
        border-right: 1px rgba(0, 0, 0, 0.1) solid;
        padding: 8px 0px 8px 23px;
      }
      &.paraLast {
        padding-bottom: 24px;
      }
    }
    .enwords {
      font-family: "robot";
      font-weight: normal;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
    }
    .NNPE-words {
      float: left;
      &-box {
        float: left;
        > span {
          display: block;
          &.NNPE-pinyin {
            font-family: "GB-PINYINOK-B";
            font-weight: normal;
            font-size: 14px;
            line-height: 22px;
            color: #000000;
            height: 21px;
            &.noFont {
              font-family: initial;
            }
            &.textLeft {
              text-align: left;
            }
          }
          &.NNPE-chs {
            font-family: "FZJCGFKTK";
            font-size: 20px;
            line-height: 28px;
            color: #000000;
            &.active {
              background: rgba(60, 200, 99, 0.2);
            }
            &.wordActive {
              color: #de4444;
            }
            &.newActive {
              color: #de4444;
            }
          }
          &.padding {
            padding: 0 3px;
          }
        }
      }
      &.textLeft {
        text-align: left;
      }
      &.textCenter {
        text-align: center;
      }
      > span {
        display: block;
        &.NNPE-pinyin {
          font-family: "GB-PINYINOK-B";
          font-weight: normal;
          font-size: 14px;
          line-height: 22px;
          color: #000000;
          height: 21px;
          &.noFont {
            font-family: initial;
          }
          &.textLeft {
            text-align: left;
          }
        }
        &.NNPE-chs {
          font-family: "FZJCGFKTK";
          font-size: 20px;
          line-height: 28px;
          color: #000000;
          &.active {
            background: rgba(60, 200, 99, 0.2);
          }
          &.wordActive {
            color: #de4444;
          }
          &.newActive {
            color: #de4444;
          }
        }
        &.padding {
          padding: 0 3px;
        }
      }
    }
    &.NNPE-detail-title {
      .wordsList-box {
        > div {
          display: flex;
          justify-content: center;
        }
      }
    }
    .index {
      width: 48px;
      box-sizing: border-box;
      padding: 8px;
      text-align: right;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      b {
        font-weight: 400;
        color: #000000;
        line-height: 1.5;
      }
    }

    .wordsList-box {
      width: 100%;
      padding: 0px 24px 0px 8px;
      clear: both;
      overflow: hidden;
      .roleDetail {
        height: 36px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .pinyin {
          font-family: "GB-PINYINOK-B";
          font-size: 14px;
          line-height: 22px;
          color: rgba(0, 0, 0, 0.85);
          margin-right: 4px;
        }
        .chs {
          font-family: "FZJCGFKTK";
          font-size: 16px;
          line-height: 24px;
          color: rgba(0, 0, 0, 0.85);
        }
      }
      > .para-con {
        float: left;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        padding: 8px 12px 8px 12px;
        border-radius: 8px;
      }
      > img {
        width: 100%;
        display: block;
      }
    }
  }
  .remarkBox {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    &.remark72 {
      padding-top: 72px;
    }
    &.remark-top {
      padding-top: 44px;
    }
  }
  .NNPE-wordDetail {
    position: fixed;
    z-index: 9999;
  }
}
</style>