<!--  -->
<template>
  <div v-if="mp3" class="content-voices" @click="handlePlayVoice">
    <img :src="voiceSrc" :class="type == 'full' ? 'icon-big' : ''" />
  </div>
</template>

<script>
export default {
  components: {},
  props: ['seconds', 'mp3', 'wav', 'isCompare', 'type'],
  data() {
    return {
      audio: new Audio(),
      voiceSrc: '',
      voicePauseSrc: require('@/assets/voice_matrix/icon-voice.png'),
      voicePlaySrc: require('@/assets/voice_matrix/icon-voice-play-blue.png'),
    };
  },
  computed: {
    comparePauseSrc() {
      return require('@/assets/voice_matrix/compare-pause-blue.png');
    },
    comparePlaySrc() {
      return require('@/assets/voice_matrix/pauseC-16-normal-blue.png');
    },
  },
  created() {
    window.stopAudioVoice = () => {
      if (this.audio) {
        this.audio.pause();
      }
    };
  },
  mounted() {
    this.voiceSrc = this.isCompare ? this.comparePlaySrc : this.voicePauseSrc;
    if (this.isCompare) {
      this.audio.pause();
      this.audio.load();
      this.audio.src = this.mp3;
      this.audio.loop = false;
      this.audio.play();
    }
    this.audio.addEventListener('play', () => {
      this.voiceSrc = this.isCompare ? this.comparePlaySrc : this.voicePlaySrc;
      this.$emit('getPlayStatus', true);
    });
    this.audio.addEventListener('pause', () => {
      this.voiceSrc = this.isCompare ? this.comparePauseSrc : this.voicePauseSrc;
      this.$emit('getPlayStatus', false);
    });
    this.audio.addEventListener('ended', () => {
      this.voiceSrc = this.isCompare ? this.comparePauseSrc : this.voicePauseSrc;
      this.$emit('sentPause', false);
      this.$emit('getPlayStatus', false);
    });
  },
  // 方法集合
  methods: {
    handlePlayVoice() {
      if (!this.audio.paused) {
        this.audio.pause();
      } else if (this.isCompare) {
        this.audio.pause();
        this.audio.play();
      } else {
        this.audio.pause();
        this.audio.load();
        this.audio.src = this.mp3;
        this.audio.loop = false;
        this.audio.play();
      }
    },
    stopAudio() {
      if (this.audio) {
        this.audio.pause();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content-voices {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0;
  cursor: pointer;

  span {
    float: left;
    font-family: 'sourceR';
    font-size: 24px;
    line-height: 30px;
    color: #2c2c2c;

    &.noMp3 {
      margin-left: 0;
    }
  }

  img {
    float: left;
    width: 16px;
    height: 16px;
  }

  .icon-big {
    width: 24px;
    height: 24px;
  }
}
</style>
