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

<!--  -->
<template>
  <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-if="sentList">
    <div class="voicefull-top">
      <div class="top-left">
        <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
          <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
            <span
              :class="['bg-white', bgIndex == 0 ? 'active' : '']"
              @click="changeBg(0)"
            ></span>
          </div>
          <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
            <span
              :class="['bg-green', bgIndex == 1 ? 'active' : '']"
              @click="changeBg(1)"
            ></span>
          </div>
        </div>
        <div class="set-fontSize">
          <span
            :class="['font-jian-black', bgIndex == 1 ? 'font-jian-yellow' : '']"
            @click="setFontSize('-')"
          ></span>
          <span
            :class="['font-img-black', bgIndex == 1 ? 'font-jian-yellow' : '']"
          ></span>
          <span
            :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow' : '']"
            @click="setFontSize('+')"
          ></span>
        </div>
      </div>
      <div class="top-middle">
        <template v-if="mp3">
          <AudioLineSentence
            :key="'sent' + curSentIndex"
            :mp3="mp3"
            :getCurTime="getCurTime"
            ref="audioLineSent"
            :audioId="'artPraAudioId' + curSentIndex"
            :stopAudio="stopAudio"
            :width="120"
            :hideSlider="true"
            :bg="bg"
            :ed="ed"
            :maxTime="maxTime"
            :bgIndex="bgIndex"
            :isRepeat="isRepeat"
            @playChange="playChange"
          />
        </template>
        <div
          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
          @click="changeStatus('isRepeat')"
        >
          <span
            :class="[
              'repeat-icon',
              !isRepeat ? 'disabled' : '',
              isRepeat && bgIndex == 1 ? 'repeat-icon-yellow' : '',
            ]"
          ></span>
        </div>
        <div
          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
          @click="changeStatus('isShowPY')"
        >
          <span
            :class="[
              'pinyin-icon',
              !isShowPY ? 'disabled' : '',
              isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
            ]"
          ></span>
        </div>
        <div
          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
          @click="changeStatus('isShowEN')"
        >
          <span
            :class="[
              'en-icon',
              item && !item.enwords ? 'disabled' : '',
              !isShowEN ? 'disabled' : '',
              isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
            ]"
          ></span>
        </div>
        <div
          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
          @click="addColl('isColl')"
        >
          <span
            :class="[
              'coll-icon',
              !isColl ? 'disabled' : '',
              isColl && bgIndex == 1 ? 'coll-icon-yellow' : '',
            ]"
          ></span>
        </div>
      </div>
      <div
        :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
        @click="exitFullScreen"
      >
        <span
          :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
        ></span>
      </div>
    </div>
    <div
      class="voicefull-content"
      v-if="item"
      @mousemove="showPrevNext(true)"
      @mouseleave="showPrevNext(false)"
    >
      <div
        :class="[
          'vc-left vc-left-grey',
          isShowPN && bgIndex == 0 ? 'vc-left-black' : '',
          isShowPN && bgIndex == 1 ? 'vc-left-white' : '',
          curSentIndex == 0 ? 'hidden' : '',
        ]"
        @click="prevSentence"
      ></div>
      <div class="vc-main">
        <div class="NNPE-words-box">
          <div
            class="NNPE-words"
            v-for="(pItem, pIndex) in item"
            :key="'wordsList' + pIndex"
            :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
            @dblclick="showWordDetail($event, pItem)"
            @click="playWord(pItem)"
          >
            <template v-if="!pItem.width">
              <template v-if="pItem.isShow">
                <template
                  v-if="
                    item[pIndex + 1] &&
                    item[pIndex + 1].chs &&
                    chsFhList.indexOf(item[pIndex + 1].chs) > -1
                  "
                >
                  <span class="NNPE-words-box">
                    <template v-if="curQue.pyPosition == 'top'">
                      <span
                        v-if="isShowPY"
                        class="NNPE-pinyin"
                        :class="[
                          pItem.className ? pItem.className : '',
                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                          bgIndex == 1 ? 'font-white' : '',
                        ]"
                        :style="'font-size:' + pySize + 'px'"
                        >{{ pItem.pinyin }}</span
                      >
                    </template>
                    <span
                      class="NNPE-chs"
                      :class="[
                        pItem.padding && isShowPY ? 'padding' : '',
                        curQue.pyPosition == 'top' ? 'bottom' : '',
                      ]"
                    >
                      <template>
                        <span
                          v-for="(wItem, wIndex) in pItem.leg"
                          :key="'ci' + wIndex + pIndex"
                          :class="[
                            isPlaying &&
                            pItem.timeList &&
                            pItem.timeList[wIndex] &&
                            curTime >= pItem.timeList[wIndex].wordBg &&
                            curQue.wordTime &&
                            curQue.wordTime[curSentIndex] &&
                            curTime <= curQue.wordTime[curSentIndex].ed
                              ? bgIndex == 0
                                ? 'active'
                                : 'active-yellow'
                              : '',
                            bgIndex == 1 ? 'font-white' : '',
                            bgIndex == 0 && wordIndex == pItem.wordIndex
                              ? 'wordActive'
                              : '',
                            bgIndex == 1 && wordIndex == pItem.wordIndex
                              ? 'wordActive-blue'
                              : '',
                          ]"
                          :style="'font-size:' + hzSize + 'px'"
                          >{{ pItem.chs[wIndex] }}</span
                        >
                      </template>
                    </span>
                    <template v-if="curQue.pyPosition == 'bottom'">
                      <span
                        v-if="isShowPY"
                        class="NNPE-pinyin bottom"
                        :class="[
                          pItem.className ? pItem.className : '',
                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                          bgIndex == 1 ? 'font-white' : '',
                        ]"
                        :style="'font-size:' + pySize + 'px'"
                        >{{ pItem.pinyin }}</span
                      >
                    </template>
                  </span>
                  <span class="NNPE-words-box">
                    <template v-if="curQue.pyPosition == 'top'">
                      <span
                        v-if="isShowPY"
                        :class="[
                          'NNPE-pinyin',
                          noFont.indexOf(item[pIndex + 1].pinyin) > -1
                            ? 'noFont'
                            : '',
                          bgIndex == 1 ? 'font-white' : '',
                        ]"
                        :style="{ fontSize: pySize + 'px', textAlign: left }"
                        >{{ item[pIndex + 1].pinyin }}</span
                      >
                    </template>
                    <span
                      :class="[
                        'NNPE-chs',
                        curQue.pyPosition == 'top' ? 'bottom' : '',
                      ]"
                      :style="{ fontSize: hzSize + 'px', textAlign: left }"
                    >
                      <span
                        :class="[
                          isPlaying &&
                          pItem.timeList[pItem.leg - 1] &&
                          curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                          curQue.wordTime &&
                          curQue.wordTime[curSentIndex] &&
                          curTime <= curQue.wordTime[curSentIndex].ed
                            ? bgIndex == 0
                              ? 'active'
                              : 'active-yellow'
                            : '',
                          bgIndex == 1 ? 'font-white' : '',
                        ]"
                        :style="{ fontSize: pySize + 'px' }"
                        >{{ item[pIndex + 1].chs }}</span
                      >
                    </span>
                    <template v-if="curQue.pyPosition == 'bottom'">
                      <span
                        v-if="isShowPY"
                        :class="[
                          'NNPE-pinyin',
                          noFont.indexOf(item[pIndex + 1].pinyin) > -1
                            ? 'noFont'
                            : '',
                          bgIndex == 1 ? 'font-white' : '',
                          'bottom',
                        ]"
                        :style="{ fontSize: pySize + 'px', textAlign: left }"
                        >{{ item[pIndex + 1].pinyin }}</span
                      >
                    </template>
                  </span>
                </template>
                <template v-else>
                  <template v-if="curQue.pyPosition == 'top'">
                    <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
                      <span
                        v-if="isShowPY"
                        class="NNPE-pinyin"
                        :class="[
                          pItem.padding ? 'padding' : '',
                          pItem.className ? pItem.className : '',
                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                          bgIndex == 1 ? 'font-white' : '',
                        ]"
                        :style="{ fontSize: pySize + 'px' }"
                        >{{ pItem.pinyin }}</span
                      >
                    </template>
                  </template>
                  <span
                    v-if="pItem.chs != '#'"
                    class="NNPE-chs"
                    :class="[
                      pItem.padding && isShowPY ? 'padding' : '',
                      curQue.pyPosition == 'top' ? 'bottom' : '',
                    ]"
                  >
                    <template>
                      <span
                        v-for="(wItem, wIndex) in pItem.leg"
                        :key="'ci' + wIndex + pIndex + curSentIndex"
                        :class="[
                          isPlaying &&
                          pItem.timeList &&
                          pItem.timeList[wIndex] &&
                          curTime >= pItem.timeList[wIndex].wordBg &&
                          curQue.wordTime &&
                          curQue.wordTime[curSentIndex] &&
                          curTime <= curQue.wordTime[curSentIndex].ed
                            ? bgIndex == 0
                              ? 'active'
                              : 'active-yellow'
                            : '',
                          bgIndex == 1 ? 'font-white' : '',
                          bgIndex == 0 && wordIndex == pItem.wordIndex
                            ? 'wordActive'
                            : '',
                          bgIndex == 1 && wordIndex == pItem.wordIndex
                            ? 'wordActive-blue'
                            : '',
                        ]"
                        :style="{ fontSize: hzSize + 'px' }"
                        >{{ pItem.chs[wIndex] }}</span
                      >
                    </template>
                  </span>
                  <template v-if="curQue.pyPosition == 'bottom'">
                    <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
                      <span
                        v-if="isShowPY"
                        class="NNPE-pinyin bottom"
                        :class="[
                          pItem.padding ? 'padding' : '',
                          pItem.className ? pItem.className : '',
                          bgIndex == 1 ? 'font-white' : '',
                        ]"
                        :style="{ fontSize: pySize + 'px' }"
                        >{{ pItem.pinyin }}</span
                      >
                    </template>
                  </template>
                </template>
              </template>
            </template>
            <template v-else>
              <span
                :style="{
                  height: pItem.height + 'px',
                  width: pItem.width + 'px',
                }"
              ></span>
            </template>
          </div>
        </div>
        <div style="clear: both; overflow: hidden"></div>
        <div
          :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
          :style="{ fontSize: enSize + 'px' }"
        >
          {{ item.enwords }}
        </div>
      </div>
      <div
        :class="[
          'vc-left vc-right-grey',
          isShowPN && bgIndex == 0 ? 'vc-right-black' : '',
          isShowPN && bgIndex == 1 ? 'vc-right-white' : '',
          curSentIndex == sentList.length - 1 ? 'hidden' : '',
        ]"
        @click="nextSentence"
      ></div>
    </div>
    <div class="voicefull-bottom">
      <div class="bottom-left">
        <Soundrecorddiff
          @handleWav="handleWav"
          @getWavblob="getWavblob"
          @handleParentPlay="handleParentPlay"
          @sentPause="sentPause"
          @getRerordStatus="getRerordStatus"
          :bgIndex="bgIndex"
        />
        <div
          :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
          v-if="isShowCompare"
        >
          <Audio-compare
            :bgIndex="bgIndex"
            type="full"
            :themeColor="themeColor"
            :index="curSentIndex"
            :sentIndex="curSentIndex"
            :url="curQue.mp3_list[0].id"
            :bg="bg"
            :ed="ed"
            :wavblob="wavblob"
            :getCurTime="getCurTime"
            :sentPause="sentPause"
            :isRecord="isRecord"
            :handleChangeStopAudio="handleChangeStopAudio"
          />
        </div>
      </div>
      <div
        :class="[
          'page-count',
          bgIndex == 0 ? 'page-count-white' : 'page-count-green',
        ]"
      >
        {{ curSentIndex + 1 }}/{{ sentList.length }}
      </div>
    </div>

    <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>
    <div class="word-play-audio" v-if="isWordPlay">
      <AudioLineSentence
        :mp3="mp3"
        :getCurTime="getCurWordTime"
        ref="audioLineWord"
        :audioId="'artPraAudioId' + curSentIndex + wordIndex"
        :stopAudio="stopAudio"
        :width="120"
        :hideSlider="false"
        :bg="wordbg"
        :ed="worded"
        :maxTime="wordMaxTime"
        :bgIndex="bgIndex"
        :isRepeat="isRepeat"
        :wordPlay="true"
        @changePlayStatus="changePlayStatus"
      />
    </div>
  </div>
</template>

<script>
import AudioLineSentence from "./AudioLineSentence.vue";
import Soundrecorddiff from "./Soundrecorddiff.vue";
import AudioCompare from "./AudioCompare.vue";
import Wordcard from "./components/Wordcard.vue";
export default {
  components: {
    AudioLineSentence,
    Soundrecorddiff,
    AudioCompare,
    Wordcard,
  },
  props: [
    "sentList",
    "sentIndex",
    "mp3",
    "wordTimeList",
    "curQue",
    "noFont",
    "themeColor",
    "NNPENewWordList",
    "currentTreeID",
  ],
  data() {
    return {
      pySize: 32,
      hzSize: 48,
      enSize: 24,
      bgIndex: 0,
      maxTime: 0,
      item: null,
      bg: 0,
      ed: 0,
      isShowPY: true,
      isRepeat: false,
      isShowEN: true,
      isColl: false,
      NumberList: [
        "①",
        "②",
        "③",
        "④",
        "⑤",
        "⑥",
        "⑦",
        "⑧",
        "⑨",
        "⑩",
        "⑪",
        "⑫",
        "⑬",
        "⑭",
        "⑮",
        "⑯",
        "⑰",
        "⑱",
        "⑲",
        "⑳",
      ],
      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
      curTime: 0,
      wavblob: null,
      stopAudio: false,
      isRecord: false,
      isShowCompare: false,
      isShowPN: false,
      curSentIndex: 0,
      oldHz: "",
      hz: "",
      clientY: 0,
      top: 0,
      left: 0,
      newWordList: [],
      pinyin: "",
      wordIndex: -1,
      isShow: false,
      wordbg: 0,
      worded: 0,
      wordMaxTime: 0,
      isWordPlay: false,
      curWordTime: 0,
      isPlaying: false,
    };
  },
  computed: {
    // isPlaying: function () {
    //   let playing = false;
    //   if (this.$refs.audioLineSent) {
    //     playing = this.$refs.audioLineSent.audio.isPlaying;
    //   }
    //   console.log(playing);
    //   return playing;
    // },
  },
  watch: {
    sentIndex: {
      handler: function (newVal, oldVal) {
        this.curSentIndex = newVal;
        this.getSentence();
      },
      deep: true,
    },
    hz: {
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          _this.handleNewWords(val);
        }
      },
      // 深度观察监听
      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,
    },
  },
  //方法集合
  methods: {
    setFontSize(type) {
      let _this = this;
      if (type == "-") {
        if (_this.hzSize >= 34) {
          this.hzSize = this.hzSize - 4;
        }
      }
      if (type == "+") {
        if (_this.hzSize <= 76) {
          this.hzSize = this.hzSize + 4;
        }
      }
      _this.pySize = parseInt(_this.hzSize / 1.5);
      _this.enSize = parseInt(_this.hzSize / 2);
    },
    playChange(bool) {
      this.isPlaying = bool;
    },
    //添加收藏
    addColl() {
      let Bookdetail = sessionStorage.getItem("Bookdetail");
      if (Bookdetail) {
        Bookdetail = JSON.parse(Bookdetail);
      }
      let MethodName = "order-collection_manager-AddMyCollection";
      let text = "";
      this.item.forEach((item) => {
        if (item.chs != "#") {
          text += item.chs;
        }
      });
      let sentence_json = {
        item: JSON.stringify(this.item),
        bg: this.bg,
        ed: this.ed,
      };
      let data = {
        goods_id: this.currentTreeID,
        goods_type: 501,
        goods_name: Bookdetail.name,
        goods_person_name_desc: Bookdetail.description
          ? Bookdetail.description
          : "",
        goods_picture_id: Bookdetail.picture_id ? Bookdetail.picture_id : "",
        goods_price: Bookdetail.price,
        sentence: {
          sentence_text: text,
          sentence_json: JSON.stringify(sentence_json),
        },
      };
      console.log(text);
      LearnWebSI(MethodName, data).then((res) => {
        this.isColl = true;
        this.$message.success("收藏成功！");
      });
    },
    showPrevNext(bool) {
      this.isShowPN = bool;
    },
    prevSentence() {
      if (this.curSentIndex == 0) {
        this.$message.warning("已经是第一个句子了");
        return;
      }
      this.curSentIndex = this.curSentIndex - 1;
      this.getSentence();
    },
    nextSentence() {
      if (this.curSentIndex == this.sentList.length - 1) {
        this.$message.warning("已经是最后一个句子了");
        return;
      }
      this.curSentIndex = this.curSentIndex + 1;
      this.getSentence();
    },
    changeStatus(key) {
      this[key] = !this[key];
    },
    getRerordStatus(bool) {
      this.isShowCompare = bool;
    },
    getWavblob(wavblob) {
      this.wavblob = wavblob;
    },
    sentPause(isRecord) {
      this.isRecord = isRecord;
    },
    getCurTime(curTime) {
      let _this = this;
      if (_this.isRepeat) {
        let time = curTime * 1000;
        if (time > _this.ed || time < _this.bg) {
          _this.curTime = _this.bg;
          this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
        } else {
          _this.curTime = curTime * 1000;
        }
      } else {
        _this.curTime = curTime * 1000;
      }
    },
    getCurWordTime(curTime) {
      let _this = this;
      // if (_this.isRepeat) {
      //   let time = curTime * 1000;
      //   if (time > _this.worded || time < _this.worded) {
      //     _this.curWordTime = _this.worded;
      //     _this.$refs.audioLineWord.onTimeupdateTime(_this.wordbg / 1000);
      //   } else {
      //     _this.curWordTime = curTime * 1000;
      //   }
      // } else {
      _this.curWordTime = curTime * 1000;
      // }
    },
    changeBg(bgIndex) {
      this.bgIndex = bgIndex;
    },
    getSentence() {
      let _this = this;
      _this.pauseAudio();
      _this.isPlaying = false;
      let item = _this.sentList[_this.curSentIndex];
      if (item.sentArr) {
        _this.item = item.sentArr;
      } else {
        _this.item = item;
      }
      _this.bg = _this.curQue.wordTime[_this.curSentIndex].bg;
      _this.ed = _this.curQue.wordTime[_this.curSentIndex].ed;
      let maxTime = (_this.ed - _this.bg) / 1000;
      if (maxTime < 1) {
        _this.maxTime = 1;
      } else {
        _this.maxTime = maxTime;
      }
    },
    pauseAudio() {
      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        item.pause();
      });
    },
    exitFullScreen() {
      this.pauseAudio();
      this.$emit("exitFullscreen");
    },
    changeFullScreen() {
      this.pauseAudio();
      this.$emit("changeIsFull");
    },
    handleWav(data) {},
    // 录音时暂停音频播放
    handleParentPlay() {
      this.stopAudio = true;
    },
    // 音频播放时改变布尔值
    handleChangeStopAudio() {
      this.stopAudio = false;
    },
    //播放音频
    playWord(item) {
      let _this = this;
      _this.pauseAudio();
      _this.isWordPlay = false;
      _this.wordIndex = item.wordIndex;
      setTimeout(() => {
        let leg = item.timeList.length;
        _this.wordbg = item.timeList[0].wordBg;
        _this.worded = item.timeList[leg - 1].wordEd;
        let wordMaxTime = (_this.worded - _this.wordbg) / 1000;
        if (wordMaxTime < 1) {
          _this.wordMaxTime = 1;
        } else {
          _this.wordMaxTime = wordMaxTime;
        }
        _this.isWordPlay = true;
      }, 50);
    },
    changePlayStatus() {
      this.isWordPlay = false;
      this.wordIndex = -1;
    },
    showWordDetail(e, item) {
      let _this = this;
      if (_this.chsFhList.indexOf(item.chs) > -1) {
        return;
      }
      if (_this.oldHz != item.chs) {
        this.isShow = false;
        setTimeout(() => {
          _this.hz = item.chs;
          _this.pinyin = item.pinyin;
          _this.wordIndex = item.wordIndex;
        }, 50);
      }
      _this.clientY = e.clientY;

      let left = e.clientX;
      let width = 0;
      if (item.chs.length == 1 || item.chs.length == 2) {
        width = 304;
      } else if (item.chs.length == 3 || item.chs.length == 4) {
        width = 432;
      } else if (item.chs.length > 3) {
        width = 560;
      }
      // if (left - this.bodyLeft > this.contentWidth / 2) {
      //   _this.left = left - width + 10;
      // } else {
      _this.left = left - width / 2;
      //}
    },
    changeWordCard(isShow) {
      let _this = this;
      _this.isShow = isShow;
      _this.oldHz = "";
      _this.hz = "";
      _this.wordIndex = -1;
    },
    // 处理分词数据
    handleNewWords(val) {
      let _this = this;
      _this.isShow = true;
      _this.word = null;

      if (_this.newWordList.indexOf(val) > -1) {
        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 };
              break;
            }
          }
        }
      } else {
        let wordlist = val.split("");
        let option = {
          definition_list: [],
          mp3_list: [],
          new_word: val,
          pinyin: _this.pinyin,
        };
        _this.word = { list: wordlist, detail: option };
      }
      _this.oldHz = val;
    },
    handleNewword() {
      let NewWordList = [];
      this.NNPENewWordList.forEach((item) => {
        item.forEach((wItem) => {
          NewWordList.push(wItem.new_word);
        });
      });
      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    if (_this.NNPENewWordList) {
      _this.handleNewword();
    }
    _this.curSentIndex = _this.sentIndex;
    _this.getSentence();
    let isFullscreen =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.fullScreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen;
    isFullscreen = !!isFullscreen;
    document.addEventListener("fullscreenchange", () => {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;

      if (!isFullscreen) {
        _this.changeFullScreen();
      }
    });
    document.addEventListener("mozfullscreenchange", () => {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;

      if (!isFullscreen) {
        _this.changeFullScreen();
      }
    });
    document.addEventListener("webkitfullscreenchange", () => {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;

      if (!isFullscreen) {
        _this.changeFullScreen();
      }
    });
    document.addEventListener("msfullscreenchange", () => {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;

      if (!isFullscreen) {
        _this.changeFullScreen();
      }
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.voicefull {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .NNPE-wordDetail {
    position: fixed;
    z-index: 9999;
  }
  &.bg1 {
    background: #fff;
  }
  &.bg2 {
    background: linear-gradient(180deg, #274533 0%, #385f45 100%);
  }
  &-top {
    height: 136px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    .top-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .select-bg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 96px;
      height: 56px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      margin-right: 32px;
      &.select-bg-blue {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      > div {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &.bg-white-box {
          background: 0 0;
          margin-right: 4px;
          &.active {
            background: #de4444;
          }
        }
        &.bg-green-box {
          background: #fff;
          &.active {
            background: #ffc600;
          }
        }

        > span {
          width: 24px;
          height: 24px;
          border-radius: 100%;
          box-sizing: border-box;
          cursor: pointer;
          &.bg-white {
            background: #fff;
          }
          &.bg-green {
            background: linear-gradient(180deg, #274533 0%, #385f45 100%);
          }
        }
      }
    }
    .set-fontSize {
      padding: 0 20px;
      height: 56px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      > span {
        width: 24px;
        height: 24px;
        margin: 0 4px;
        &.font-jian {
          &-black {
            background: url("../../../assets/NPC/jian-black.png") no-repeat left
              top;
            background-size: 100% 100%;
          }
          &-yellow {
            background: url("../../../assets/NPC/jian-yellow.png") no-repeat
              left top;
            background-size: 100% 100%;
          }
        }
        &.font-img {
          &-black {
            background: url("../../../assets/NPC/fontSize-black.png") no-repeat
              left top;
            background-size: 100% 100%;
          }
          &-yellow {
            background: url("../../../assets/NPC/fontSize-yellow.png") no-repeat
              left top;
            background-size: 100% 100%;
          }
        }
        &.font-jia {
          &-black {
            background: url("../../../assets/NPC/jia-black.png") no-repeat left
              top;
            background-size: 100% 100%;
          }
          &-yellow {
            background: url("../../../assets/NPC/jia-yellow.png") no-repeat left
              top;
            background-size: 100% 100%;
          }
        }
      }
    }
    .top-middle {
      display: flex;
      justify-content: center;
      align-items: center;
      .audio-box {
        width: 56px;
        height: 56px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        &-green {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
    .op-btn {
      width: 56px;
      height: 56px;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      cursor: pointer;
      margin-left: 32px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      &-green {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      &.close-btn {
        background: #274533;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      > span {
        width: 24px;
        height: 24px;
        &.close-icon {
          background: url("../../../assets/icon/cross-24-normal-black.png")
            no-repeat left top;
          background-size: 100% 100%;
          &-white {
            background: url("../../../assets/icon/cross-24-normal-white.png")
              no-repeat left top;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
  .repeat-icon {
    background: url("../../../assets/icon/Repeat-24-normal-red.png") no-repeat
      left top;
    background-size: 100% 100%;
    &.disabled {
      background: url("../../../assets/icon/Repeat-24-disable-Black.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    &-yellow {
      background: url("../../../assets/icon/Repeat-24-normal-yellow.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
  }
  .pinyin-icon {
    background: url("../../../assets/icon/pinyin-24-normal-red.png") no-repeat
      left top;
    background-size: 100% 100%;
    &.disabled {
      background: url("../../../assets/icon/pinyin-24-disable-Black.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    &-yellow {
      background: url("../../../assets/icon/pinyin-24-normal-yellow.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
  }
  .en-icon {
    background: url("../../../assets/icon/EN-24-normal-Red.png") no-repeat left
      top;
    background-size: 100% 100%;
    &.disabled {
      background: url("../../../assets/icon/EN-24-disable-Black.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
    &-yellow {
      background: url("../../../assets/icon/EN-24-normal-yellow.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
  }
  .coll-icon {
    background: url("../../../assets/icon/bookmarkfill-24-normal-red.png")
      no-repeat left top;
    background-size: 100% 100%;
    &.disabled {
      background: url("../../../assets/icon/bookmarkfill-24-disable-Black.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    &-yellow {
      background: url("../../../assets/icon/bookmarkfill-24-normal-yellow.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
  }

  &-content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 0 36px;
    display: flex;
    align-items: center;

    .vc-left {
      width: 64px;
      height: 64px;
      cursor: pointer;
      &-grey {
        background: url("../../../assets/NPC/left-grey.png") no-repeat left top;
        background-size: 100% 100%;
      }
      &-black {
        background: url("../../../assets/NPC/left-black.png") no-repeat left top;
        background-size: 100% 100%;
      }
      &-white {
        background: url("../../../assets/NPC/left-white.png") no-repeat left top;
        background-size: 100% 100%;
      }
      &.hidden {
        visibility: hidden;
      }
    }
    .vc-right {
      width: 64px;
      height: 64px;
      cursor: pointer;
      &-grey {
        background: url("../../../assets/NPC/right-grey.png") no-repeat left top;
        background-size: 100% 100%;
      }
      &-black {
        background: url("../../../assets/NPC/right-black.png") no-repeat left
          top;
        background-size: 100% 100%;
      }
      &-white {
        background: url("../../../assets/NPC/right-white.png") no-repeat left
          top;
        background-size: 100% 100%;
      }
    }
    .vc-main {
      width: fit-content;
      margin: 0 auto;
      .enwords {
        padding: 0 3px;
        margin-top: 40px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 24px;
        line-height: 32px;
        font-family: "robot";
        &-green {
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }
    .NNPE-words {
      float: left;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      &-box {
        float: left;
        > span {
          display: block;
          &.NNPE-pinyin {
            font-family: "GB-PINYINOK-B";
            font-weight: normal;
            font-size: 32px;
            line-height: 1.25;
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.85);
            &.bottom {
              padding-bottom: 16px;
            }
            &.noFont {
              font-family: initial;
            }
            &.textLeft {
              text-align: left;
            }
            &.font-white {
              color: #fff;
            }
            &.wordBlank {
              color: rgba(0, 0, 0, 0.85);
            }
          }
          &.NNPE-chs {
            font-family: "FZJCGFKTK";
            font-size: 48px;
            line-height: 1.17;
            color: rgba(0, 0, 0, 0.85);
            &.bottom {
              padding-bottom: 16px;
            }
            .font-white {
              color: #fff;
            }
            .active {
              color: #de4444;
              &-yellow {
                color: #ffc600;
              }
            }

            .wordActive {
              color: #de4444;
            }
            .wordActive-blue {
              color: #ffc600;
            }
          }
          // &.padding {
          //   padding-right: 6px;
          // }
        }
      }
      &.textLeft {
        text-align: left;
      }
      &.textCenter {
        text-align: center;
      }
      > span {
        display: block;
        &.NNPE-pinyin {
          font-family: "GB-PINYINOK-B";
          font-weight: normal;
          font-size: 32px;
          line-height: 1.25;
          box-sizing: border-box;
          color: rgba(0, 0, 0, 0.85);
          &.bottom {
            padding-bottom: 16px;
          }
          &.font-white {
            color: #fff;
          }
          &.noFont {
            font-family: initial;
          }
          &.textLeft {
            text-align: left;
          }
          &.wordBlank {
            color: rgba(0, 0, 0, 0.85);
          }
        }
        &.NNPE-chs {
          font-family: "FZJCGFKTK";
          font-size: 48px;
          line-height: 1.17;
          color: rgba(0, 0, 0, 0.85);
          &.bottom {
            padding-bottom: 16px;
          }
          .font-white {
            color: #fff;
          }
          .active {
            color: #de4444;
            &-yellow {
              color: #ffc600;
            }
          }
          .wordActive {
            color: #de4444;
          }
          .wordActive-blue {
            color: #ffc600;
          }
        }
        &.padding {
          padding-left: 3px;
          padding-right: 3px;
        }
      }
    }
  }
  &-bottom {
    height: 136px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
    .bottom-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .compare-box {
        height: 56px;
        padding: 16px 16px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0 40px 40px 0;
        border-left: 0px solid rgba(0, 0, 0, 0.1);
        &-white {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-left: 0;
        }
      }
    }
    .page-count {
      padding: 8px;
      font-size: 16px;
      line-height: 24px;
      font-family: "robot";
      color: #000000;
      min-width: 60px;
      box-sizing: border-box;
      border-radius: 8px;
      background: #fff;
      text-align: center;
      &-green {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
.word-play-audio {
  position: absolute;
  left: -1000px;
}
</style>
<style lang="scss">
.NPC-Big-Book-preview-green {
  .bg1 {
    .repeat-icon {
      background: url("../../../assets/icon/Repeat-24-normal-Green.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    .pinyin-icon {
      background: url("../../../assets/icon/pinyin-24-normal-green.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    .en-icon {
      background: url("../../../assets/icon/EN-24-normal-Green.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
    .coll-icon {
      background: url("../../../assets/icon/bookmarkfill-24-normal-green.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .bg1 {
    .repeat-icon {
      background: url("../../../assets/icon/Repeat-24-normal-Brown.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    .pinyin-icon {
      background: url("../../../assets/icon/pinyin-24-normal-brown.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    .en-icon {
      background: url("../../../assets/icon/EN-24-normal-Brown.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
    .coll-icon {
      background: url("../../../assets/icon/bookmarkfill-24-normal-brown.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
  }
}
</style>