<template>
  <div class="compara-content">
    <template v-if="wavblob">
      <div
        v-if="!isRecord"
        :class="[type == 'full' ? 'compare-box-big' : 'compare-box']"
        @click.stop.capture="playAudio"
      >
        <audio-line
          ref="audioLine"
          :mp3="url"
          :get-cur-time="getCurTime"
          audio-id="audioCompareMatrix"
          :stop-audio="stopAudio"
          :hide-slider="true"
          :type="type"
          @handleChangeStopAudio="handleChangeStopAudio"
          @sentPause="sentPause"
          @playChange="playChange"
        />
      </div>
      <div v-else :class="[type == 'full' ? 'compare-box-big' : 'compare-box']">
        <audio-red
          ref="audioRed"
          :mp3="wavblob"
          :is-compare="true"
          :theme-color="themeColor"
          :type="type"
          @sentPause="sentPause"
        />
      </div>
    </template>
    <template v-else>
      <img
        :src="
          type == 'full'
            ? require('@/assets/voice_matrix/compare-disable-24.png')
            : require('@/assets/voice_matrix/compare-disable.png')
        "
        :class="['compare-disable', type == 'full' ? 'compare-disable-big' : '']"
      />
    </template>
  </div>
</template>

<script>
import AudioLine from '../components/AudioLine.vue';
import AudioRed from '../components/AudioRed.vue';

export default {
  components: {
    AudioLine,
    AudioRed,
  },
  props: ['themeColor', 'isRecord', 'wavblob', 'url', 'type', 'sentPause', 'matrixSelectLrc', 'getCurTime', 'curTime'],
  data() {
    return {
      playing: false,
      stopAudio: true,
      unWatch: null,
    };
  },
  watch: {
    matrixSelectLrc(newVal) {
      if (this.unWatch) {
        this.unWatch();
        this.unWatch = null;
      }
      this.handleParentPlay();
      this.playChange(false);
      if (this.isRecord) this.$refs.audioRed.stopAudio();
    },
    isRecord(newVal) {
      if (!newVal) this.unWatch = null;
    },
    wavblob(newVal) {
      if (!newVal) {
        this.playChange(false);
      }
    },
  },
  methods: {
    playAudio() {
      if (this.playing) return this.handleParentPlay();
      if (this.unWatch) return this.$refs.audioLine.PlayAudio();
      console.log(this.matrixSelectLrc);
      if (this.matrixSelectLrc === null) {
        this.sentPause(true);
        this.playChange(false);
        return;
      }
      if (this.matrixSelectLrc.length <= 0) return;

      this.lrcPlay(this.matrixSelectLrc[0], 0);
    },
    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) {
            this.unWatch();
            this.handleParentPlay();
            this.$refs.audioLine.onTimeupdateTime(end);
            let i = index + 1;
            if (i < this.matrixSelectLrc.length) {
              return this.lrcPlay(this.matrixSelectLrc[i], i);
            }
            this.sentPause(true);
            this.playChange(false);
          }
        });
      });
    },

    playChange(playing) {
      this.playing = playing;
      this.$emit('playing', playing);
    },

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

<style lang="scss" scoped>
.compare-box {
  width: 16px;
  height: 16px;
  margin-left: 8px;

  &-big {
    width: 24px;
    height: 24px;
    margin-left: 0;
  }
}

.compare-disable {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: 8px;

  &-big {
    display: block;
    width: 24px;
    height: 24px;
    margin-left: 0;
  }
}
</style>
