<template>
  <div class="audio-fill">
    <img
      :src="audio.paused ? require('@/assets/fill/voice-pause-red.png') : require('@/assets/fill/voice-play-red.png')"
      class="audio-play"
      @click="playAudio"
    />
    <audio
      :id="fileId"
      :ref="fileId"
      :src="url"
      preload="metadata"
      @loadedmetadata="onLoadedmetadata"
      @timeupdate="onTimeupdate"
      @canplaythrough="oncanplaythrough"
    ></audio>
  </div>
</template>

<script>
import { GetFileURLMap } from '@/api/app';
import { secondFormatConversion } from '@/utils/transform';

export default {
  name: 'AudioFillPlay',
  props: {
    fileId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      secondFormatConversion,
      url: '',
      audio: {
        paused: true,
        playing: false,
        // 音频当前播放时长
        current_time: 0,
        // 音频最大播放时长
        max_time: 0,
        loading: false,
      },
      play_value: 0,
      audio_allTime: null, // 展示总时间
    };
  },
  watch: {
    fileId: {
      handler(val) {
        if (!val) return;
        GetFileURLMap({ file_id_list: [val] }).then(({ url_map }) => {
          this.url = url_map[val];
        });
      },
      immediate: true,
    },
  },
  mounted() {
    if (!this.fileId) return;
    this.$refs[this.fileId].addEventListener('ended', () => {
      this.audio.paused = true;
    });
    this.$refs[this.fileId].addEventListener('pause', () => {
      this.audio.paused = true;
    });
    this.$refs[this.fileId].addEventListener('play', () => {
      this.audio.paused = false;
    });
  },
  methods: {
    playAudio() {
      if (!this.url) return;
      const audio = this.$refs[this.fileId];
      let audioArr = document.getElementsByTagName('audio');
      if (audioArr && audioArr.length > 0) {
        for (let i = 0; i < audioArr.length; i++) {
          if (audioArr[i].src === this.url) {
            if (audioArr[i].id !== this.fileId) {
              audioArr[i].pause();
            }
          } else {
            audioArr[i].pause();
          }
        }
      }
      audio.paused ? audio.play() : audio.pause();
    },
    // 音频加载完之后
    onLoadedmetadata(res) {
      this.audio.max_time = parseInt(res.target.duration);
      this.audio_allTime = secondFormatConversion(this.audio.max_time);
    },
    // 当音频当前时间改变后，进度条也要改变
    onTimeupdate(res) {
      let audioId = this.fileId;
      this.audio.current_time = res.target.currentTime;
      this.play_value = (this.audio.current_time / this.audio.max_time) * 100;
      if (this.audio.current_time * 1000 > this.ed) {
        this.$refs[audioId].pause();
      }
    },
    onTimeupdateTime(res, playFlag) {
      if (!res && res !== 0) return;
      let audioId = this.audioId;
      this.$refs[audioId].currentTime = res;
      this.play_value = (res / this.audio.max_time) * 100;
      if (playFlag) {
        let audio = document.getElementsByTagName('audio');
        audio.forEach((item) => {
          if (item.id !== audioId) {
            item.pause();
          }
        });
        this.$refs[audioId].play();
      }
    },
    oncanplaythrough() {
      this.audio.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.audio-fill {
  grid-area: audio;

  .audio-play {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
</style>
