GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/VoiceMatrix.vue

<template>
  <div v-if="curQue" class="voice-matrix">
    <div class="voice-matrix-audio">
      <div v-if="curQue.voiceMatrix.isAudioNumber" class="audio-number">
        <span
          :class="[
            themeColor.length === 0 || themeColor === 'red'
              ? 'serial-number'
              : `serial-number-${themeColor}`
          ]"
        >
          {{ curQue.voiceMatrix.audioSerialNumber }}
        </span>
      </div>
      <div v-show="hasSelectedCell" class="audio-simple">
        <img
          class="audio-simple-image"
          :src="playing ? voicePlaySrc : voicePauseSrc"
          @click="playAudio"
        />
        <span
          :class="[
            'Repeat-16',
            'audio-simple-repeat',
            isRepeat ? '' : 'disabled'
          ]"
          @click="isRepeat = !isRepeat"
        />
      </div>
      <audio-line
        v-show="!hasSelectedCell"
        ref="audioLine"
        audio-id="voiceMatrixAudio"
        :mp3="mp3Url"
        :get-cur-time="getCurTime"
        :stop-audio="stopAudio"
        :mp3-source="mp3Source"
        :base-size-phone="baseSizePhone"
        @handleChangeStopAudio="handleChangeStopAudio"
        @playChange="playChange"
      />
    </div>
    <!-- 语音矩阵 -->
    <div
      class="voice-matrix-container"
      :style="{ fontSize: baseSizePhone + 'px' }"
    >
      <div
        v-if="curQue.voiceMatrix.matrix.length > 0"
        class="matrix"
        :style="{
          'grid-template': `36px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(36px, 1fr) / 36px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(36px, 1fr)`
        }"
        @mouseleave="clearSelectCell"
      >
        <!-- 顶部单元格 -->
        <div class="matrix-top" @mouseenter="clearSelectCell" />
        <template v-for="(row, i) in curQue.voiceMatrix.matrix[0]">
          <div
            :key="`top-${i}`"
            :class="[
              'matrix-top',
              curQue.voiceMatrix.columnSelection &&
              (selectColumn === i ||
                (selectedLine.type === 'column' && selectedLine.index === i))
                ? 'read'
                : ''
            ]"
            @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
          >
            <span
              v-if="
                row.type !== 'connection' && curQue.voiceMatrix.columnSelection
              "
              :class="[
                `matrix-checkbox-row-${themeColor}`,
                selectedLine.type === 'column' && selectedLine.index === i
                  ? 'active'
                  : ''
              ]"
              @click="selectRowOrColumn(i, 'column')"
            />
          </div>
        </template>
        <div class="matrix-top" @mouseenter="clearSelectCell" />
        <!-- 主矩阵 -->
        <template v-for="(row, i) in curQue.voiceMatrix.matrix">
          <div
            :key="`start-${i}`"
            :class="[
              'column-wrapper',
              curQue.voiceMatrix.rowSelection &&
              (selectRow === i ||
                (selectedLine.type === 'row' && selectedLine.index === i))
                ? 'read'
                : ''
            ]"
            @mouseenter="checkboxMouseenter(selectRow === i, 'row')"
          >
            <span
              v-if="curQue.voiceMatrix.rowSelection"
              :class="[
                `matrix-checkbox-column-${themeColor}`,
                selectedLine.type === 'row' && selectedLine.index === i
                  ? 'active'
                  : ''
              ]"
              @click="selectRowOrColumn(i, 'row')"
            />
          </div>
          <!-- 单元格 -->
          <template v-for="(column, j) in row">
            <div
              :key="`wrapper-${i}-${j}`"
              :class="[
                'column-wrapper',
                (curQue.voiceMatrix.rowSelection && selectRow === i) ||
                (curQue.voiceMatrix.columnSelection && selectColumn === j) ||
                (curQue.voiceMatrix.columnSelection &&
                  selectedLine.type === 'column' &&
                  selectedLine.index === j) ||
                (curQue.voiceMatrix.rowSelection &&
                  selectedLine.type === 'row' &&
                  selectedLine.index === i)
                  ? 'read'
                  : '',
                (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
                (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                  ? `highlight-${themeColor}`
                  : ''
              ]"
              @mouseenter="matrixCellMouseenter(i, j, column.type)"
            >
              <!-- 文本 -->
              <div
                v-if="column.type === 'text'"
                :key="`column-${i}-${j}`"
                :class="[
                  column.text.length === 0 ? 'space' : `column-${themeColor}`,
                  (selectCell.row === i && selectCell.column === j) ||
                  (selectedLine.type === 'column' &&
                    selectedLine.index === j) ||
                  (selectedLine.type === 'row' && selectedLine.index === i)
                    ? 'selected'
                    : '',
                  playing &&
                  column.lrc_data.begin_time / 1000 <= curTime &&
                  (curTime < column.lrc_data.end_time / 1000 ||
                    column.lrc_data.end_time === -1)
                    ? 'playing'
                    : '',
                  column.isTitle ? 'title' : ''
                ]"
                @click="matrixCellClick(i, j)"
              >
                <span>{{ column.text }}</span>
              </div>
              <!-- 连接线 -->
              <div
                v-else-if="column.type === 'connection'"
                :key="`column-${i}-${j}`"
                :class="[
                  'connection',
                  i === 0 && curQue.voiceMatrix.firstLineHighlight
                    ? `highlight-bc-${themeColor}`
                    : ''
                ]"
              />
              <!-- 分词 -->
              <div
                v-else-if="column.type === 'SentenceSegwordChs'"
                :key="`column-${i}-${j}`"
                :class="[
                  `sentence-${themeColor}`,
                  (selectCell.row === i && selectCell.column === j) ||
                  (selectedLine.type === 'column' &&
                    selectedLine.index === j) ||
                  (selectedLine.type === 'row' && selectedLine.index === i)
                    ? 'selected'
                    : '',
                  playing &&
                  column.lrc_data.begin_time / 1000 <= curTime &&
                  (curTime < column.lrc_data.end_time / 1000 ||
                    column.lrc_data.end_time === -1)
                    ? 'playing'
                    : '',
                  column.isTitle ? 'title' : ''
                ]"
                :style="{
                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
                }"
                @click="matrixCellClick(i, j)"
              >
                <template
                  v-for="({ pinyin, chs }, w) in column.sentence_data.wordsList"
                >
                  <span
                    :key="
                      `${
                        column.sentence_data.pyPosition === 'top'
                          ? 'pinyin'
                          : 'chs'
                      }-${w}`
                    "
                    :class="
                      column.sentence_data.pyPosition === 'top'
                        ? 'pinyin'
                        : 'chs'
                    "
                  >
                    {{
                      column.sentence_data.pyPosition === "top" ? pinyin : chs
                    }}
                  </span>
                </template>
                <template
                  v-for="({ pinyin, chs }, w) in column.sentence_data.wordsList"
                >
                  <span
                    :key="
                      `${
                        column.sentence_data.pyPosition === 'top'
                          ? 'chs'
                          : 'pinyin'
                      }-${w}`
                    "
                    :class="
                      column.sentence_data.pyPosition === 'top'
                        ? 'chs'
                        : 'pinyin'
                    "
                  >
                    {{
                      column.sentence_data.pyPosition === "top" ? chs : pinyin
                    }}
                  </span>
                </template>
              </div>
              <!-- 拼音 + 英文 -->
              <div
                v-else-if="column.type === 'PinyinEnglish'"
                :key="`column-${i}-${j}`"
                :class="[
                  `pinyinEnglish-${themeColor}`,
                  (selectCell.row === i && selectCell.column === j) ||
                  (selectedLine.type === 'column' &&
                    selectedLine.index === j) ||
                  (selectedLine.type === 'row' && selectedLine.index === i)
                    ? 'selected'
                    : '',
                  playing &&
                  column.lrc_data.begin_time / 1000 <= curTime &&
                  (curTime < column.lrc_data.end_time / 1000 ||
                    column.lrc_data.end_time === -1)
                    ? 'playing'
                    : '',
                  column.isTitle ? 'title' : ''
                ]"
                @click="matrixCellClick(i, j)"
              >
                <div class="inside-wrapper">
                  <div class="pinyin">
                    {{ column.pinyin_english_data.pinyin }}
                  </div>
                  <div class="english">
                    {{ column.pinyin_english_data.english }}
                  </div>
                </div>
              </div>
              <!-- 文本中有括号 -->
              <div
                v-else-if="column.type === 'textBrackets'"
                :key="`column-${i}-${j}`"
                :class="[
                  `textBrackets-${themeColor}`,
                  (selectCell.row === i && selectCell.column === j) ||
                  (selectedLine.type === 'column' &&
                    selectedLine.index === j) ||
                  (selectedLine.type === 'row' && selectedLine.index === i)
                    ? 'selected'
                    : '',
                  playing &&
                  column.lrc_data.begin_time / 1000 <= curTime &&
                  (curTime < column.lrc_data.end_time / 1000 ||
                    column.lrc_data.end_time === -1)
                    ? 'playing'
                    : '',
                  column.isTitle ? 'title' : ''
                ]"
                @click="matrixCellClick(i, j)"
              >
                <span>
                  <span
                    :class="[
                      getBracketsOuterTypeClass(
                        column.text_brackets.brackets_outer_type
                      )
                    ]"
                  >
                    {{ column.text_brackets.brackets_outer }}
                  </span>
                  <span class="brackets">&nbsp;[&nbsp;</span>
                  <span
                    :class="[
                      column.text_brackets.brackets_inner_type === 'pinyin'
                        ? 'pinyin'
                        : 'english'
                    ]"
                  >
                    {{ column.text_brackets.brackets_inner }}
                  </span>
                  <span class="brackets">&nbsp;]</span>
                </span>
              </div>
            </div>
          </template>

          <div
            :key="`end-${i}`"
            :class="[
              curQue.voiceMatrix.rowSelection &&
              (selectRow === i ||
                (selectedLine.type === 'row' && selectedLine.index === i))
                ? 'read'
                : ''
            ]"
            @mouseenter="clearSelectCell"
          />
        </template>
        <!-- 底部格子 -->
        <div class="matrix-bottom" @mouseenter="clearSelectCell" />
        <template v-for="(row, i) in curQue.voiceMatrix.matrix[0]">
          <div
            :key="`bottom-${i}`"
            :class="[
              'matrix-bottom',
              curQue.voiceMatrix.columnSelection &&
              (selectColumn === i ||
                (selectedLine.type === 'column' && selectedLine.index === i))
                ? 'read'
                : ''
            ]"
            @mouseenter="clearSelectCell"
          />
        </template>
        <div class="matrix-bottom" @mouseenter="clearSelectCell" />
      </div>
    </div>
    <!-- 录音 -->
    <div class="voice-luyin">
      <Soundrecord
        v-if="refresh"
        ref="luyin"
        type="promax"
        class="luyin-box"
        :file-name="fileName"
        :select-data="selectData"
        :answer-record-list="curQue.Bookanswer.recordList"
        :task-model="TaskModel"
        :base-size-phone="baseSizePhone"
        @getWavblob="getWavblob"
        @getSelectData="getSelectData"
        @handleParentPlay="pauseOtherAudio"
        @sentPause="sentPause"
        @handleWav="handleWav"
      />
      <AudioCompare
        :style="{ flex: 1 }"
        :theme-color="themeColor"
        :wavblob="wavblob"
        :url="mp3Url"
        :is-record="isRecord"
        :sent-pause="sentPause"
        :matrix-select-lrc="matrixSelectLrc"
        :get-cur-time="getCurTime"
        :cur-time="curTime"
        :handle-change-stop-audio="handleChangeStopAudio"
        @playing="playChange"
      />
      <span ref="fullscreen" class="fullscreen" @click="fullScreen">
        <span>黑板模式</span>
        <el-image :src="fullscreenSrc" />
      </span>
    </div>
    <div :id="`screen-${cid}`" class="voice-full-screen">
      <VoiceFullscreen
        v-if="isFull"
        :theme-color="themeColor"
        :cur-que="curQue"
        :mp3="mp3Url"
        :matrix-select-lrc="matrixSelectLrc"
        :record-list="curQue.Bookanswer.recordList"
        @exitFullscreen="exitFullscreen"
        @changeIsFull="changeIsFull"
        @handleWav="handleWav"
      />
    </div>
  </div>
</template>

<script>
import Bus from "./components/Bus.js";
import AudioLine from "./AudioLine.vue";
import Soundrecord from "./Soundrecord.vue";
import AudioCompare from "./AudioCompareMatrix.vue";
import VoiceFullscreen from "./VoiceMatrixFullscreen.vue";

export default {
  components: {
    AudioLine,
    Soundrecord,
    AudioCompare,
    VoiceFullscreen
  },
  props: ["curQue", "themeColor", "TaskModel", "baseSizePhone"],
  data() {
    return {
      // 组件id
      cid: Math.random()
        .toString(36)
        .substr(2, 10),
      isFull: false,
      curTime: 0,
      playing: false,
      stopAudio: true,
      unWatch: null,
      lrcArray: [],
      fileName: "",
      // 底色行、列
      selectRow: -1,
      selectColumn: -1,
      // 行、列选中
      selectedLine: {
        type: "",
        index: 0
      },
      // 点击选中
      selectCell: {
        row: -1,
        column: -1
      },
      isRepeat: false,
      // 跟读所需属性
      wavblob: null,
      isRecord: false,
      matrixSelectLrc: null,
      refresh: true
    };
  },
  computed: {
    mp3Url() {
      let mp3_list = this.curQue.mp3_list[0];
      if (mp3_list === undefined) return "";
      return mp3_list.url.match(/^\[FID##/)
        ? mp3_list.temporary_url
        : mp3_list.url;
    },
    mp3Source() {
      let mp3_list = this.curQue.mp3_list[0];
      if (mp3_list === undefined) return "";
      return "source" in mp3_list ? mp3_list.source : "";
    },
    mp3Duration() {
      let mp3_list = this.curQue.mp3_list[0];
      if (mp3_list === undefined) return 0;
      return mp3_list.media_duration * 1000;
    },

    hasSelectedCell() {
      let { type, index } = this.selectedLine;
      let { row, column } = this.selectCell;
      return (type.length > 0 && index >= 0) || (row >= 0 && column >= 0);
    },
    selectData() {
      let { type, index } = this.selectedLine;
      let { row, column } = this.selectCell;
      return {
        type: type.length > 0 && index >= 0 ? type : "cell",
        index,
        row,
        column
      };
    },

    voicePauseSrc() {
      const themeColor = this.themeColor;
      if (themeColor.length === 0 || themeColor === "red") {
        return require("../../../assets/NPC/play-red.png");
      }
      return require(`../../../assets/NPC/play-${themeColor}.png`);
    },
    voicePlaySrc() {
      const themeColor = this.themeColor;
      if (themeColor.length === 0 || themeColor === "red") {
        return require("../../../assets/NPC/icon-voice-play-red.png");
      }
      return require(`../../../assets/NPC/icon-voice-play-${themeColor}.png`);
    },
    fullscreenSrc() {
      return require("../../../assets/NPC/full-screen-red.png");
    }
  },
  watch: {
    hasSelectedCell() {
      this.handleParentPlay();
    },
    isFull: {
      handler(newVal, oldVal) {
        this.refresh = false;
        if (!newVal) {
          this.$nextTick(() => {
            // 重新渲染组件
            this.refresh = true;
          });
        }
      },
      deep: true
    }
  },
  created() {
    Bus.$on("audioPause", id => {
      if (this.cid === id) return;
      this.$nextTick(() => {
        if (this.$refs.luyin?.microphoneStatus) this.$refs.luyin.microphone();
        this.handleParentPlay();
      });
    });
    if (!this.curQue.Bookanswer) {
      let bookanswer = {
        recordList: []
      };
      this.$set(this.curQue, "Bookanswer", bookanswer);
    }
  },

  mounted() {
    // 如果一行内有两个语音矩阵，隐藏 全屏模式 文字
    if (
      Number(
        window.getComputedStyle(this.$refs.fullscreen).width.replace("px", "")
      ) < 80
    ) {
      // this.$refs.fullscreen.children[0].hidden = true;
    }
  },
  beforeDestroy() {},
  methods: {
    // 鼠标移入移出
    matrixCellMouseenter(i, j, type) {
      if (type === "connection") {
        this.selectRow = -1;
        this.selectColumn = -1;
      } else {
        this.selectRow = i;
        this.selectColumn = j;
      }
    },

    clearSelectCell() {
      this.selectRow = -1;
      this.selectColumn = -1;
    },

    // 单击单元格
    matrixCellClick(row, column) {
      if (this.playing) this.handleParentPlay();
      if (this.unWatch) this.unWatch();
      this.lrcArray = [];
      if (row === this.selectCell.row && column === this.selectCell.column) {
        this.selectCell = { row: -1, column: -1 };
        return;
      }
      this.selectedLine = { type: "", index: -1 };
      this.selectCell = { row, column };
      this.handleChangeTime(
        this.curQue.voiceMatrix.matrix[row][column].lrc_data
      );
      // 设置录音文件名
      this.setRecordingFileName(row, column);
    },

    setRecordingFileName(row, column) {
      let {
        type,
        text,
        sentence_data,
        pinyin_english_data,
        text_brackets
      } = this.curQue.voiceMatrix.matrix[row][column];
      if (type === "text") this.fileName = text;
      if (type === "SentenceSegwordChs") this.fileName = sentence_data.sentence;
      if (type === "PinyinEnglish") this.fileName = pinyin_english_data.pinyin;
      if (type === "textBrackets") {
        this.fileName = `${text_brackets.brackets_outer}[${text_brackets.brackets_inner}]`;
      }
    },

    checkboxMouseenter(isSelected, type) {
      if (!isSelected) return this.clearSelectCell();
      if (type === "row") this.selectColumn = -1;
      if (type === "column") this.selectRow = -1;
    },

    // 选中行、列
    selectRowOrColumn(index, type) {
      this.handleParentPlay();
      this.lrcArray = [];
      this.selectCell = { row: -1, column: -1 };
      if (this.unWatch) this.unWatch();
      if (
        this.selectedLine.type === type &&
        this.selectedLine.index === index
      ) {
        this.selectedLine = { type: "", index: -1 };
        return;
      }
      this.selectedLine = { type, index };
      let number = index;
      if (type === "column") {
        this.curQue.voiceMatrix.matrix[index].forEach(({ type }, i) => {
          if (i >= index) return;
          if (type === "connection") number -= 1;
        });
      }
      this.fileName = `第 ${number + 1} ${type === "row" ? "行" : "列"}`;
    },

    getBracketsOuterTypeClass(type) {
      if (type === "pinyin") return "pinyin";
      if (type === "chs") return "chs";
      if (type === "english") return "english";
      return "chs";
    },

    playAudio() {
      if (!this.hasSelectedCell) return;
      if (this.playing) return this.handleParentPlay();
      if (this.lrcArray.length > 0) return this.$refs.audioLine.PlayAudio();
      if (this.unWatch) this.unWatch();

      this.lrcArray = [];
      let { type, index } = this.selectedLine;
      if (type.length > 0 && index >= 0 && type === "row") {
        this.curQue.voiceMatrix.matrix[index].forEach(item => {
          let data = this.getLrcData(item);
          if (data && "begin_time" in data) this.lrcArray.push(data);
        });
        if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);
        return;
      }

      if (type.length > 0 && index >= 0 && type === "column") {
        this.curQue.voiceMatrix.matrix.forEach(item => {
          let data = this.getLrcData(item[index]);
          if (data && "begin_time" in data) this.lrcArray.push(data);
        });
        if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);
        return;
      }

      let { row, column } = this.selectCell;
      if (row >= 0 && column >= 0) {
        this.handleChangeTime(
          this.curQue.voiceMatrix.matrix[row][column].lrc_data
        );
      }
    },

    lrcPlay({ begin_time, end_time }, index) {
      this.handleParentPlay();
      this.$nextTick(() => {
        this.$refs.audioLine.onTimeupdateTime(begin_time / 1000);
        this.$refs.audioLine.PlayAudio();
        if (end_time === -1) return;
        let end = end_time / 1000 - 0.01;
        this.unWatch = this.$watch("curTime", val => {
          if (val >= end) {
            if (!this.hasSelectedCell) return this.unWatch();
            this.handleParentPlay();
            this.$refs.audioLine.onTimeupdateTime(end);
            this.unWatch();
            let i = index + 1;
            if (i < this.lrcArray.length) {
              return this.lrcPlay(this.lrcArray[i], i);
            }
            if (this.isRepeat) {
              return this.lrcPlay(this.lrcArray[0], 0);
            }
            this.lrcArray = [];
          }
        });
      });
    },

    playChange(playing) {
      this.playing = playing;
      // 子组件通信，同时只能播放一个音频
      if (playing) Bus.$emit("audioPause", this.cid);
    },

    pauseOtherAudio() {
      Bus.$emit("audioPause", this.cid);
      this.stopAudio = true;
    },

    // 暂停音频播放
    handleParentPlay() {
      this.stopAudio = true;
    },
    // 音频播放时改变布尔值
    handleChangeStopAudio() {
      this.stopAudio = false;
    },

    getCurTime(curTime) {
      this.curTime = curTime;
    },

    getWavblob(wavblob) {
      this.wavblob = wavblob;
    },

    getSelectData({ type, index, row, column }) {
      if (type === "") return;
      if (index === 0 && row === -1 && column === -1) {
        this.matrixSelectLrc = null;
        return;
      }
      let arr = [];
      if (type.length > 0 && index >= 0 && type === "row") {
        this.curQue.voiceMatrix.matrix[index].forEach(item => {
          let data = this.getLrcData(item);
          if (data) arr.push(data);
        });
        this.matrixSelectLrc = arr;
        return;
      }

      if (type.length > 0 && index >= 0 && type === "column") {
        this.curQue.voiceMatrix.matrix.forEach(item => {
          let data = this.getLrcData(item[index]);
          if (data) arr.push(data);
        });
        this.matrixSelectLrc = arr;
        return;
      }

      if (type === "cell" && row >= 0 && column >= 0) {
        let lrcData = this.curQue.voiceMatrix.matrix[row][column].lrc_data;
        if (lrcData.end_time === -1) lrcData.end_time = this.mp3Duration;
        this.matrixSelectLrc = [lrcData];
      }
    },

    getLrcData({ type, text, lrc_data }) {
      if (
        type === "SentenceSegwordChs" ||
        type === "PinyinEnglish" ||
        type === "textBrackets" ||
        (type === "text" && text.length > 0)
      ) {
        if (lrc_data.end_time === -1) {
          return {
            begin_time: lrc_data.begin_time,
            end_time: this.mp3Duration,
            text: lrc_data.text
          };
        }
        return lrc_data;
      }
      return false;
    },

    sentPause(isRecord) {
      this.isRecord = isRecord;
    },

    pauseAudio() {
      let audio = document.getElementsByTagName("audio");
      if (
        audio &&
        audio.length > 0 &&
        window.location.href.indexOf("GCLS-Learn") == -1
      ) {
        audio.forEach(item => {
          item.pause();
        });
      }
    },
    fullScreen() {
      this.pauseAudio();
      this.isFull = true;
      // this.goFullscreen();
    },
    goFullscreen() {
      let element = document.getElementById(`screen-${this.cid}`);
      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;
    },

    handleChangeTime({ begin_time, end_time }) {
      if (this.unWatch) this.unWatch();
      this.handleParentPlay();
      this.$nextTick(() => {
        this.$refs.audioLine.onTimeupdateTime(begin_time / 1000);
        setTimeout(() => {
          this.$refs.audioLine.PlayAudio();
        });

        // 监听是否已到结束时间，为了选中效果 - 0.01
        if (end_time === -1) return;
        let end = end_time / 1000 - 0.01;
        this.unWatch = this.$watch("curTime", val => {
          if (val >= end) {
            this.handleParentPlay();
            this.$refs.audioLine.onTimeupdateTime(end);
            this.unWatch();
            this.unWatch = null;
            if (this.isRepeat) {
              this.handleChangeTime({ begin_time, end_time });
            }
          }
        });
      });
    },
    handleWav(list, tmIndex = 0) {
      this.$set(this.curQue.Bookanswer, "recordList", list);
    }
  }
};
</script>

<style lang="scss" scoped>
$select-color: #de4444;
$border-color: rgba(0, 0, 0, 0.1);

$select-color-green: #24b99e;
$select-color-green-bc: rgba(36, 185, 158, 0.25);
$select-color-green-hover: #3dd4b8;
$select-color-green-active: #1fa189;

$select-color-brown: #bd8865;
$select-color-brown-bc: rgba(189, 136, 101, 0.25);
$select-color-brown-hover: #d6a687;
$select-color-brown-active: #a37557;

.voice-matrix {
  height: 100%;
  width: 100%;
  // padding-bottom: 24px;
  color: #262626;

  &-audio {
    display: flex;
    height: 42px;
    border: 1px solid $border-color;
    border-radius: 8px 8px 0 0;

    .audio-number {
      padding: 11px 0 0 12px;

      %serial-number,
      .serial-number {
        display: inline-block;
        width: 16px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        font-size: 12px;
        background-color: $select-color;
        font-family: "robot";
        // color: #fff;
        border-radius: 50%;
      }

      .serial-number-green {
        @extend %serial-number;

        background-color: $select-color-green;
      }

      .serial-number-brown {
        @extend %serial-number;

        background-color: $select-color-brown;
      }
    }

    .audio-simple {
      flex-grow: 1;
      line-height: 46px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      img {
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-left: 12px;
      }

      .Repeat-16 {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 12px;
        cursor: pointer;
      }
    }
  }
  // 语音矩阵
  &-container {
    overflow: auto;
    font-size: 16px;
    height: calc(100% - 80px);
    // background-color: #f5f5f5;
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;
    word-break: break-word;

    .matrix {
      display: inline-grid;
      width: 100%;
      height: 100%;

      %matrix-checkbox {
        position: relative;
        top: calc(50% - 5px);
        display: block;
        width: 14px;
        height: 14px;
        border: 1.5px solid #b0b0b0;
        border-radius: 4px;
        margin: 0 auto;
        cursor: pointer;

        &.active {
          border-color: $select-color;

          &::after {
            box-sizing: content-box;
            content: "";
            border: 1px solid $select-color;
            border-left: 0;
            border-top: 0;
            height: 7px;
            left: 4px;
            position: absolute;
            width: 3px;
            transform: rotate(45deg) scaleY(1);
            transition: transform 0.15s ease-in 0.05s;
            transform-origin: center;
          }
        }
      }

      .matrix-checkbox-row-,
      .matrix-checkbox-row-red {
        @extend %matrix-checkbox;
      }

      .matrix-checkbox-row-green {
        @extend %matrix-checkbox;

        &.active {
          border-color: $select-color-green-active;

          &::after {
            border-color: $select-color-green-active;
          }
        }
      }

      .matrix-checkbox-row-brown {
        @extend %matrix-checkbox;

        &.active {
          border-color: $select-color-brown-active;

          &::after {
            border-color: $select-color-brown-active;
          }
        }
      }

      %matrix-checkbox-column,
      .matrix-checkbox-column-,
      .matrix-checkbox-column-red {
        @extend %matrix-checkbox;

        top: calc(50% - 7px);
        right: -2px;
      }

      .matrix-checkbox-column-green {
        @extend %matrix-checkbox-column;

        &.active {
          border-color: $select-color-green-active;

          &::after {
            border-color: $select-color-green-active;
          }
        }
      }

      .matrix-checkbox-column-brown {
        @extend %matrix-checkbox-column;

        &.active {
          border-color: $select-color-brown-active;

          &::after {
            border-color: $select-color-brown-active;
          }
        }
      }

      .read {
        background-color: #eaeaea;
      }

      .highlight-,
      .highlight-red {
        color: $select-color;
      }

      .highlight-green {
        color: $select-color-green;
      }

      .highlight-brown {
        color: $select-color-brown;
      }

      .column-wrapper {
        padding: 4px;

        %column {
          width: 100%;
          height: 100%;
          min-height: 24px;
          // background-color: #fff;
          border: 1px solid $border-color;
          border-radius: 8px;
          transition: 0.2s;
          cursor: pointer;
          user-select: none;

          &:hover {
            border-color: #8c8c8c;
          }

          &.selected {
            color: $select-color;
            border-color: $select-color;
          }

          &.playing {
            background-color: #fee;
          }

          &.title {
            background-color: transparent;
            border-color: transparent;
          }

          > span {
            display: inline-block;
            white-space: nowrap;
            padding: 4px 12px;
            line-height: 1.4;
          }
        }

        %column-red,
        .column-,
        .column-red {
          @extend %column;

          position: relative;
          font-family: "GB-PINYINOK-B", "楷体", "FZJCGFKTK";

          &::before {
            display: inline-block;
            content: "";
            vertical-align: middle;
          }
        }

        .column-green {
          @extend %column-red;

          &.selected {
            color: $select-color-green;
            border-color: $select-color-green;
          }

          &.playing {
            background-color: $select-color-green-bc;
          }
        }

        .column-brown {
          @extend %column-red;

          &.selected {
            color: $select-color-brown;
            border-color: $select-color-brown;
          }

          &.playing {
            background-color: $select-color-brown-bc;
          }
        }

        %sentence,
        .sentence-,
        .sentence-red {
          @extend %column;

          display: inline-grid;
          padding: 4px 12px;
          line-height: 24px;
          column-gap: 8px;
          justify-items: center;
          justify-content: start;

          > span {
            padding: 0;
          }

          .pinyin {
            font-family: "GB-PINYINOK-B";
            opacity: 0.45;
            font-size: 12px;
            line-height: 20px;
          }

          .chs {
            font-family: "楷体", "FZJCGFKTK";
            font-size: 16px;
            line-height: 24px;
          }
        }

        .sentence-green {
          @extend %sentence;

          &.selected {
            color: $select-color-green;
            border-color: $select-color-green;
          }

          &.playing {
            background-color: $select-color-green-bc;
          }
        }

        .sentence-brown {
          @extend %sentence;

          &.selected {
            color: $select-color-brown;
            border-color: $select-color-brown;
          }

          &.playing {
            background-color: $select-color-brown-bc;
          }
        }

        .connection {
          position: relative;
          top: calc(50% - 1px);
          height: 2px;
          width: 16px;
          margin: 0 -4px;
          border-radius: 4px;
          background-color: #252525;

          &.highlight-bc-,
          &.highlight-bc-red {
            background-color: $select-color;
          }

          &.highlight-bc-green {
            background-color: $select-color-green;
          }

          &.highlight-bc-brown {
            background-color: $select-color-brown;
          }
        }
        // 拼音 + 文字
        %pinyinEnglish,
        .pinyinEnglish-,
        .pinyinEnglish-red {
          @extend %column;

          .inside-wrapper {
            padding: 4px 12px;
            white-space: nowrap;

            .pinyin {
              font-family: "GB-PINYINOK-B";
              font-size: 16px;
              line-height: 24px;
            }

            .english {
              font-family: "robot";
              opacity: 0.45;
              font-size: 12px;
              line-height: 20px;
            }
          }
        }

        .pinyinEnglish-green {
          @extend %pinyinEnglish;

          &.selected {
            color: $select-color-green;
            border-color: $select-color-green;
          }

          &.playing {
            background-color: $select-color-green-bc;
          }
        }

        .pinyinEnglish-brown {
          @extend %pinyinEnglish;

          &.selected {
            color: $select-color-brown;
            border-color: $select-color-brown;
          }

          &.playing {
            background-color: $select-color-brown-bc;
          }
        }

        // 文本中有括号
        %textBrackets,
        .textBrackets-,
        .textBrackets-red {
          @extend %column;

          .chs {
            font-family: "楷体", "FZJCGFKTK";
          }

          .pinyin {
            font-family: "GB-PINYINOK-B";
          }

          .english {
            font-family: "robot";
          }

          .brackets {
            font-size: 16px;
            font-family: "楷体", "FZJCGFKTK";
          }
        }

        .textBrackets-green {
          @extend %textBrackets;

          &.selected {
            color: $select-color-green;
            border-color: $select-color-green;
          }

          &.playing {
            background-color: $select-color-green-bc;
          }
        }

        .textBrackets-brown {
          @extend %textBrackets;

          &.selected {
            color: $select-color-brown;
            border-color: $select-color-brown;
          }

          &.playing {
            background-color: $select-color-brown-bc;
          }
        }
      }
    }

    .matrix-audio {
      width: 228px;
      height: 40px;
      padding: 4px 4px 4px 16px;
      margin: 24px 24px 0 0;
      // background-color: #fff;
      border: 1px solid $border-color;
      border-radius: 8px;
    }
  }

  .voice-luyin {
    display: flex;
    border: 1px solid $border-color;
    border-radius: 0 0 8px 8px;
    align-items: center;
    padding: 3px 16px;
    height: 40px;

    .fullscreen {
      cursor: pointer;
      .el-image {
        width: 16px;
        height: 16px;
        margin-left: 8px;
        vertical-align: text-bottom;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.NNPE-tableList-tr-last {
  .voice-matrix {
    padding-bottom: 0;
  }
}
</style>

<style lang="scss">
.voice-matrix {
  &-audio {
    .audioLine {
      border-radius: 8px 8px 0 0 !important;
    }

    .el-slider {
      width: 100% !important;
    }
  }

  .luyin-box {
    .el-select .el-input {
      width: 126px;
    }
  }
}
</style>