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

<template>
  <div :class="['voicefull', bgIndex === 0 ? 'bg1' : 'bg2']">
    <div class="voicefull-top">
      <div :class="['voicefull-top-show']">
        <div class="top-left">
          <div :class="['select-bg', bgIndex === 1 ? 'select-bg-blue' : '']">
            <div :class="['bg-green-box', bgIndex === 1 ? 'active' : '']">
              <span
                :class="['bg-green', bgIndex === 1 ? 'active' : '']"
                @click="changeBg(1)"
              />
            </div>
            <div :class="['bg-white-box', bgIndex === 0 ? 'active' : '']">
              <span
                :class="['bg-white', bgIndex === 0 ? 'active' : '']"
                @click="changeBg(0)"
              />
            </div>
          </div>
          <div
            :class="['set-fontSize', bgIndex === 1 ? 'set-fontSize-green' : '']"
          >
            <template v-if="hzSize >= 34">
              <span
                :class="[
                  'font-jian-black',
                  bgIndex === 1 ? 'font-jian-yellow' : ''
                ]"
                @click="setFontSize('-')"
              />
            </template>
            <template v-else>
              <span
                :class="[
                  'font-jian-black',
                  bgIndex === 1
                    ? 'font-jian-yellow-disabled'
                    : 'font-jian-white-disabled'
                ]"
              />
            </template>
            <span
              :class="[
                'font-img-black',
                bgIndex === 1 ? 'font-img-yellow' : ''
              ]"
            />
            <template v-if="hzSize <= 76">
              <span
                :class="[
                  'font-jia-black',
                  bgIndex === 1 ? 'font-jia-yellow' : ''
                ]"
                @click="setFontSize('+')"
              />
            </template>
            <template v-else>
              <span
                :class="[
                  'font-jia-black',
                  bgIndex === 1
                    ? 'font-jia-yellow-disabled'
                    : 'font-jia-white-disabled'
                ]"
              />
            </template>
          </div>
        </div>
        <div class="top-middle">
          <template v-if="mp3">
            <voice-matrix-fullscreen-audio
              ref="audioLine"
              audio-id="voiceMatrixFullscreenAudio"
              :is-repeat="isRepeat"
              :bg-index="bgIndex"
              :mp3="mp3"
              :get-cur-time="getCurTime"
              :stop-audio="stopAudio"
              :has-selected-cell="hasSelectedCell"
              @playChange="playChange"
              @parentPlayAudio="playAudio"
              @handleChangeStopAudio="handleChangeStopAudio"
            />
          </template>
          <div
            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
            @click="changeLoopState"
          >
            <span
              :class="[
                'repeat-icon',
                !isRepeat ? 'disabled' : 'auto-icon',
                isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : ''
              ]"
            />
          </div>
          <div
            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
            @click="changePinyin"
          >
            <span
              :class="[
                'pinyin-icon',
                !isShowPY || !isHasPY ? 'disabled' : '',
                isShowPY && isHasPY && bgIndex === 1 ? 'pinyin-icon-yellow' : ''
              ]"
            />
          </div>
          <div
            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
            @click="changeEN"
          >
            <span
              :class="[
                'en-icon',
                !isShowEN || !isHasEN ? 'disabled' : '',
                isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : ''
              ]"
            />
          </div>
        </div>
        <div
          :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
          @click="exitFullScreen"
        >
          <span
            :class="['close-icon', bgIndex === 1 ? 'close-icon-white' : '']"
          />
        </div>
      </div>
    </div>

    <div class="voicefull-content">
      <div
        v-if="curQue.voiceMatrix.matrix.length > 0"
        class="matrix"
        :style="{
          'grid-template': `96px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(1.5em, 1fr) / 112px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(124px, 1fr)`,
          'font-size': `${hzSize}px`
        }"
        @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']"
            @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
          >
            <span
              v-if="
                row.type !== 'connection' && curQue.voiceMatrix.columnSelection
              "
              v-show="
                selectColumn === i ||
                  (selectedLine.type === 'column' && selectedLine.index === i)
              "
              :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']"
            @mouseenter="checkboxMouseenter(selectRow === i, 'row')"
          >
            <span
              v-if="curQue.voiceMatrix.rowSelection"
              v-show="
                selectRow === i ||
                  (selectedLine.type === 'row' && selectedLine.index === i)
              "
              :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',
                (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="({ chs, pinyin }, w) in column.sentence_data.wordsList"
                >
                  <span
                    :key="
                      `${
                        column.sentence_data.pyPosition === 'top'
                          ? 'pinyin'
                          : 'chs'
                      }-${w}`
                    "
                    :style="{
                      visibility:
                        column.sentence_data.pyPosition === 'top' && isShowPY
                          ? 'visible'
                          : 'hidden'
                    }"
                    :class="
                      column.sentence_data.pyPosition === 'top'
                        ? 'pinyin'
                        : 'chs'
                    "
                  >
                    {{
                      column.sentence_data.pyPosition === "top" ? pinyin : chs
                    }}
                  </span>
                </template>
                <template
                  v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
                >
                  <span
                    :key="
                      `${
                        column.sentence_data.pyPosition === 'top'
                          ? 'chs'
                          : 'pinyin'
                      }-${w}`
                    "
                    :style="{
                      visibility:
                        column.sentence_data.pyPosition !== 'top' && isShowPY
                          ? 'hidden'
                          : 'visible'
                    }"
                    :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"
                    :style="{ visibility: isShowEN ? 'visible' : 'hidden' }"
                  >
                    {{ 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="brackets-text">{{
                    column.text_brackets.brackets_outer
                  }}</span>
                  <span class="brackets">&nbsp;[&nbsp;</span>
                  <span class="brackets-text">{{
                    column.text_brackets.brackets_inner
                  }}</span>
                  <span class="brackets">&nbsp;]</span>
                </span>
              </div>
            </div>
          </template>

          <div :key="`end-${i}`" @mouseenter="clearSelectCell" />
        </template>
        <!-- 底部格子 -->
        <div class="matrix-bottom" @mouseenter="clearSelectCell" />
        <template v-for="(row, i) in curQue.voiceMatrix.matrix[0]">
          <div :key="`bottom-${i}`" @mouseenter="clearSelectCell" />
        </template>
        <div class="matrix-bottom" @mouseenter="clearSelectCell" />
      </div>
    </div>

    <div class="voicefull-bottom">
      <div :class="['voicefull-bottom-show']">
        <div class="bottom-left">
          <soundrecorddiff
            ref="Soundrecorddiff"
            :bg-index="bgIndex"
            :file-name="fileName"
            :select-data="selectData"
            :answer-record-list="recordList"
            @getSelectData="getSelectData"
            @getWavblob="getWavblob"
            @handleParentPlay="handleParentPlay"
            @sentPause="sentPause"
            @getRerordStatus="getRerordStatus"
            @getMicrophoneStatus="getMicrophoneStatus"
            @getPlayStatus="getPlayStatus"
            @handleWav="handleWav"
          />
          <div
            v-if="isShowCompare"
            :class="['compare-box', bgIndex === 1 ? 'compare-box-white' : '']"
          >
            <audio-compare
              type="full"
              :theme-color="themeColor"
              :url="mp3"
              :wavblob="wavblob"
              :sent-pause="sentPause"
              :is-record="isRecord"
              :handle-change-stop-audio="handleChangeStopAudio"
              :get-play-status="getPlayStatus"
              :matrix-select-lrc="matrixSelectLrc"
              :get-cur-time="getCurTime"
              :cur-time="curTime"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VoiceMatrixFullscreenAudio from "./VoiceMatrixFullscreenAudio.vue";
import Soundrecorddiff from "./Soundrecorddiff.vue";
import AudioCompare from "./AudioCompareMatrix.vue";
import Wordcard from "./components/Wordcard.vue";

export default {
  components: {
    VoiceMatrixFullscreenAudio,
    Soundrecorddiff,
    AudioCompare,
    Wordcard
  },
  props: ["mp3", "curQue", "themeColor", "recordList"],
  data() {
    return {
      hzSize: 48,
      bgIndex: 1,
      item: null,
      curTime: 0,
      stopAudio: false,
      isShowCompare: false,
      clientY: 0,
      top: 0,
      left: 0,
      isShow: false,
      curWordTime: 0,
      playing: false,
      key: "isRepeat",
      isKeyboard: true,
      isTopShow: false,
      isBottomShow: false,
      isRecording: false,
      recordPlaying: false,
      fileName: "",
      // 底色行、列
      selectRow: -1,
      selectColumn: -1,
      // 行、列选中
      selectedLine: {
        type: "",
        index: 0
      },
      // 点击选中
      selectCell: {
        row: -1,
        column: -1
      },
      isRepeat: false,
      // 跟读所需属性
      wavblob: null,
      isRecord: false,
      matrixSelectLrc: null,
      unWatch: null,
      lrcArray: [],
      cellTimer: null,
      // 拼音、英文显隐判断
      isShowPY: true,
      isShowEN: true
    };
  },
  computed: {
    isHasPY() {
      let matrix = this.curQue.voiceMatrix.matrix;
      for (let i = 0; i < matrix.length; i++) {
        if (matrix[i].some(({ type }) => type === "SentenceSegwordChs")) {
          return true;
        }
      }
      return false;
    },
    isHasEN() {
      let matrix = this.curQue.voiceMatrix.matrix;
      for (let i = 0; i < matrix.length; i++) {
        if (matrix[i].some(({ type }) => type === "PinyinEnglish")) return true;
      }
      return false;
    },
    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
      };
    },
    // 矩阵的行、列数从 0 开始
    matrix() {
      const matrixArr = this.curQue.voiceMatrix.matrix;
      return {
        rows: matrixArr.length - 1,
        columns: matrixArr.length > 0 ? matrixArr[0].length - 1 : -1
      };
    }
  },
  watch: {
    isRecording(newVal) {
      if (newVal) {
        this.isBottomShow = newVal;
      }
    },
    recordPlaying(newVal) {
      if (newVal) {
        this.isBottomShow = newVal;
      }
    },
    isShow(val) {
      if (val) {
        setTimeout(() => {
          this.cardHeight = this.$refs.wordcard.offsetHeight;
          if (this.screenHeight - this.clientY > this.cardHeight) {
            this.top = this.clientY + 20;
          } else {
            this.top = this.clientY - this.cardHeight - 30;
          }
        }, 50);
      }
    }
  },
  created() {
    document.addEventListener("keyup", this.handleKeyup);

    [
      "fullscreenchange",
      "mozfullscreenchange",
      "webkitfullscreenchange",
      "msfullscreenchange"
    ].forEach(event => {
      document.addEventListener(event, this.handleFullscreen);
    });
  },
  beforeDestroy() {
    document.removeEventListener("keyup", this.handleKeyup);
    [
      "fullscreenchange",
      "mozfullscreenchange",
      "webkitfullscreenchange",
      "msfullscreenchange"
    ].forEach(event => {
      document.removeEventListener(event, this.handleFullscreen);
    });
  },
  // 方法集合
  methods: {
    // #region
    /** 语音矩阵方法开始 **/
    // 鼠标移入移出
    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" ? "行" : "列"}`;
    },

    playAudio() {
      console.log(this.hasSelectedCell);
      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) 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) 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 = [];
          }
        });
      });
    },

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

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

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

    handleWav(list, tmIndex = 0) {
      this.$emit("handleWav", list, tmIndex);
    },

    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;
    },

    handleChangeTime({ begin_time, end_time }) {
      if (this.unWatch) this.unWatch();
      this.handleParentPlay();
      this.$nextTick(() => {
        this.$refs.audioLine.onTimeupdateTime(begin_time / 1000);
        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 });
            }
          }
        });
      });
    },
    /** 语音矩阵方法结束 **/
    // #endregion

    /* 全局事件处理 */
    handleKeyup({ key }) {
      if (!this.isKeyboard) return;
      if (key === "Enter") {
        this.$refs.Soundrecorddiff.microphone();
      }
      if (key === " ") {
        this.hasSelectedCell
          ? this.playAudio()
          : this.$refs.audioLine.PlayAudio();
      }

      if (!this.hasSelectedCell) return;
      if (key === "ArrowUp") {
        let { type, index, row, column } = this.selectData;
        if (type === "cell" && row > 0) {
          return this.matrixCellClick(row - 1, column);
        }
        if ((type === "column" || type === "row") && index > 0) {
          return this.selectRowOrColumn(index - 1, type);
        }
      }
      if (key === "ArrowDown") {
        let { type, index, row, column } = this.selectData;
        let { rows } = this.matrix;
        if (type === "cell" && row < rows) {
          return this.matrixCellClick(row + 1, column);
        }
        if ((type === "column" || type === "row") && index < rows) {
          return this.selectRowOrColumn(index + 1, type);
        }
      }
      if (key === "ArrowLeft") {
        let { type, row, column } = this.selectData;
        if (type !== "cell") return;
        if (column > 0) {
          return this.matrixCellClick(row, column - 1);
        }
      }
      if (key === "ArrowRight") {
        let { columns } = this.matrix;
        let { type, row, column } = this.selectData;
        if (type !== "cell") return;
        if (column < columns) {
          return this.matrixCellClick(row, column + 1);
        }
      }
    },

    handleFullscreen() {
      let isFullscreen = Boolean(
        document.fullScreen ||
          document.mozFullScreen ||
          document.webkitIsFullScreen ||
          document.webkitFullScreen ||
          document.msFullScreen
      );
      if (!isFullscreen) this.changeFullScreen();
    },

    setTopShow(bool) {
      this.isTopShow = bool;
    },
    setBottomShow(bool) {
      if (!this.recordPlaying && !this.isRecording) {
        this.isBottomShow = bool;
      }
    },
    getPlayStatus(bool) {
      this.recordPlaying = bool;
    },
    setFontSize(type) {
      if (this.hzSize >= 34 || this.hzSize <= 76) {
        type === "+" ? (this.hzSize += 4) : (this.hzSize -= 4);
      }
    },
    playChange(bool) {
      this.playing = bool;
    },
    changeStatus(key) {
      this[key] = !this[key];
    },
    changeLoopState() {
      this.isRepeat = !this.isRepeat;
    },
    getRerordStatus(bool) {
      this.isShowCompare = bool;
    },
    getMicrophoneStatus(bool) {
      this.isRecording = bool;
    },

    getCurCompareTime(curTime) {
      this.curTime = curTime * 1000;
    },
    getCurWordTime(curTime) {
      this.curWordTime = curTime * 1000;
    },

    changePinyin() {
      if (!this.isHasPY) return;
      this.isShowPY = !this.isShowPY;
    },
    changeEN() {
      if (!this.isHasEN) return;
      this.isShowEN = !this.isShowEN;
    },
    changeBg(bgIndex) {
      this.bgIndex = bgIndex;
    },

    pauseAudio() {
      let audio = document.getElementsByTagName("audio");
      if (
        audio &&
        audio.length > 0 &&
        window.location.href.indexOf("GCLS-Learn") == -1
      ) {
        audio.forEach(item => {
          item.pause();
        });
      }
    },
    exitFullScreen() {
      this.pauseAudio();
      this.$emit("exitFullscreen");
    },
    changeFullScreen() {
      this.pauseAudio();
      this.$emit("changeIsFull");
    }
  }
};
</script>

<style lang="scss" scoped>
$select-color: #de4444;
$border-color: #e6e6e6;

$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;

$dark-color: #ffc600;
$dark-color-play: #fff2c6;

.voicefull {
  width: 100vh;
  height: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: rotate(90deg);
  transform-origin: 0% 0%;
  margin-left: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;

  &.bg1 {
    background: #fff;
    color: #062211;

    .playing {
      color: $select-color !important;
    }
  }

  // 黑暗模式 强制替换颜色
  &.bg2 {
    background: linear-gradient(180deg, #274533 0%, #385f45 100%);
    color: #fff;

    .column-wrapper {
      &:hover {
        color: $dark-color !important;
      }

      .selected {
        color: $dark-color !important;
      }

      .playing {
        color: $dark-color-play;
        text-shadow: 0 0 0.1em, 0 0 0.3em;
      }

      &.highlight-,
      &.highlight-red,
      &.highlight-brown,
      &.highlight-green {
        color: $dark-color !important;
      }

      .matrix-checkbox-column-,
      .matrix-checkbox-column-red,
      .matrix-checkbox-column-brown,
      .matrix-checkbox-column-green {
        &.active {
          border-color: $dark-color !important;

          &::after {
            border-color: $dark-color !important;
          }
        }
      }

      .connection {
        background-color: #fff !important;

        &.highlight-bc-,
        &.highlight-bc-red,
        &.highlight-bc-brown,
        &.highlight-bc-green {
          background-color: $dark-color !important;
        }
      }
    }

    .matrix-top {
      .matrix-checkbox-row-,
      .matrix-checkbox-row-green,
      .matrix-checkbox-row-brown,
      .matrix-checkbox-row-red {
        &.active {
          border-color: $dark-color !important;

          &::after {
            border-color: $dark-color !important;
          }
        }
      }
    }
  }

  &-top {
    height: 66px;
    width: 100%;
    padding: 0 15px;

    .voicefull-top-hidden {
      width: 100%;
      height: 66px;
      visibility: hidden;
      display: flex;
      justify-content: space-between;
      align-items: end;
    }
    .voicefull-top-show {
      width: 100%;
      height: 66px;
      visibility: visible;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .top-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .select-bg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 84px;
      height: 48px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;

      &.select-bg-blue {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
      }

      > div {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &.bg-white-box {
          background: 0 0;
          margin-right: 4px;
          &.active {
            background: #de4444;
          }
        }
        &.bg-green-box {
          background: #fff;
          &.active {
            background: #ffc600;
          }
        }

        > span {
          width: 24px;
          height: 24px;
          border-radius: 100%;

          cursor: pointer;
          &.bg-white {
            background: #fff;
          }
          &.bg-green {
            background: linear-gradient(180deg, #274533 0%, #385f45 100%);
          }
        }
      }
    }

    .set-fontSize {
      padding: 0 10px;
      height: 48px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      &-green {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      > span {
        width: 24px;
        height: 24px;
        margin: 0 4px;
        &.font-jian {
          &-black {
            background: url("../../../assets/NPC/jian-black.png") no-repeat left
              top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-yellow {
            background: url("../../../assets/NPC/jian-white.png") no-repeat left
              top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-white-disabled {
            background: url("../../../assets/NPC/jian-white-disabled.png")
              no-repeat left top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-yellow-disabled {
            background: url("../../../assets/NPC/jian-yellow-disabled.png")
              no-repeat left top;
            background-size: 100% 100%;
            cursor: pointer;
          }
        }
        &.font-img {
          &-black {
            background: url("../../../assets/NPC/fontSize-black.png") no-repeat
              left top;
            background-size: 100% 100%;
          }
          &-yellow {
            background: url("../../../assets/NPC/fontSize-white.png") no-repeat
              left top;
            background-size: 100% 100%;
          }
        }
        &.font-jia {
          &-black {
            background: url("../../../assets/NPC/jia-black.png") no-repeat left
              top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-yellow {
            background: url("../../../assets/NPC/jia-white.png") no-repeat left
              top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-white-disabled {
            background: url("../../../assets/NPC/jia-white-disabled.png")
              no-repeat left top;
            background-size: 100% 100%;
            cursor: pointer;
          }
          &-yellow-disabled {
            background: url("../../../assets/NPC/jia-yellow-disabled.png")
              no-repeat left top;
            background-size: 100% 100%;
            cursor: pointer;
          }
        }
      }
    }

    .top-middle {
      display: flex;
      justify-content: center;
      align-items: center;
      .audio-box {
        width: 48px;
        height: 48px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        &-green {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .op-btn {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    cursor: pointer;
    margin-left: 32px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);

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

  &-content {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vw - 272px);
    overflow: auto;

    // 语音矩阵

    .matrix {
      display: inline-grid;
      gap: 20px 48px;
      height: 100%;
      word-break: break-word;

      %matrix-checkbox {
        position: relative;
        top: calc(50% - 0.25em);
        display: block;
        width: 0.5em;
        height: 0.5em;
        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;
            width: 0.1em;
            height: 0.25em;
            top: 18%;
            left: 37%;
            position: absolute;
            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% - 0.25em);
        right: -48px;
      }

      .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: 32px;
          border-radius: 8px;
          transition: 0.2s;
          cursor: pointer;
          user-select: none;

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

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

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

          > span {
            display: inline-block;
            padding: 4px 12px;
            word-break: keep-all;
            white-space: nowrap;
          }
        }

        %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;
          }
        }

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

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

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

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

          > span {
            padding: 0;
          }

          .pinyin {
            font-family: "GB-PINYINOK-B";
            opacity: 0.45;
            font-size: 0.75em;
          }

          .chs {
            font-family: "FZJCGFKTK";
            font-size: 1em;
          }
        }

        .sentence-green {
          @extend %sentence;

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

        .sentence-brown {
          @extend %sentence;

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

        .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;

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

            .english {
              font-family: "robot";
              opacity: 0.45;
              font-size: 0.75em;
            }
          }
        }

        .pinyinEnglish-green {
          @extend %pinyinEnglish;

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

        .pinyinEnglish-brown {
          @extend %pinyinEnglish;

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

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

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

          .brackets {
            font-size: 1em;
            font-family: "FZJCGFKTK";
          }
        }

        .textBrackets-green {
          @extend %textBrackets;

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

        .textBrackets-brown {
          @extend %textBrackets;

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

  &-bottom {
    height: 66px;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;

    .voicefull-bottom-show {
      height: 66px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: start;
      visibility: visible;

      &.hidden {
        visibility: hidden;
      }
    }

    .bottom-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .compare-box {
        height: 56px;
        padding: 16px 16px;

        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0 40px 40px 0;
        border-left: 0px solid rgba(0, 0, 0, 0.1);
        &-white {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-left: 0;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.NPC-Big-Book-preview-green {
  .bg1 {
    .repeat-icon {
      background: url("../../../assets/icon/Repeat-24-normal-Green.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    .pinyin-icon {
      background: url("../../../assets/icon/pinyin-24-normal-green.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    .en-icon {
      background: url("../../../assets/icon/EN-24-normal-Green.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
  }
}

.NPC-Big-Book-preview-brown {
  .bg1 {
    .repeat-icon {
      background: url("../../../assets/icon/Repeat-24-normal-Brown.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
    .en-icon {
      background: url("../../../assets/icon/EN-24-normal-Brown.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
    .coll-icon {
      background: url("../../../assets/icon/bookmarkfill-24-normal-brown.png")
        no-repeat left top;
      background-size: 100% 100%;
    }
  }
}
</style>