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: titleFontsize + 'px',
            lineHeight: titleFontsize + 8 + '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>
    <h2 v-else>
      <span
        :style="{
          color: colorObj.titleColor,
          fontSize: titleFontsize + 'px',
          lineHeight: titleFontsize + 8 + 'px',
          marginRight: '10px',
          fontWeight: '700',
          cursor: 'pointer',
        }"
        >{{ articleInfo.art_title }}</span
      >
    </h2>
    <h6
      class="nnpe-article-author"
      :style="{
        color: colorObj.sourceColor,
        fontSize: '14px',
        lineHeight: '22px',
        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="'tts'"
          type="audioLine"
          :ed="ed"
          :showEd="showEd"
          @emptyEd="emptyEd"
          :colorObj="colorObj"
        />
        <svg-icon
          icon-class="icon-wrapper"
          class="wrapper"
          @click="fullScreen"
          :style="{ color: colorObj.audioBtnColor }"
        ></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
            class="score-box"
            v-if="
              activeSentId === articleInfo.art_corpus_data.sentList[index].id &&
              score !== null
            "
          >
            <div class="score">
              <span>朗读评分</span>
              <b :style="wordStyle()">{{ score }}</b>
            </div>
            <a @click="lookMoreInfo">查看详细</a>
          </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
                >
                <span
                  v-else
                  :style="{
                    color: colorObj.type === 'armyGreen' ? '#7C8983' : '',
                  }"
                  >点击录音</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"
        :likeWord="likeWord"
        :sentIndex="playSentIndex === -1 ? 0 : playSentIndex"
        :mp3="articleInfo.art_sound_url"
        :likeSentencelist="likeSentencelist"
        @exitFullscreen="exitFullscreen"
        @changeIsFull="changeIsFull"
      />
    </div>
    <el-dialog
      :visible.sync="recordsScoreInfoFlag"
      :show-close="false"
      :close-on-click-modal="false"
      width="680px"
      :modal="false"
      class="login-dialog"
      v-if="recordsScoreInfoFlag"
    >
      <RecordsScoreInfo
        :sentData="resArr.wordsList[playSentIndex]"
        :scoreAllInfo="scoreInfo"
        @closeScoreInfo="closeScoreInfo"
        :wordFontsize="wordFontsize"
      ></RecordsScoreInfo>
    </el-dialog>
  </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";
import RecordsScoreInfo from "./RecordsScoreInfo.vue";
export default {
  name: "ArticleView",
  props: [
    "titleFontsize",
    "wordFontsize",
    "colorObj",
    "articleType",
    "articleInfo",
    "likeSentencelist",
    "likeWord",
    "articleImg",
  ],
  components: {
    AudioLine,
    HistoryRecordList,
    Voicefullscreen,
    RecordsScoreInfo,
  },
  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",
        "”",
      ],
      paraIndex: -1, //段落索引
      sentIndex: -1, // 句子索引
      repeatAfter: false,
      singleModel: false,
      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),
      score: null,
      activeSentId: "",
      recordsScoreInfoFlag: false,
      scoreInfo: null,
    };
  },
  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;
    },
    wordStyle() {
      return function () {
        let color = "";
        if (this.score < 60) {
          color = "#F2555A";
        } else if (60 <= this.score && this.score < 80) {
          color = "#929CA8";
        } else if (80 <= this.score && this.score < 90) {
          color = "#0081F1";
        } else if (this.score >= 90) {
          color = "#1CCDA7";
        }
        return {
          color: color,
        };
      };
    },
  },
  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]
          ? this.resArr.timeList[this.playSentIndex].s
          : null
      );
    },
    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
          // );
          this.$refs.audioLine.StopAudio();
        } 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);
        if (
          articleInfo.art_sound_srt_data &&
          articleInfo.art_sound_srt_data.sents &&
          articleInfo.art_sound_srt_data.sents[index]
        ) {
          resArr.timeList.push(articleInfo.art_sound_srt_data.sents[index]);
        }
      });
      this.resArr = resArr;
    },
    handleChangeTime(time, ed, flag, type) {
      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;
          }
          if (this.$refs.audioLine)
            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.score = null;
      this.scoreInfo = null;
      this.audio.pause();
      this.audioc.pause();
      if (_this.$refs.audioLine && _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 = Math.ceil(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, toltime);
        };
      }
      _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, toltime) {
      if (this.playSentIndex === -1) {
        return;
      }

      this.activeSentId =
        this.articleInfo.art_corpus_data.sentList[this.playSentIndex].id;
      let MethodName = "/PaperServer/Client/UserSentRec/AddUserSentRec";
      let data = {
        sent_id:
          this.articleInfo.art_corpus_data.sentList[this.playSentIndex].id,
        rec_sound_data: wav,
        toltime: toltime,
      };
      getLogin(MethodName, data).then((res) => {
        this.score = JSON.parse(
          res.data.current.rec_rate_info
        ).score_result.average_score;
        this.scoreInfo = res.data;
        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();
        if (_this.resArr.timeList[playSentIndex]) {
          _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;
    },
    lookMoreInfo() {
      this.recordsScoreInfoFlag = true;
    },
    closeScoreInfo() {
      this.recordsScoreInfoFlag = 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;
    }
    .score-box {
      position: absolute;
      right: -110px;
      top: 50%;
      margin-top: -55px;
      z-index: 1;
      padding: 8px;
      border-radius: 4px;
      background: #f2f3f5;
      color: #4e5969;
      font-size: 14px;
      line-height: 22px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      width: 96px;
      text-align: center;
      .score {
        border-radius: 4px;
        background: #fff;
        text-align: center;
        padding: 8px 12px;
        color: #929ca8;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        b {
          font-size: 20px;
          line-height: 28px;
        }
      }
      a {
        color: #929ca8;
        font-size: 14px;
        line-height: 22px;
        margin-top: 8px;
      }
    }
    .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 - 172px);
  position: fixed;
  top: 510px;
  overflow: auto;
  width: 152px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ebebeb;
  background: #fff;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1),
    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.4);
    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>