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

<!--  -->
<template>
  <div class="NNPE-ArticleView" v-if="articleInfo">
    <template v-if="resArr&&resArr.wordsList&&resArr.wordsList[0]&&resArr.wordsList[0][0]&&resArr.wordsList[0][0].hasOwnProperty('pno')&&resArr.wordsList[0][0].pno===0">
        <h2 :class="['NNPE-words',]">
            <span v-for="(itemR,indexR) in resArr.wordsList[0]" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700'}" 
            :class="[
                    itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                ]">
                    <template v-if="itemR.isShow">
                        <span
                                class="NNPE-chs"
                                :class="[
                                    itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':''
                                ]"
                                >{{ itemR.tokens[2] }}</span
                            >
                            <span
                                class="NNPE-chs NNPE-chs-both"
                                v-if="resArr.wordsList[0][indexR + 1] &&
                                resArr.wordsList[0][indexR + 1].tokens[2] &&
                                enFhList.indexOf(resArr.wordsList[0][indexR + 1].tokens[2]) > -1"
                                :class="[
                                        resArr.wordsList[0][indexR + 1].type,resArr.wordsList[0][indexR + 1].tokens[8]===''?'marginLeft':'',resArr.wordsList[0][indexR + 1].highIndex?'fontWeight':'',resArr.wordsList[0][indexR + 1].marginRight?'marginSingleRight':''
                                    ]"
                                >{{ resArr.wordsList[0][indexR + 1].tokens[2] }}</span
                            >
                    </template>
                <!-- {{itemR.tokens[2]}} -->
                </span>
        </h2>
    </template>
    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
        {{articleInfo.art_author+' · '+articleInfo.study_phase_name+'版 · 第 '+articleInfo.iss_no+' 期 · '+articleInfo.release_date+' · '+articleInfo.chn_item+(articleInfo.page_no_in_pub?' · P'+articleInfo.page_no_in_pub:'')}}
    </h6>
    <div class="audio-box">
        <div
            class="aduioLine-content aduioLine-box"
            v-if="
                articleInfo.art_sound_url
            " :style="{background:colorObj.audiobg,borderColor:colorObj.audioBorder}"
        >
            <AudioLine
                audioId="artNormalAudio"
                :mp3="articleInfo.art_sound_url"
                :getCurTime="getCurTime"
                ref="audioLine"
                :mp3Source="'mp3'"
                type="audioLine"
                :ed="ed"
                :showEd="showEd"
                @emptyEd="emptyEd"
            />
            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen"></svg-icon>
        </div>
    </div>
    <template v-if="resArr.wordsList&&resArr.wordsList.length > 0">
      <div class="table-box" :class="['table-box-'+colorObj.type]">
        <div
          :class="['NNPE-detail']"
          v-for="(item, index) in resArr.wordsList"
          :key="'detail' + index"
        >
          <a class="history-btn" v-if="resArr.timeList[index] && resArr.timeList[index] && curTime >= resArr.timeList[index].s && curTime <= resArr.timeList[index].e" @click="lookHistory(index)">历史记录</a>
          <b class="para-index" :style="{fontSize:wordFontsize + 'px',color:resArr.timeList[index] && resArr.timeList[index] && curTime >= resArr.timeList[index].s && curTime <= resArr.timeList[index].e ? colorObj.type==='white'?'#2F3742':colorObj.type==='darkGreen'?'#299772':colorObj.type==='armyGreen'?'#30A47D':'#5373E7':colorObj.type==='white'?'#D0D3D9':colorObj.type==='darkGreen'?'#7A8983':colorObj.type==='armyGreen'?'#6B7C74':'#737781'}">{{index+1}}</b>
          <div class="wordsList-box">
            <div class="nnpe-sentence-box">
              <div v-for="(pItem, pIndex) in item" :key="'wordsList' + pIndex">
                <template v-if="pItem.isShow">
                    <div
                        :class="[
                        'NNPE-words',
                        isPlaying &&
                        resArr.timeList[index] &&
                        resArr.timeList[index] &&
                        curTime >= resArr.timeList[index].s &&
                        curTime <= resArr.timeList[index].e
                            ? 'sentActive'
                            : '',
                        pItem.pno == paraIndex && pItem.sno == sentIndex
                            ? 'overActive'
                            : '',
                        ]"
                        @click="
                        handleChangeTime(
                            resArr.timeList[index] &&
                            resArr.timeList[index] &&
                            resArr.timeList[index].s
                        )
                        "
                        @mouseover="handleMouseover(pItem)"
                        @mouseleave="handleMouseleave"
                    >
                            <span
                                class="NNPE-chs"
                                :class="[
                                    isPlaying &&
                                    resArr.timeList[index] &&
                                    resArr.timeList[index] &&
                                    resArr.timeList[index].e &&
                                    resArr.timeList[index].tokens &&
                                    resArr.timeList[index].tokens[pItem.wIndex]&&
                                    curTime >=
                                        resArr.timeList[index].tokens[pItem.wIndex].s &&
                                    curTime <= resArr.timeList[index].e
                                        ? 'wordActive'
                                        : '',
                                    pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':''
                                ]"
                                :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
                                        resArr.timeList[index] &&
                                        resArr.timeList[index] &&
                                        resArr.timeList[index].tokens[pItem.wIndex]&&
                                        curTime >=
                                            resArr.timeList[index].tokens[pItem.wIndex].s &&
                                        curTime <= resArr.timeList[index].tokens[pItem.wIndex].e?colorObj.statisticValue:
                                        resArr.timeList[index] &&
                                        resArr.timeList[index] &&
                                        curTime >= resArr.timeList[index].s &&
                                        curTime <= resArr.timeList[index].e?colorObj.contentColor:colorObj.type==='white'?'#D0D3D9':colorObj.type==='darkGreen'?'#7A8983':colorObj.type==='darkBlue'?'#737781':'#6B7C74'}"
                                >{{ 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="[
                                    isPlaying &&
                                    resArr.timeList[index] &&
                                    resArr.timeList[index] &&
                                    resArr.timeList[index].tokens[pItem.wIndex]&&
                                    curTime >=
                                        resArr.timeList[index].tokens[pItem.wIndex].s &&
                                    curTime <= resArr.timeList[index].e
                                        ? 'wordActive'
                                        : '',
                                    item[pIndex + 1].tokens[8]===''?'marginLeft':'',item[pIndex + 1].marginRight?'marginSingleRight':''
                                ]"
                                :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
                                        resArr.timeList[index] &&
                                        resArr.timeList[index] &&
                                        resArr.timeList[index].tokens[pItem.wIndex]&&
                                        curTime >=
                                            resArr.timeList[index].tokens[pItem.wIndex].s &&
                                        curTime <= resArr.timeList[index].tokens[pItem.wIndex].e?colorObj.statisticValue:resArr.timeList[index] &&
                                        resArr.timeList[index] &&
                                        curTime >= resArr.timeList[index].s &&
                                        curTime <= resArr.timeList[index].e?colorObj.contentColor:colorObj.type==='white'?'#D0D3D9':colorObj.type==='darkGreen'?'#7A8983':colorObj.type==='darkBlue'?'#737781':'#6B7C74'}"
                            >{{ item[pIndex + 1].tokens[2] }}</span
                        >
                    </div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="operate-box" :style="{background:colorObj.contentBg}">
            <div class="operate-box-inner" :style="{background:colorObj.contentInnerBg}">
                <div class="operate-box-inner-content">
                    <div class="operate-item" @click="changePlaySent('-')">
                        <svg-icon icon-class="Go-start" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
                        <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">上一句</span>
                    </div>
                    <div class="operate-item" @click="compare">
                        <svg-icon icon-class="Type-drive" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
                        <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">听对比</span>
                    </div>
                    <div class="operate-item">
                        <b class="luyin-btn" v-if="!microphoneStatus" @click="microphone">
                            <svg-icon icon-class="Voice-luyin" :style="{color:'#fff'}"></svg-icon>
                        </b>
                        <img class="luyin-gif" @click="microphone" v-else src="../../../assets/voice-gif.png" />
                        <span v-if="microphoneStatus" class="record-time" :style="{color:'#F2555A',fontWeight: '600'}">{{
                            handleDateTime(recordtime)
                        }}</span>
                    </div>
                    <div class="operate-item" @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')">
                        <svg-icon icon-class="Headphone-sound" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
                        <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">我读的</span>
                    </div>
                    <div class="operate-item" @click="changePlaySent('+')">
                        <svg-icon icon-class="Go-end" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
                        <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">下一句</span>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </template>

    <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
    <div class="clear-box">
        <h5>词汇标记设置</h5>
        <div class="item">
            <span>跟读</span>
            <el-switch
                v-model="repeatAfter"
                active-color="#175DFF"
                inactive-color="#D0D3D9"
                key="sent-repeatAfter">
            </el-switch>
        </div>
        <div class="item">
            <span>单句模式</span>
            <el-switch
                v-model="singleModel"
                active-color="#175DFF"
                inactive-color="#D0D3D9"
                key="sent-singleModel"
                @change="mutualExclusive('singleModel','autoNextSent')">
            </el-switch>
        </div>
        <div class="item">
            <span>自动下一句</span>
            <el-switch
                v-model="autoNextSent"
                active-color="#175DFF"
                inactive-color="#D0D3D9"
                key="sent-autoNextSent"
                @change="mutualExclusive('autoNextSent','singleModel')">
            </el-switch>
        </div>
    </div>
    <el-dialog
        :visible.sync="historyFlag"
        :show-close="false"
        :close-on-click-modal="false"
        width="680px"
        :modal="false"
        class="login-dialog"
        v-if="historyFlag">
        <history-record-list :list="historySentRecordList" :sentData="resArr.wordsList[playSentIndex]" :timeData="resArr.timeList[playSentIndex]" :mp3Url="articleInfo.art_sound_url" @closeHistory="closeHistory" :colorObj="colorObj" :wordFontsize="wordFontsize" @handleChangeTime="handleChangeTime" @returnCurrentTime="returnCurrentTime" :parentCurtimt="curTime" :parentPlay="Playing" v-loading="historyLoading"></history-record-list>
    </el-dialog>
    <div class="voice-full-screen" :id="'screen-' + mathNum">
      <Voicefullscreen
        v-if="isFull"
        :curQue="articleInfo"
        :sentIndex="playSentIndex===-1?0:playSentIndex"
        :mp3="articleInfo.art_sound_url"
        :likeSentencelist="likeSentencelist"
        @exitFullscreen="exitFullscreen"
        @changeIsFull="changeIsFull"
      />
    </div>
  </div>
</template>

<script>
import AudioLine from "@/components/common/AudioLine.vue"
import HistoryRecordList from "./HistoryRecordList.vue"
import Recorder from "js-audio-recorder"; // 录音插件
import { getLogin } from "@/api/ajax";
import Voicefullscreen from './Voicefullscreen.vue';
export default {
  name: "ArticleView",
  props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo","likeSentencelist"],
  components: {
    AudioLine,
    HistoryRecordList,
    Voicefullscreen
  },
  data() {
    return {
      resArr: [],
      curTime: 0, //单位s
      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",
        "”",
      ],
      articleImg: {}, // 文章图片
      paraIndex: -1, //段落索引
      sentIndex: -1, // 句子索引
      repeatAfter: false,
      singleModel: true,
      autoNextSent: false,
      recorder: new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
      }),
      microphoneStatus: false,
      hasMicro: "", // 录音后的样式class
      wavblob: null,
      audio: new window.Audio(),
      audioc: new window.Audio(), // 对比
      recordList: [], // 录音文件数组
      recordtime: 0, // 录音时长
      timer: null, // 计时器
      recordFile: 1, // 录音文件名
      selectIndex: null, // 选中的录音索引
      oldIndex: null, // 存储播放录音索引
      playtime: 0, // 播放时间
      isPlayings: false,
      playSentIndex: -1, // 播放的句子索引
      historyFlag: false, // 历史记录弹窗
      historySentRecordList: [], // 单句历史录音list
      ed: undefined,
      showEd: false, //是否看ed的值
      historyLoading: false,
      timeC: null,
      isCompare: false,
      isFull: false,
      mathNum: Math.random().toString(36).substr(2),
    };
  },
  computed: {
    isPlaying: function () {
      let playing = false;
      if (this.$refs.audioLine) {
        playing = this.$refs.audioLine.audio.isPlaying;
      }
      return playing;
    },
    Playing: function () {
      let playing = false;
      if (this.$refs.audioLine) {
        playing = this.$refs.audioLine.audio.playing;
      }
      return playing;
    },
  },
  watch: {},
  //方法集合
  methods: {
    changePlaySent(type){
        this.audio.pause();
        this.audioc.pause();
        
        if(type==='-'){
            if(this.playSentIndex>0){
                this.playSentIndex--
            }else{
                this.playSentIndex=0
            }
        }else{
            if(this.playSentIndex<this.resArr.wordsList.length-1){
                this.playSentIndex++
            }else{
                this.playSentIndex=0
            }
        }
        this.handleChangeTime(this.resArr.timeList[this.playSentIndex].s)
    },
    getCurTime(curTime) {
        if(this.isCompare){
            let time = curTime * 1000;
            if (time >= this.resArr.timeList[this.playSentIndex].e || time <= this.resArr.timeList[this.playSentIndex].s) {
                // this.curTime = this.resArr.timeList[this.playSentIndex].s;
                // this.$refs.audioLine.onTimeupdateTime(_this.currSent.bg / 1000, true);
            } else {
                this.curTime = curTime * 1000;
            }
        } else if(this.singleModel&&this.playSentIndex>-1&&!this.repeatAfter){
            let time = curTime * 1000;
            if (time >= this.resArr.timeList[this.playSentIndex].e || time <= this.resArr.timeList[this.playSentIndex].s) {
                this.curTime = this.resArr.timeList[this.playSentIndex].s;
                this.$refs.audioLine.onTimeupdateTime(this.resArr.timeList[this.playSentIndex].s / 1000, true);
            } else {
                this.curTime = curTime * 1000;
            }
        } else if((this.singleModel||this.autoNextSent)&&this.playSentIndex>-1&&this.repeatAfter){
            let time = curTime * 1000;
            this.curTime = curTime * 1000;
            // for(let i=0; i<this.resArr.timeList.length;i++){
            //     if(this.curTime>this.resArr.timeList[i].s&&this.curTime<=this.resArr.timeList[i].e){
            //         this.playSentIndex = i
            //         break
            //     }
            // }
            // if (time >= this.resArr.timeList[this.playSentIndex].s || time <= this.resArr.timeList[this.playSentIndex].e) {
                // this.curTime = this.resArr.timeList[this.playSentIndex].s;
                if(this.playSentIndex===0) this.ed = this.resArr.timeList[this.playSentIndex].e;
                this.showEd = true
                // this.$refs.audioLine.onTimeupdateTime(this.resArr.timeList[this.playSentIndex].s / 1000, true);
            // } 
        }else{
            this.curTime = curTime * 1000;  
            for(let i=0; i<this.resArr.timeList.length;i++){
                if(this.curTime>=this.resArr.timeList[i].s&&this.curTime<this.resArr.timeList[i].e){
                    this.playSentIndex = i
                    break
                }
            }
        }
      
    },
    returnCurrentTime(){
        return this.curTime
    },
    handleData() {
      let resArr = {
            wordsList: [],
            timeList: [],
        };
      let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
      articleInfo.art_corpus_data.sentList.forEach((item,index) => {
        let wordlist = []
        item.tokens.forEach((items,indexs)=>{
            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
            }
            wordlist.push(obj)
        })
        resArr.wordsList.push(wordlist)
        resArr.timeList.push(articleInfo.art_sound_srt_data.sents[index])
      });
      this.resArr = resArr;
      console.log(this.resArr)
    },
    handleChangeTime(time,ed,flag) {
      this.audio.pause();
      this.audioc.pause();
      if(flag){
        this.$refs.audioLine.PlayAudio()
      }else{
        if (time>=0) {
            this.curTime = time;
            for(let i=0; i<this.resArr.timeList.length;i++){
                if(this.curTime>=this.resArr.timeList[i].s&&this.curTime<this.resArr.timeList[i].e){
                    this.playSentIndex = i
                    break
                }
            }
            if(ed){
                this.ed = ed;
            }else if((this.singleModel||this.autoNextSent)&&this.playSentIndex>-1&&this.repeatAfter){
                this.ed = this.resArr.timeList[this.playSentIndex].e;
            }else{
                this.ed = undefined
            }
            this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
        }
      }
      
    },
    emptyEd(flag) {
      this.ed = undefined;
      if(flag){
        this.showEd = false
        if(!this.microphoneStatus){
            this.microphone()
        }
      }
    },
    //经过每个词，高亮句子
    handleMouseover(pItem) {
      this.paraIndex = pItem.pno;
      this.sentIndex = pItem.sno;
    },
    handleMouseleave() {
      this.paraIndex = -1;
      this.sentIndex = -1;
    },
    mutualExclusive(val,val1){
        if(this[val]){
            this[val1] = false
        }
    },
    // 开始录音
    microphone() {
      let _this = this;
      this.audio.pause();
      this.audioc.pause();
      if(_this.$refs.audioLine.audio.playing){
            _this.$refs.audioLine.PlayAudio()
      }
      if (!this.microphoneStatus) {
        _this.hasMicro = "";
        // _this.$emit("getWavblob", null);
        // this.$emit("getSelectData", { type: "" });
        // 开始录音
        this.recorder.start();
        this.microphoneStatus = true;
        this.recordtime = 0;
        this.isPlayings = false;
        clearInterval(_this.timer);
        _this.timer = setInterval(() => {
          _this.recordtime++;
        }, 1000);
        this.$emit("handleParentPlay");
        let obj = {
          name: _this.fileName
            ? _this.fileName + _this.recordFile
            : "Recording " + _this.recordFile,
          id: _this.recordFile + Math.round(Math.random() * 10),
        };
        if (this.selectData) obj.selectData = this.selectData;
        _this.recordList.push(obj);
        _this.recordFile++;
        _this.selectIndex = _this.recordList.length - 1;
      } else {
        this.hasMicro = "normal";
        this.recorder.stop();
        clearInterval(_this.timer);
        let toltime = this.recorder.duration; // 录音总时长
        let fileSize = this.recorder.fileSize; // 录音总大小
        // 录音结束，获取取录音数据
        let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
        // this.wavblob = wav;
        this.microphoneStatus = false;
        let reader = new window.FileReader();
        reader.readAsDataURL(wav);
        reader.onloadend = () => {
          _this.recordList[_this.selectIndex].wavData = reader.result;
          _this.recordList[_this.selectIndex].toltime = Math.floor(toltime);
          _this.recordList[_this.selectIndex].fileSize = fileSize;

          _this.wavblob = _this.recordList[_this.selectIndex].wavData;
          _this.$emit("getWavblob", _this.wavblob);
          _this.$emit(
            "handleWav",
            JSON.parse(JSON.stringify(_this.recordList)),
            _this.tmIndex
          );
          if (this.recordList[this.selectIndex].selectData) {
            this.$emit(
              "getSelectData",
              this.recordList[this.selectIndex].selectData
            );
          }
          this.addRecord(reader.result)
        };
      }
      _this.$emit(
        "getRerordStatus",
        !_this.microphoneStatus && _this.recordList.length > 0
      );
      _this.$emit("getMicrophoneStatus", _this.microphoneStatus);
    },
    playmicrophone(totalTimes) {
      this.audioc.pause();
      if (this.hasMicro) {
        this.isPlayings = true;
        if (this.selectIndex || this.selectIndex == 0) {
          let totalTime = totalTimes;
          let _this = this;
          if (!this.audio.paused) {
            this.audio.pause();
            clearInterval(_this.timer);
          } else if (this.audio.paused && _this.oldIndex == _this.selectIndex) {
            _this.audio.play();
            if (_this.recordtime == 0) {
              _this.recordtime = totalTimes;
              _this.playtime = 0;
            }
            _this.timer = setInterval(() => {
              if (_this.playtime < totalTime) {
                _this.playtime++;
                _this.recordtime = totalTime - _this.playtime;
              } else {
                clearInterval(_this.timer);
              }
            }, 1000);
          } else {
            _this.audio.pause();
            _this.audio.load();
            _this.audio.src = _this.wavblob;
            _this.oldIndex = _this.selectIndex;
            _this.audio.play();
            _this.playtime = 0;
            _this.recordtime = totalTime;
            clearInterval(_this.timer);
            _this.timer = setInterval(() => {
              if (_this.playtime < totalTime) {
                _this.playtime++;
                _this.recordtime = totalTime - _this.playtime;
              } else {
                clearInterval(_this.timer);
              }
            }, 1000);
          }
        }
      }
    },
    // 格式化录音时长
    handleDateTime(time) {
      if (parseInt(time / 60) < 10) {
        time =
          ("0" + parseInt(time / 60)).substring(
            ("0" + parseInt(time / 60)).length - 2
          ) +
          ":" +
          ("0" + (time % 60)).substring(("0" + (time % 60)).length - 2);
      } else {
        time =
          parseInt(time / 60) +
          ":" +
          ("0" + (time % 60)).substring(("0" + (time % 60)).length - 2);
      }
      return time;
    },
    // 点击历史记录按钮
    lookHistory(index){
        this.historyFlag = true
        this.historyLoading = true
        this.audio.pause();
        this.audioc.pause();
        if(this.microphoneStatus){
            this.microphone()
        }
        if(this.$refs.audioLine.audio.playing){
            this.$refs.audioLine.PlayAudio()
        }
        this.playSentIndex = index
        let MethodName = "/PaperServer/Client/UserSentRec/RecListInUserSent";
        let data = {
            sent_id: this.articleInfo.art_corpus_data.sentList[index].id,
            got_rec_data_flag: false
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                this.historySentRecordList = res.data.all
                this.historyLoading = false
            }
        }).catch(()=>{
            this.historyLoading = false
        })
    },
    closeHistory(){
        this.historyFlag = false
    },
    // 保存录音
    addRecord(wav){
        if(this.playSentIndex===-1){
            return
        }
        let MethodName = "/PaperServer/Client/UserSentRec/AddUserSentRec";
        let data = {
            sent_id: this.articleInfo.art_corpus_data.sentList[this.playSentIndex].id,
            rec_sound_data: wav
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(this.repeatAfter){
            if(this.autoNextSent&&this.resArr.timeList[this.playSentIndex+1]){
                // this.playSentIndex = this.playSentIndex+1
                this.ed = this.resArr.timeList[this.playSentIndex+1].e
                this.handleChangeTime(this.resArr.timeList[this.playSentIndex+1].s)
            }
          }
        })
    },
    // 对比
    compare(){
        let _this = this;
        _this.isCompare = true
        // let curTime = _this.resArr.timeList[_this.playSentIndex].s
        // for(let i=0; i<this.resArr.timeList.length;i++){
        //     if(curTime>this.resArr.timeList[i].s&&curTime<=this.resArr.timeList[i].e){
        //         this.playSentIndex = i
        //         break
        //     }
        // }
        let playSentIndex = JSON.parse(JSON.stringify(_this.playSentIndex))
        if(playSentIndex===-1){
            this.$message.warning('请先选择要对比的句子')
            return
        }
        if(!this.wavblob){
            this.$message.warning('请先录音')
            return
        }
        this.audio.pause()
        if (!this.audioc.paused) {
            this.audioc.pause();
        } else {
            _this.audioc.pause();
            _this.audioc.load();
            _this.handleChangeTime(_this.resArr.timeList[playSentIndex].s,_this.resArr.timeList[playSentIndex].e)
            _this.timeC = setInterval(() => {
                if(_this.curTime>=_this.resArr.timeList[playSentIndex].e - 250){
                    _this.curTime = _this.resArr.timeList[playSentIndex].s
                    clearInterval(_this.timeC)
                    _this.playWavdata()
                }
            }, 500);
        }
    },
    playWavdata(){
        let _this = this;
        _this.audioc.src = _this.wavblob;
        _this.audioc.play();
        _this.audioc.addEventListener("ended", function () {
            _this.isCompare = false
        });
    },
    pauseAudio() {
      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        item.pause();
      });
    },
    pauseVideo() {
      let video = document.getElementsByTagName("video");
      video.forEach((item) => {
        item.pause();
      });
    },
    //语音全屏
    fullScreen() {
      this.pauseAudio();
      this.pauseVideo();
      this.isFull = true;
      this.goFullscreen();
    },
    goFullscreen() {
      let id = "screen-" + this.mathNum;
      var element = document.getElementById(id);
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    exitFullscreen() {
      this.isFull = false;
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    changeIsFull() {
      this.isFull = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.articleInfo) {
      this.handleData();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    clearInterval(this.timeC)
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  width: 100%;
  .nnpe-article-author{
      margin: 24px 0;
  }
  h2{
    display: flex;
    flex-flow: wrap;
    &.sentActive {
        background: rgba(24, 144, 255, 0.1);
    }
    &.overActive {
        background: rgba(0, 0, 0, 0.06);
    }
    .wordActive {
        color: #175DFF;
    }
  }
  .table-box {
    padding-top: 20px;
    padding-bottom: 64px;
    // background: #f7f7f7;
    // border-top: 1px solid rgba(0, 0, 0, 0.1);
    :last-child {
      :last-child.wordsList-box {
        padding-bottom: 40px;
      }
    }
    .wordsList-box {
      flex: 1;
      padding: 20px 0;
      .nnpe-sentence-box {
        display: flex;
        flex-flow: wrap;
      }
      > img {
        max-width: 50%;
        display: block;
        padding: 16px 0;
        margin: 0 auto;
      }
    }
  }
  .NNPE-detail {
    clear: both;
    // overflow: hidden;
    display: flex;
    position: relative;
    .history-btn{
        position: absolute;
        left: -110px;
        top: 50%;
        margin-top: -16px;
        z-index: 1;
        padding: 5px 16px;
        border-radius: 2px;
        background: #F2F3F5;
        color:#4E5969;
        font-size: 14px;
        line-height: 22px;
        cursor: pointer;
    }
    .para-index{
        color:#D0D3D9;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        padding-top: 20px;
        width: 40px;
        flex-shrink: 0;
        &-active{
            color: #2F3742;
        }
    }
    .NNPE-words {
      float: left;
      padding: 0;
      &.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 3px;
          &.wordActive {
            color: #175DFF;
          }
          &.marginRight{
            padding-right: 0;
          }
          &.marginLeft{
            padding-left: 0;
          }
          &.marginSingleRight{
            padding-right: 3px;
          }
        }
        &.padding {
          padding: 0 3px;
          cursor: pointer;
        }
      }
    }
  }
  .operate-box{
    position: fixed;
    border-top: 1px solid #EBEBEB;
    height: 192px;
    width: 1000px;
    background: #F2F3F5;
    left: 50%;
    bottom: 0;
    margin-left: -500px;
    padding-bottom: 24px;
    z-index: 1;
    &-inner{
        padding-top: 40px;
        height: 144px;
        &-content{
            width: 680px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .operate-item{
            text-align: center;
            cursor: pointer;
            .luyin-btn{
                display: block;
                width: 64px;
                height: 64px;
                padding: 10px;
                border-radius: 60px;
                background: #F2555A;
                box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
            }
            .luyin-gif{
               display: block;
                width: 64px;
                height: 64px; 
                border-radius: 60px;
                box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
            }
            .svg-icon{
                display: block;
                width: 44px;
                height: 44px;
                margin: 0 auto;
                padding: 6px;
            }
            span{
                color: #929CA8;
                font-size: 12px;
                font-weight: 400;
                line-height: 20px;
            }
        }
    }
  }
  .table-box-white{
    .wordActive {
        color: #3459D2 !important;
    }
    .sentActive {
        background: #D9E2FC !important;
    }
  }
  .table-box-darkGreen{
    .wordActive {
        color: #299772 !important;
    }
    .sentActive {
        background: #ECEFED !important;
    }
  }
  .table-box-darkBlue{
    .wordActive {
        color: #5373E7 !important;
    }
    .sentActive {
        background:#1C2129 !important;
    }
  }
  .table-box-armyGreen{
    .wordActive {
        color: #30A47D !important;
    }
    .sentActive {
        background: #2A2F2C !important;
    }
  }
}
.audio-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aduioLine-box{
    width: 516px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 8px 24px;
    .wrapper{
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        color: #175DFF;
        margin-left: 8px;
    }
    .Audio{
        width: 430px;
    }
}
.clear-box{
    right: calc((100% - 1000px)/2);
    position: fixed;
    top: 150px;
    width: 270px;
    overflow: auto;
    width: 176px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    background: #FFF;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px 1px rgba(0, 0, 0, 0.06), 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
    margin-top: 24px;
    h5{
        margin: 0;
        color: rgba(0, 0, 0, 0.40);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
    }
    .item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
        border-radius: 4px;
        background:#F2F3F5;
        padding: 4px 8px;
        color: #2F3742;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px; 
        cursor: pointer;
        &.red-item{
            color: #F53F3F;
        }

    }
}
</style>