GCLS_Page_Book_Component_NPC/src/components/Adult/preview/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 :src="playing ? voicePlaySrc : voicePauseSrc" @click="playAudio">
      </div>
      <audio-line
        v-show="!hasSelectedCell"
        ref="audioLine"
        :mp3="mp3Url"
        :get-cur-time="getCurTime"
        :stop-audio="stopAudio"
        @handleChangeStopAudio="handleChangeStopAudio"
        @playChange="playChange"
      />
    </div>
    <!-- 语音矩阵 -->
    <div class="voice-matrix-container">
      <div
        v-if="curQue.voiceMatrix.matrix.length > 0"
        class="matrix"
        :style="{
          'grid-template': `40px repeat(${curQue.voiceMatrix.matrix.length}, auto) 1fr / 40px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) 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"
              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',
              curQue.voiceMatrix.rowSelection && (selectRow === i ||
                (selectedLine.type === 'row' && selectedLine.index === i))
                ? 'read'
                : ''
            ]"
            @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',
                (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'
                    : '',
                  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'
                    : '',
                  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="(word, w) in column.sentence_data.wordsList">
                  <span
                    v-if="column.sentence_data.pyPosition === 'top'"
                    :key="`pinyin-${w}`"
                    class="pinyin"
                  >
                    {{ word.pinyin }}
                  </span>
                  <span v-else :key="`chs-${w}`" class="chs">
                    {{ word.chs }}
                  </span>
                </template>
                <template v-for="(word, w) in column.sentence_data.wordsList">
                  <span
                    v-if="column.sentence_data.pyPosition === 'top'"
                    :key="`chs-${w}`"
                    class="chs"
                  >
                    {{ word.chs }}
                  </span>
                  <span v-else :key="`pinyin-${w}`" class="pinyin">
                    {{ word.pinyin }}
                  </span>
                </template>
              </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>

    <soundrecord
      type="promax"
      class="luyin-box"
      :file-name="fileName"
      @handleWav="handleWav"
    />
  </div>
</template>

<script>
import AudioLine from "./AudioLine.vue";
import Soundrecord from "./Soundrecord.vue";

export default {
  components: {
    AudioLine,
    Soundrecord
  },
  props: ["curQue", "themeColor"],
  data() {
    return {
      curTime: 0,
      playing: false,
      stopAudio: true,
      unWatch: null,
      lrcArray: [],
      // voicePauseSrc: require("../../../assets/common/icon-voice-red.png"),
      // voicePlaySrc: require("../../../assets/common/icon-voice-red-play.png"),
      fileName: "",
      // 底色行、列
      selectRow: -1,
      selectColumn: -1,
      // 行、列选中
      selectedLine: {
        type: "",
        index: 0
      },
      // 点击选中
      selectCell: {
        row: -1,
        column: -1
      }
    };
  },
  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;
    },
    hasSelectedCell() {
      let { type, index } = this.selectedLine;
      let { row, column } = this.selectCell;
      return (type.length > 0 && index >= 0) || (row >= 0 && column >= 0);
    },
    voicePauseSrc() {
      let themeColor = this.themeColor;
      if (themeColor.length === 0 || themeColor === "red") {
        return require("../../../assets/NPC/play-red.png");
      }
      return require(`../../../assets/NPC/play-${themeColor}.png`);
    },
    voicePlaySrc() {
      let 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`);
    }
  },
  watch: {
    hasSelectedCell() {
      this.handleParentPlay();
    }
  },
  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 (row === this.selectCell.row && column === this.selectCell.column) {
        this.selectCell = { row: -1, column: -1 };
        return;
      }
      this.selectedLine = { type: "", index: -1 };
      this.selectCell = { row, column };
      // 设置录音文件名
      let { type, text, sentence_data } = this.curQue.voiceMatrix.matrix[row][
        column
      ];
      this.fileName = `${type === "text" ? text : ""}${
        type === "SentenceSegwordChs" ? sentence_data.sentence : ""
      }`;
      if (!this.hasSelectedCell) this.handleParentPlay();
    },

    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 };
      this.fileName = `第 ${index + 1} ${type === "row" ? "行" : "列"}`;
    },

    playAudio() {
      if (!this.hasSelectedCell) return;
      if (this.playing) return this.handleParentPlay();
      if (this.lrcArray.length > 0) return this.$refs.audioLine.PlayAudio();
      this.lrcArray = [];
      let { type, index } = this.selectedLine;
      if (type.length > 0 && index >= 0 && type === "row") {
        this.curQue.voiceMatrix.matrix[index].forEach(item => {
          if (
            item.type === "SentenceSegwordChs" ||
            (item.type === "text" && item.text.length > 0)
          ) {
            this.lrcArray.push(item.lrc_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 = item[index];
          if (
            data.type === "SentenceSegwordChs" ||
            (data.type === "text" && data.text.length > 0)
          ) {
            this.lrcArray.push(data.lrc_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) {
              this.lrcPlay(this.lrcArray[i], i);
            } else {
              this.lrcArray = [];
            }
          }
        });
      });
    },

    playChange(playing) {
      this.playing = playing;
    },

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

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

    handleWav(data) {
      console.log(data);
    },

    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;
          }
        });
      });
    }
  }
};
</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;

.voice-matrix {
  height: 100%;
  width: 100%;
  margin-bottom: 16px;
  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 {
      line-height: 46px;
      height: 100%;

      img {
        cursor: pointer;
        width: 16px;
        margin-left: 12px;
      }
    }
  }
  // 语音矩阵
  &-container {
    height: calc(100% - 80px);
    background-color: #f5f5f5;
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;

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

      .matrix-top,
      .matrix-bottom {
        min-height: 40px;
      }

      %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%;
          padding: 7px 16px;
          min-height: 32px;
          background-color: #fff;
          border: 1px solid $border-color;
          border-radius: 8px;
          transition: 0.2s;
          cursor: pointer;

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

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

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

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

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

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

          &::before {
            display: inline-block;
            content: "";
            height: 100%;
            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;
          column-gap: 8px;
          justify-items: center;
          justify-content: start;

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

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

        .sentence-brown {
          @extend %sentence;

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

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

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

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

  .luyin-box {
    padding: 8px 16px;
    height: 40px;
    border: 1px solid $border-color;
    border-radius: 0 0 8px 8px;
  }
}
</style>

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

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

    .el-slider {
      width: 100% !important;
    }
  }
}
</style>