<template>
  <div class="audio-box clearfix">
    <div class="cover fl" :style="{'backgroundImage': 'url('+baseUrl + mediaInfo.coverUrl+')'}"></div>
    <div class="audio">
      <slider
        :id="id"
        class="slider"
        :value="timeInfo.percen"
        @changing="changing"
        @change="changeMedia"
        block-size="12"
        activeColor="#FF7594"/>
      <div class="time clearfix">
        <div class="fr">{{timeInfo.durationTel}}</div>
        <div class="fl">{{timeInfo.currentTimeTel}}</div>
      </div>
      <div class="btn-box" v-if="mediaObj">
        <img
          @click="seekMedia(-15)"
          src="../assets/images/audio_icon_3.png"
          mode="widthFix">
        <div
          class="play"
          :class="{'stop': isPlay}"
          @click="playMedia"></div>
        <img
          @click="seekMedia(15)"
          src="../assets/images/audio_icon_4.png"
          mode="widthFix">
      </div>
    </div>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/http'
export default {
  props: ['mediaInfo'],
  data () {
    return {
      baseUrl: baseUrl,
      id: '',
      isInit: false,
      // 是否拖动进度条
      isIng: false,
      // 时间信息
      timeInfo: {
        currentTime: 0,
        duration: 0,
        currentTimeTel: '00:00',
        durationTel: '00:00',
        percen: 0
      },
      mediaObj: null,
      windowHeight: 0,
      isPlay: false
    }
  },
  created () {
    // 获取唯一id
    let id = this.$store.getters.getMedieId
    this.$store.commit('addMediaId', id)
    this.id = id
  },

  mounted () {
    // 获取窗口高度
    this.windowHeight = wx.getSystemInfoSync().windowHeight

    // 创建音频对象
    let mediaObj = wx.createInnerAudioContext()

    mediaObj.src = this.mediaInfo.audioUrl

    // 设置默认时间
    this.timeInfo.duration = this.mediaInfo.mediaTime || '120'
    this.timeInfo.durationTel = this.getTimeTel(this.mediaInfo.mediaTime || '120')

    this.mediaObj = mediaObj

    // 设置是否播放参数 默认 false
    this.mediaObj.isPlay = false

    // 加入媒体对象
    this.$store.commit('addMedieObj', {id: this.id, mediaObj: this.mediaObj})

    this.initMedia()
  },

  methods: {
    // 初始化
    initMedia () {
      let mediaObj = this.mediaObj

      // 事件监听绑定
      mediaObj.onTimeUpdate(this.timeupdate)
      mediaObj.onEnded(this.ended)
      mediaObj.onWaiting(this.waiting)
      mediaObj.onWaiting(this.waiting)
      mediaObj.onPlay(() => { this.isPlayStatus(true) })
      mediaObj.onPause(() => { this.isPlayStatus(false) })
      mediaObj.onStop(() => { this.isPlayStatus(false) })

      // 静音播放获取时间
      /* mediaObj.volume = 0
      mediaObj.play() */
    },

    // 播放 或者 停止 音频
    playMedia () {
      if (this.mediaObj.isPlay) {
        this.mediaObj.pause()
      } else {
        this.mediaObj.play()
        this.$store.commit('playOnlyMedia', this.id)
      }
      this.mediaObj.isPlay = !this.mediaObj.isPlay
    },

    // 播放进度
    timeupdate () {
      let {currentTime, duration} = this.mediaObj

      this.timeInfo = {
        duration: parseInt(duration),
        currentTime: parseInt(currentTime),
        durationTel: this.getTimeTel(duration),
        currentTimeTel: this.getTimeTel(currentTime),
        percen: parseInt((currentTime / duration) * 100)
      }
    },

    // 拖动中 不更新 改变进度条
    changing (e) {
      if (!this.isInit && this.mediaObj.isPlay) {
        this.mediaObj.pause()
        this.isIng = true
      }
      let time = e.mp.detail.value * this.timeInfo.duration * 0.01
      this.timeInfo.currentTimeTel = this.getTimeTel(time)
    },

    // 拖动进度条
    changeMedia (e) {
      let time = e.mp.detail.value * this.timeInfo.duration * 0.01
      this.toTime(time)
      if (this.mediaObj.isPlay) {
        this.mediaObj.play()
        this.isIng = false
      }
    },
    // 前进 后退
    seekMedia (num) {
      let duration = this.timeInfo.duration
      let time = this.timeInfo.currentTime - 0 + num

      // 超出音频长度处理
      time = time < 0 ? 0 : time
      time = time > duration ? duration : time
      this.toTime(time)
    },

    // 跳转到指定时间
    toTime (time) {
      this.mediaObj.seek(time - 0)
      this.timeInfo.percen = ((time / this.timeInfo.duration) * 100).toFixed(0)
      this.timeInfo.currentTimeTel = this.getTimeTel(time)
    },

    // 播放结束
    ended () {
      this.mediaObj.isPlay = false
      this.mediaObj.stop()
    },

    waiting (e) {
      console.log('等待中 updateTime 失效')
      setTimeout(() => {
        console.log(this.mediaObj.paused)
      }, 100)
    },

    // 判断当前的播放状态
    isPlayStatus (isPlay) {
      this.isPlay = isPlay
    },

    // 时间格式化 0s => 00:00
    getTimeTel (time) {
      let m = (time / 60).toFixed(0)
      let s = (time % 60).toFixed(0)

      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return m + ':' + s
    }
  },

  // 滚动到可视窗口外暂停
  onPageScroll ({scrollTop}) {
    // this.scrollTop = scrollTop
    // 获取 元素
    let html = wx.createSelectorQuery().select('#' + this.id)
    html.boundingClientRect((res) => {
      if (this.mediaObj.isPlay && (res.top + res.height < 0 || res.top > this.windowHeight)) {
        this.playMedia()
      }
    }).exec()
  }
}
</script>

<style scoped lang="less">
.audio-box{
  position: relative;
  background: #F8F8F8;
  .cover{
    width: 100px;
    height: 100px;
    background: no-repeat center center;
    background-size: cover;
    box-sizing: border-box;
  }
  .audio{
    padding: 20px 8px;
    height: 100px;
    box-sizing: border-box;
    overflow: hidden;
    .slider{
      margin: auto;
      padding: 0 8px;
      overflow: hidden;
    }
    .time{
      position: relative;
      top: -4px;
      padding: 0 8px;
      font-size: 11px;
      color: #AEAEAE;
    }
    .btn-box{
      text-align: center;
      img{
        display: inline-block;
        margin: 6px 13px;
        width: 24px;
        height: 24px;
      }
      .play{
        display: inline-block;
        margin: 0 13px;
        width: 36px;
        height: 36px;
        background: url('../assets/images/audio_icon_1.png') no-repeat center center;
        background-size: auto 100%;
        &.stop{
          background-image: url('../assets/images/audio_icon_2.png')
        }
      }
    }
  }
}
</style>
