HM21St_Page_User/src/views/bookShelf/components/Voicefullscreen.vue

<!--  -->
<template>
  <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-if="item">
    <div
      class="voicefull-top"
      @mouseover="setTopShow(true)"
      @mouseleave="setTopShow(false)"
    >
      <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
        <!-- <div class="top-left"> -->

            <div
            :class="['op-btn close-btn', bgIndex == 1 ? 'op-btn-green' : '']"
            @click="exitFullScreen"
            >
            <span
                :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
            >
                <i class="el-icon-close"></i>
            </span>
            </div>
          <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
            <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
              <span
                :class="['bg-green', bgIndex == 1 ? 'active' : '']"
                @click="changeBg(1)"
              ></span>
            </div>
            <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
              <span
                :class="['bg-white', bgIndex == 0 ? 'active' : '']"
                @click="changeBg(0)"
              ></span>
            </div>
          </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"
              :curTime="curTime"
              :maxTime="maxTime"
              :bgIndex="bgIndex"
              :isRepeat="isRepeat"
              :isAuto="isAuto"
              @playChange="playChange"
              @rollSentence="rollSentence"
            />
          </template>
          <div
            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
            @click="setStatus"
          >
            <span
              :class="[
                'repeat-icon',
                !isRepeat && !isAuto ? 'disabled' : '',
                !isRepeat && isAuto ? 'auto-icon' : '',
                isRepeat && bgIndex == 1 ? 'repeat-icon-yellow' : '',
                !isRepeat && isAuto && bgIndex == 1 ? 'auto-icon-yellow' : '',
              ]"
            >
            <svg-icon v-if="isRepeat" icon-class="repeat"></svg-icon>
            <svg-icon v-else icon-class="repeat-line"></svg-icon>
            </span>
          </div>
          <div
            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
            @click="handleColl"
            title="点击收藏后可在“个人中心”-“我的收藏”查看"
          >
            <span
              :class="[
                'coll-icon',
                !isCollArr[curSentIndex] ? 'disabled' : '',
                isCollArr[curSentIndex] && bgIndex == 1
                  ? 'coll-icon-yellow'
                  :isCollArr[curSentIndex] && bgIndex == 0
                  ? 'coll-icon-green':'',
              ]"
            >
                <svg-icon v-if="!isCollArr[curSentIndex]" icon-class="like-line" className="icon-like"></svg-icon>
                <svg-icon v-else icon-class="like" className="icon-like"></svg-icon>
            </span>
          </div>
          <div :class="['set-fontSize', bgIndex == 1 ? 'set-fontSize-green' : '']">
            <div
                @click="setFontSizeFlag=!setFontSizeFlag"
            >
                <svg-icon icon-class="font-size"></svg-icon>
            </div>
            <div class="font-size-box" :class="[bgIndex == 1 ? 'font-size-box-green' : '']" v-if="setFontSizeFlag">
                <el-input-number v-model="hzSize" :step="4" :max="76" :min="34"></el-input-number>
            </div>
          </div>
          
        </div>
      <!-- </div> -->
    </div>
    <div class="voicefull-content" v-if="item">
      <div
        class="vc-box"
        @mousemove="showPrevNext(true, 'isShowLeft')"
        @mouseleave="showPrevNext(false, 'isShowLeft')"
      >
        <div
          :class="[
            'vc-left vc-left-grey',
            isShowLeft && bgIndex == 0 ? 'vc-left-black' : '',
            isShowLeft && bgIndex == 1 ? 'vc-left-white' : '',
            curSentIndex == 0 ? 'hidden' : '',
          ]"
          @click="prevSentence"
        ></div>
      </div>
      <div class="vc-main">
        <div class="item-sent">
          <div style="clear: both; overflow: hidden"></div>
          <div
            class="nnpe-sentence-box"
            v-for="(pItem, pIndex) in item"
            :key="'wordsList' + pIndex"
            @dblclick="showWordDetail($event, pItem)"
            @click="playWord(pItem,pIndex)"
          >
            <template v-if="pItem.isShow">
                <div
                    :class="[
                    'NNPE-words',
                    ]"
                >
                    <span
                        class="NNPE-chs"
                        :class="[
                            resArr.timeList[curSentIndex] &&
                            resArr.timeList[curSentIndex] &&
                            resArr.timeList[curSentIndex].e &&
                            resArr.timeList[curSentIndex].tokens &&
                            resArr.timeList[curSentIndex].tokens[pItem.wIndex]&&
                            curTime >=
                                resArr.timeList[curSentIndex].tokens[pItem.wIndex].s &&
                            curTime <= resArr.timeList[curSentIndex].e
                                ? 'wordActive'
                                : '',
                            pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':'',
                            bgIndex == 1 ? 'word-green' : '',
                            bgIndex == 1 && wordIndex == pItem.wIndex
                              ? 'wordActive-blue'
                              : bgIndex == 0 && wordIndex == pItem.wIndex?'wordActive':'',
                        ]"
                        :style="{fontSize:hzSize + 'px'}"
                        >{{ pItem.tokens[2] }}</span
                    >
                    <span
                    class="NNPE-chs NNPE-chs-both"
                    v-if="item[pIndex + 1] &&
                    item[pIndex + 1].tokens[2] &&
                    enFhList.indexOf(item[pIndex + 1].tokens[2]) > -1"
                    :class="[
                            resArr.timeList[curSentIndex] &&
                            resArr.timeList[curSentIndex] &&
                            resArr.timeList[curSentIndex].tokens[pItem.wIndex]&&
                            curTime >=
                                resArr.timeList[curSentIndex].tokens[pItem.wIndex].s &&
                            curTime <= resArr.timeList[curSentIndex].e
                                ? 'wordActive'
                                : '',
                            item[pIndex + 1].tokens[8]===''?'marginLeft':'',item[pIndex + 1].marginRight?'marginSingleRight':'',
                            bgIndex == 1 ? 'word-green' : '',
                            bgIndex == 1 && wordIndex == pItem.wIndex
                              ? 'wordActive-blue'
                              : '',
                        ]"
                        :style="{fontSize:hzSize + 'px'}"
                    >{{ item[pIndex + 1].tokens[2] }}</span
                    >
                </div>
            </template>
          </div>
        </div>
        <div style="clear: both; overflow: hidden"></div>
      </div>
    </div>
    <div
      class="voicefull-bottom"
      @mouseover="setBottomShow(true)"
      @mouseleave="setBottomShow(false)"
    >
      <div
        :class="[
          isBottomShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden',
        ]"
      >
        <div
          :class="[
            'bottom-left',
          ]"
        >
          <Soundrecorddiff
            ref="Soundrecorddiff"
            @handleWav="handleWav"
            @getWavblob="getWavblob"
            @handleParentPlay="handleParentPlay"
            @sentPause="sentPause"
            @getRerordStatus="getRerordStatus"
            @getMicrophoneStatus="getMicrophoneStatus"
            @getPlayStatus="getPlayStatus"
            :bgIndex="bgIndex"
            :answerRecordList="
              historySentRecordList
            "
            :tmIndex="curSentIndex"
            :key="'Soundrecorddiff' + curSentIndex"
          />
        </div>
          <div
            :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
            v-if="isShowCompare"
          >
            <Audio-compare
              :bgIndex="bgIndex"
              type="full"
              :themeColor="''"
              :index="curSentIndex"
              :sentIndex="curSentIndex"
              :url="curQue.art_sound_url"
              :bg="bg"
              :ed="ed"
              :wavblob="wavblob"
              :getCurTime="getCurCompareTime"
              :sentPause="sentPause"
              :isRecord="isRecord"
              :handleChangeStopAudio="handleChangeStopAudio"
              :getPlayStatus="getPlayStatus"
              :key="'mp3Compare' + curSentIndex"
              
            />
          </div>
        <div
          :class="[
            'page-count',
            bgIndex == 0 ? 'page-count-white' : 'page-count-green',
          ]"
        >
          {{ curSentIndex + 1 }}/{{ this.resArr.wordsList.length }}
        </div>
      </div>
    </div>

      <el-dialog
        :visible.sync="isShow"
        :show-close="false"
        :close-on-click-modal="false"
        width="570px"
        class="login-dialog"
        :modal="false"
        v-if="isShow">
        <WordCard @closeWord="changeWordCard" :dataObj="showObj" @changeLike="changeLike" :likePhrase="likeWord"/>
    </el-dialog>
    <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 "../../../components/common/AudioLineSentence.vue";
import Soundrecorddiff from "../../../components/common/Soundrecorddiff.vue";
import AudioCompare from "../../../components/common/AudioCompare.vue";
import WordCard from "../../personalCenter/components/WordCard.vue"
import { getLogin } from "@/api/ajax";
export default {
  components: {
    AudioLineSentence,
    Soundrecorddiff,
    AudioCompare,
    WordCard,
  },
  props: [
    "sentIndex",
    "mp3",
    "curQue",
    "likeSentencelist",
    "likeWord"
  ],
  data() {
    return {
      pySize: 32,
      hzSize: 48,
      enSize: 24,
      bgIndex: 1,
      maxTime: 0,
      item: null,
      bg: 0,
      ed: 0,
      isRepeat: false,
      curTime: 0,
      wavblob: null,
      stopAudio: false,
      isRecord: false,
      isShowCompare: false,
      isShowRight: false,
      isShowLeft: 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,
      isAuto: false,
      key: "isRepeat",
      isKeyboard: true,
      isTopShow: false,
      isBottomShow: false,
      isRecording: false,
      recordPlaying: false,
      isCollArr: [],
      enwords: "",
      screenHeight: 0,
      resArr: [],
      historySentRecordList: [], // 单句历史录音list
      enFhList: [
        ",",
        ".",
        ";",
        "?",
        "!",
        ":",
        ">",
        "<",
        "'",
        "’",
        "n't",
        "n’t",
        "n’ts",
        "n‘t",
        "'t",
        "’t",
        "‘t",
        "'s",
        "’s",
        "‘s",
        "'m",
        "’m",
        "‘m",
        "'re",
        "’re",
        "‘re",
        "'d",
        "’d",
        "‘d",
        "'ve",
        "’ve",
        "‘ve",
        ")",
        "'ll",
        "’ll",
        "‘ll",
        "”",
      ],
      setFontSizeFlag: false,
      showObj:null,
      wordLit:[],
      sentenceList:[],
      left:0,
      top:0
    };
  },
  computed: {
    // isPlaying: function () {
    //   let playing = false;
    //   if (this.$refs.audioLineSent) {
    //     playing = this.$refs.audioLineSent.audio.isPlaying;
    //   }
    //   console.log(playing);
    //   return playing;
    // },
  },
  watch: {
    isRecording: {
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.isBottomShow = newVal;
        }
      },
      deep: true,
    },
    recordPlaying: {
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.isBottomShow = newVal;
        }
      },
      deep: true,
    },
    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: {
    setTopShow(bool) {
      this.isTopShow = bool;
    },
    setBottomShow(bool) {
      if (!this.recordPlaying && !this.isRecording) {
        this.isBottomShow = bool;
      }
    },
    getPlayStatus(bool) {
      this.recordPlaying = bool;
    },
    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);
    },
    playChange(bool) {
      this.isPlaying = bool;
    },
    handleColl() {
      let _this = this;
      if (_this.isCollArr[_this.curSentIndex]) {
        _this.cancleColl();
      } else {
        _this.addColl();
      }
    },
    //添加收藏
    addColl() {
        let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Sentence";
        let data = {
            sentence_id: this.curQue.art_corpus_data.sentList[this.curSentIndex].id,
            audio_file_id: this.curQue.art_sound_srt_data?this.curQue.art_sound_srt_data.mp3:'',
            audio_begin_time: this.curQue.art_sound_srt_data&&this.curQue.art_sound_srt_data.sents?this.curQue.art_sound_srt_data.sents[this.curSentIndex].s:null,
            audio_end_time: this.curQue.art_sound_srt_data&&this.curQue.art_sound_srt_data.sents?this.curQue.art_sound_srt_data.sents[this.curSentIndex].e:null
        };
        getLogin(MethodName, data).then((res) => {
            if(res.status===1){
                this.$set(this.isCollArr, this.curSentIndex, true);
                this.$message.success("收藏成功！");
            } 
        });
    },
    //取消收藏
    cancleColl() {
      let MethodName = "/ShopServer/Client/CollectManager/CancelCollect_Sentence";
      let data = {
        sentence_id: this.curQue.art_corpus_data.sentList[this.curSentIndex].id
      };
      getLogin(MethodName, data).then((res) => {
        if(res.status===1){
            this.$set(this.isCollArr, this.curSentIndex, false);
            this.$message.success("取消成功！");
        }
      });
    },
    //检查收藏状态
    checkCollStatus() {
        let collFlag = this.likeSentencelist&&this.likeSentencelist.length>0&&this.likeSentencelist.indexOf(this.curQue.art_corpus_data.sentList[this.curSentIndex].id)>-1 ? true : false;
        this.$set(this.isCollArr, this.curSentIndex, collFlag);
    },
    showPrevNext(bool, key) {
      this[key] = bool;
    },
    prevSentence() {
      let _this = this;
      if (_this.curSentIndex == 0) {
        _this.$message.warning("已经是第一个句子了");
        return;
      }
      _this.curSentIndex = _this.curSentIndex - 1;
      _this.getSentence();
      if (_this.isAuto) {
        _this.curTime = _this.bg;
        _this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
      }
    },
    nextSentence() {
      if (this.curSentIndex == this.resArr.wordsList.length - 1) {
        this.$message.warning("已经是最后一个句子了");
        return;
      }
      this.curSentIndex = this.curSentIndex + 1;
      this.getSentence();
    },
    rollSentence() {
      if (this.curSentIndex == this.resArr.wordsList.length - 1) {
        this.curSentIndex = 0;
      } else {
        this.curSentIndex = this.curSentIndex + 1;
      }
      this.getSentence();
    },
    changeStatus(key) {
      this[key] = !this[key];
    },
    changePinyin() {
      this.$emit("changePinyin");
    },
    changeEN() {
      this.$emit("changeEN");
    },
    setStatus() {
      let _this = this;
      if (_this.key == "isRepeat") {
        if (_this.isRepeat) {
          _this.isRepeat = false;
          _this.isAuto = true;
          _this.key = "isAuto";
        } else {
          _this.isRepeat = true;
          _this.key = "isRepeat";
        }
      } else if (_this.key == "isAuto") {
        if (_this.isAuto) {
          _this.isRepeat = false;
          _this.isAuto = false;
          _this.key = "isRepeat";
        }
      }
    },
    getRerordStatus(bool) {
      this.isShowCompare = bool;
    },
    getMicrophoneStatus(bool) {
      this.isRecording = bool;
    },
    getWavblob(wavblob,wav) {
      this.wavblob = wav;
      if(wav){
        this.addRecord(wav)
      }
    },
    addRecord(wav){
        let MethodName = "/PaperServer/Client/UserSentRec/AddUserSentRec";
        let data = {
            sent_id: this.curQue.art_corpus_data.sentList[this.curSentIndex].id,
            rec_sound_data: wav
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                this.getAllRecordList()
            }
            
        })
    },
    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 if (_this.isAuto) {
        let time = curTime * 1000;

        if (time > _this.ed) {
          _this.rollSentence();
          _this.curTime = _this.bg;
          _this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
        } else {
          _this.curTime = curTime * 1000;
        }
      } else {
        _this.curTime = curTime * 1000;
      }
    },
    getCurCompareTime(curTime) {
      let _this = this;
      _this.curTime = curTime * 1000;
    },
    getCurWordTime(curTime) {
      let _this = this;
      _this.curWordTime = curTime * 1000;
    },
    changeBg(bgIndex) {
      this.bgIndex = bgIndex;
    },
    getAllRecordList(){
        let MethodName = "/PaperServer/Client/UserSentRec/RecListInUserSent";
        let data = {
            sent_id: this.curQue.art_corpus_data.sentList[this.curSentIndex].id,
            got_rec_data_flag: false
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                this.historySentRecordList = res.data.all
            }
        })
    },
    getSentence() {
        let _this = this;
        _this.getAllRecordList()
      _this.isShowCompare = _this.historySentRecordList.length > 0;
      _this.pauseAudio();
      _this.isPlaying = false;
      let item = JSON.parse(JSON.stringify(_this.resArr.wordsList[_this.curSentIndex]));
      _this.item = item
      _this.resArr.wordsList.forEach((item) => {
        this.isCollArr.push(false);
      });
      _this.bg = _this.resArr.timeList[_this.curSentIndex].s;
      _this.ed = _this.resArr.timeList[_this.curSentIndex].e;
      let maxTime = (_this.ed - _this.bg) / 1000;
      if (maxTime < 1) {
        _this.maxTime = 1;
      } else {
        _this.maxTime = maxTime;
      }
      _this.checkCollStatus();
    },
    pauseAudio() {
      let audio = document.getElementsByTagName("audio");
      if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
        audio.forEach((item) => {
            item.pause();
        });
      }
    },
    exitFullScreen() {
      this.pauseAudio();
      this.$emit("exitFullscreen");
    },
    changeFullScreen() {
      this.pauseAudio();
      this.$emit("changeIsFull");
    },
    handleWav(list, tmIndex) {
      tmIndex = tmIndex ? tmIndex : 0;

    //   this.$emit("handleWav", list, tmIndex);
    },
    // 录音时暂停音频播放
    handleParentPlay() {
      this.stopAudio = true;
    },
    // 音频播放时改变布尔值
    handleChangeStopAudio() {
      this.stopAudio = false;
    },
    //播放音频
    playWord(item,index) {
      let _this = this;
      _this.pauseAudio();
      _this.isWordPlay = false;
      _this.wordIndex = item.wIndex;
      setTimeout(() => {
        let leg = _this.resArr.timeList[_this.curSentIndex].tokens.length;
        _this.wordbg = _this.resArr.timeList[_this.curSentIndex].tokens[index].s;
        _this.worded = _this.resArr.timeList[_this.curSentIndex].tokens[index].e;
        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.enFhList.indexOf(item.tokens[2]) > -1) {
        return;
      }
      if (_this.oldHz != item.tokens[2]) {
        this.isShow = false;
        setTimeout(() => {
          _this.hz = item.tokens[2];
          _this.wordIndex = item.wIndex;
          if(item.type==='newWord'){
                this.wordLit.forEach(itemi=>{
                    if(item.word_id===itemi.id){
                        let obj = {
                            src: itemi.ph_file_url?itemi.ph_file_url:'',
                            word: itemi.word_name,
                            symbol: itemi.word_explain.ph?itemi.word_explain.ph:'',
                            paraList: itemi.word_explain.word_para_list,
                            type: itemi.word_explain.vl_level?itemi.word_explain.vl_level:'',
                            typeCn: itemi.word_explain.vl_level_name?itemi.word_explain.vl_level_name:'',
                            rate: itemi.word_explain.star?itemi.word_explain.star:null,
                            originalObj: itemi,
                            hasVoice: itemi.word_explain.ph_mp3_id||itemi.word_explain.ph_file_url?true:false,
                            id: itemi.id,
                            collect: this.likeWord.indexOf(itemi.word_name)>-1?true:false,
                            isNew: true
                        }
                        this.showObj = obj
                    }
                })
                this.showWordFlag = true
            }else{
                let obj = {
                    word: item.tokens[2],
                    isNew: false
                }
                this.showObj = obj
                this.showWordFlag = true
            }
            console.log(this.showObj)
        }, 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));
    },
    changeLike(){

    },
    getScreenHeight() {
      this.screenHeight = window.innerHeight;
    },
    handleData() {
      let resArr = {
            wordsList: [],
            timeList: [],
        };
      let articleInfo = JSON.parse(JSON.stringify(this.curQue));
      this.sentenceList = articleInfo.art_corpus_data?articleInfo.art_corpus_data.sentList:[]
      this.wordLit = articleInfo.art_voc_data?articleInfo.art_voc_data:[]
      this.wordLit.forEach(item=>{
            item.type='newWord'
            item.exp_title = item.word_name
            let paraStr = ''
            if(item.word_explain&&item.word_explain.word_para_list){
                item.word_explain.word_para_list.forEach(items=>{
                    paraStr += items.para
                })
            }
            item.exp_content = paraStr
            item.collect = this.likeWord.indexOf(item.word_name)>-1?true:false
        })
      articleInfo.art_corpus_data.sentList.forEach((item,index) => {
        let wordlist = []
        item.tokens.forEach((items,indexs)=>{
            let type=''
            let word_id = ''
            for(let i=0;i<this.wordLit.length;i++){
                this.wordLit[i].bind_sent_data.bind_sents.forEach(items=>{
                    if(items.sent_id===item.id&&items.sel_token_idxes.indexOf(indexs)>-1){
                        type='newWord'
                        word_id = this.wordLit[i].id
                    }
                })
            }
            let obj = {
                sent_id:item.id,
                sno: item.sno-1,
                pno: item.pno,
                text: item.text,
                tokens: items,
                wIndex: indexs,
                isShow: this.enFhList.indexOf(items[2])==-1,
                marginRight: indexs===item.tokens.length-1,
                type:type,
                word_id:word_id
            }
            wordlist.push(obj)
        })
        resArr.wordsList.push(wordlist)
        resArr.timeList.push(articleInfo.art_sound_srt_data.sents[index])
      });
      this.resArr = resArr;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    $(window).resize(() => {
      _this.getScreenHeight();
    });
    _this.getScreenHeight();
    document.addEventListener("keyup", function (e) {
      if (_this.isKeyboard) {
        if (e.keyCode == 32) {
          //空格
          _this.$nextTick(() => {
            if (_this.$refs.audioLineSent) {
              _this.$refs.audioLineSent.PlayAudio();
            }
          });
        } else if (e.keyCode == 38) {
          _this.prevSentence();
        } else if (e.keyCode == 40) {
          _this.nextSentence();
        } else if (e.keyCode == 13) {
          _this.$nextTick(() => {
            _this.$refs.Soundrecorddiff.microphone();
          });
        }
      }
    });
    if (_this.NNPENewWordList) {
      _this.handleNewword();
    }
    _this.curSentIndex = _this.sentIndex;
    _this.getSentence();
    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;
    top: 50%;
    margin-top: -196px;
  }
  &.bg1 {
    background: #fff;
  }
  &.bg2 {
    background: linear-gradient(180deg, #274533 0%, #13392E 100%);
  }
  &-top {
    height: 100%;
    width: 40px;
    position: fixed;
    top: 0;
    right: 27px;
    box-sizing: border-box;

    padding: 0;

    .voicefull-top-hidden {
      width: 100%;
      height: 310px;
      visibility: hidden;
      margin-top: -155px;
      top: 50%;
      position: absolute;
      >div{
        margin: 8px 0;
      }
    }
    .voicefull-top-show {
      width: 100%;
      height: 310px;
      visibility: visible;
      margin-top: -155px;
      position: absolute;
      top: 50%;
      >div{
        margin: 8px 0;
      }
    }
    .top-left {
    //   display: flex;
    //   justify-content: flex-start;
      align-items: center;
    }
    .select-bg {
      width: 40px;
      height: 80px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 40px;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
      box-sizing: border-box;
      text-align: center;
      &.select-bg-blue {
        background: #0E2B23;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      > div {
        width: 28px;
        height: 28px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 8px 5px;
        &.bg-white-box {
          background: 0 0;
          margin-right: 4px;
          &.active {
            background: #3459D2;
          }
        }
        &.bg-green-box {
          background: #fff;
          &.active {
            background: #fff;
          }
        }

        > 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%, #13392E 100%);
          }
        }
      }
    }
    .el-icon-close{
        line-height: 24px;
        font-weight: bold;
    }
    .svg-icon{
        width: 40px;
        height: 40px;
        padding: 12px;
    }
    .set-fontSize {
      position: relative;
      border-radius: 40px;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0.1);
      &-green {
        background: #0E2B23;
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #fff;
      }
      .font-size-box{
        position: absolute;
        top: 0;
        left: -160px;
      }
    }
    // .top-middle {
      .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: 40px;
    height: 40px;
    // padding: 12px;
    // font-size: 16px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    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);
      color: #fff;
    }
    &.close-btn {
      position: fixed;
      top: 20px;
      right: 27px;

    }
    > span {
      &.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 {
    &.disabled {
      color: #929CA8;
    }
    &-yellow {
      color: #fff;
    }
    &.auto-icon {
    //   color: #fff;
      &-yellow {
        
      }
    }
  }
  .coll-icon {
    &-yellow {
        color: #F2555A;
        &.disabled {
            color: #000;
        }
    }
    &-green{
        color: #F2555A;
        &.disabled {
            color: #fff;
        }
    }
  }
  &-content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .vc-main {
      width: fit-content;
      margin: 0 auto;
      padding: 0 67px;
    }
    .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-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;
              }
            }


          }
          // &.padding {
          //   padding-right: 6px;
          // }
        }
      }
      &.textLeft {
        text-align: left;
      }
      &.textCenter {
        text-align: center;
      }
      &.textRight {
        text-align: right;
      }
      > span {
        display: block;
        &.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;
        }
      }
    }
    .nnpe-sentence-box{
        float: left;
    }
    .NNPE-words {
        float: left;
        padding: 0;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        &.noPadding{
            padding:0;
        }
        &.sentActive {
            background: rgba(24, 144, 255, 0.1);
        }
        &.overActive {
            background: rgba(0, 0, 0, 0.06);
        }
        &.textLeft {
            text-align: left;
        }
        &.textCenter {
            text-align: center;
        }
        > span {
            float: left;
            cursor: pointer;
            &.NNPE-chs {
                //   font-size: 24px;
                font-family: 'Smartisan';
                line-height: 150%;
                color: #000000;
                padding: 0 5px;
                font-weight: 700;
                &.wordActive {
                color: #175DFF;
                }
                &.marginRight{
                padding-right: 0;
                }
                &.marginLeft{
                padding-left: 0;
                }
                &.marginSingleRight{
                padding-right: 3px;
                }
                &.word-green{
                    color: #F7F8FA;
                    &.wordActive {
                        color: #FFCB47;
                    }
                }
                &.wordActive-blue {
                    color: #ffc600;
                }
            }
            &.padding {
                padding: 0 3px;
                cursor: pointer;
            }
        }
    }
  }
  &-bottom {
    height: 136px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;

    .voicefull-bottom-show {
      height: 136px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      visibility: visible;
    }
    .voicefull-bottom-hidden {
      height: 136px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    //   visibility: hidden;
    }
    .bottom-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &-margin {
        margin-left: 40px;
      }
      .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;
        }
        &-answer {
          border-radius: 40px;
        }
      }
    }
    .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">
.font-size-box{
    width: 144px;
    .el-input-number{
        width: 100%;
    }
    .el-input-number__decrease{
        border-radius: 40px 0 0 40px;
        border-right-color: #DDD;
    }
    .el-input-number__increase{
        border-radius: 0 40px 40px 0;
        border-left-color: #DDD;
    }
    .el-input__inner{
        border-radius: 40px;
        border-color: #DDD;
        background: #fff;
        color: #000;
        font-weight: 700;
    }
    .el-input-number__decrease, .el-input-number__increase{
        background: #fff;
        color: #000;
        font-weight: 700;
    }
    &-green{
        .el-input-number__decrease{
            border-right-color: #235446;
        }
        .el-input-number__increase{
            border-left-color: #235446;
        }
        .el-input__inner{
            border-color: #265A4B;
            background: #13392E;
            color: #fff;
        }
        .el-input-number__decrease, .el-input-number__increase{
            background: #265A4B;
            color: #fff;
        }
    }
    
}
</style>