<template>
  <div class="aos-audio-better" :style="{ width: totalWidth }">
    <div class="aos-audio-better__operate">
      <i
        :class="{'el-icon-playcircle-fill': !playing, 'el-icon-pausecircle-fill': playing}"
        @click="togglePlayback"
      ></i>
      <i class="el-icon-stopcircle-fill" @click="stop"></i>
      <span class="aos-audio-better__operate-time">
        <span class="aos-audio-better__operate-time-going">{{ _sToMs(seek) }} </span>
        <span>/</span>
        <span class="aos-audio-better__operate-time-total">{{ _sToMs(duration) }}</span>
      </span>
    </div>
    <div class="aos-audio-better__slider" ref="slider" @click="handleModifyProgress">
      <div class="aos-audio-better__slider-progressInfo"></div>
      <div class="aos-audio-better__slider-process" :style="{ width: pWidth }"></div>
      <div class="aos-audio-better__slider-thunk" ref="trunk" :style="{ left }">
        <div class="aos-audio-better__slider-block"></div>
      </div>
    </div>
    
    <i
      class="el-icon-notificationfill aos-audio-better__volume"
      @click="handleToggleMute"
      v-if="isMute"
    >
    </i>
    <i
      class="el-icon-notificationforbidfill"
      @click="handleToggleMute"
      v-if="!isMute"
    ></i>
    <div class="aos-audio-better__volume-slider" ref="volumeSlider" @click="handleVolumeProgress">
      <div class="aos-audio-better__volume-slider-progressInfo"></div>
      <div class="aos-audio-better__volume-slider-process" :style="{ width: volumeWidth }"></div>
      <div class="aos-audio-better__volume-slider-thunk" ref="volumeTrunk" :style="{ left: volumeLeft }">
        <div class="aos-audio-better__volume-slider-block"></div>
      </div>
    </div>
    <span class="aos-audio-better__rate">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="aos-audio-better__rate-trigger">{{currentRate == 1 ? '倍速' : currentRate+'x'}}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="0.5">0.5x</el-dropdown-item>
          <el-dropdown-item :command="1">1x</el-dropdown-item>
          <el-dropdown-item :command="1.5">1.5x</el-dropdown-item>
          <el-dropdown-item :command="2">2x</el-dropdown-item>
          <el-dropdown-item :command="3">3x</el-dropdown-item>
          <el-dropdown-item :command="4">4x</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
  </div>
</template>
<script>
import Audio from './audio.js'
export default {
  name: 'AosAudio',
  mixins: [Audio],
  props: ['width'],
  data () {
    return {
      min: 0,
      max: 100,
      slider: null,
      thunk: null,
      per: 0,
      rate: 1,
      volumeMin: 0,
      volumeMax: 100,
      volumeSlider: null,
      volumeThunk: null,
      volumePer: 1,
      isMute: true,
      curVolume: 0.5,
      totalWidth: 500,
      currentRate: '1'
    }
  },
  watch: {
    curProgress (v) {
      // 避免拖拽未完成 进度发生变化
      if (!document.onmouseup) {
        this.per = v
      }
    },
    curVolumeProgress (v) {
      // 避免拖拽未完成 进度发生变化
      if (!document.onmouseup) {
        this.volumePer = v
      }
    }
  },
  computed: {
    curProgress () {
      let curProgress = (Math.round(this.progress * 10000) / 100.0).toFixed(2)
      return curProgress
    },
    curVolumeProgress () {
      let curVolumeProgress = (Math.round(this.volume * 10000) / 100.0).toFixed(2)
      return curVolumeProgress
    },
    // 设置一个百分比，提供计算slider进度width和trunk的left值
    scale () {
      let scale = (this.per - this.min) / (this.max - this.min)
      return scale
    },
    volumeScale () {
      let scale = (this.volumePer - this.volumeMin) / (this.volumeMax - this.volumeMin)
      return scale
    },
    pWidth () {
      if (this.slider) {
        return this.slider.offsetWidth * this.scale + 'px'
      } else {
        return 0 + 'px'
      }
    },
    volumeWidth () {
      if (this.volumeSlider) {
        console.log('volumeWidth',this.volumeSlider.offsetWidth * this.volumeScale + 'px')
        return this.volumeSlider.offsetWidth * this.volumeScale + 'px'
      } else {
        return 100 + 'px'
      }
    },
    left () {
      if (this.slider) {
        return (
          this.slider.offsetWidth * this.scale -
          this.thunk.offsetWidth / 2 +
          'px'
        )
      } else {
        return 0 + 'px'
      }
    },
    volumeLeft () {
      if (this.volumeSlider) {
        return (
          this.volumeSlider.offsetWidth * this.volumeScale -
          this.volumeThunk.offsetWidth / 2 +
          'px'
        )
      } else {
        return 100 + 'px'
      }
    }
  },
  methods: {
     handleCommand (rate) {
      this.currentRate = rate
      this.setRate(rate)
    },
    handleModifyProgress (e) {
      if (e.target.className === 'aos-audio-better__slider' || e.target.className === 'aos-audio-better__slider-process') {
        let scale = e.offsetX / this.slider.offsetWidth
        this.setProgress(scale)
      }
    },
    handleVolumeProgress (e) {
      if (e.target.className === 'aos-audio-better__volume-slider' || e.target.className === 'aos-audio-better__volume-slider-process') {
        let scale = e.offsetX / this.volumeSlider.offsetWidth
        this.setVolume(scale)
      }
    },
    handleToggleMute () {
      this.isMute ? (this.isMute = false) : (this.isMute = true)
      this.toggleMute()
    },
    _sToMs (s) {
      if(typeof s !== 'number') return '00' + ':' + '00'
      s = parseInt(s)
      let h
      h = Math.floor(s / 60)
      s = s % 60
      h += ''
      s += ''
      h = h.length == 1 ? '0' + h : h
      s = s.length == 1 ? '0' + s : s
      return h + ':' + s
    }
  },
  mounted () {
    if (this.width && typeof this.width === 'number') {
      this.totalWidth = this.width + 'px'
    }
    this.slider = this.$refs.slider
    this.thunk = this.$refs.trunk
    this.thunk.onmousedown = e => {
      let pWidth = parseInt(this.pWidth)
      let disX = e.clientX
      document.onmousemove = e => {
        // 拖拽的时候获取的新width
        let newWidth = e.clientX - disX + pWidth
        // 拖拽的时候得到新的百分比
        let scale = newWidth / this.slider.offsetWidth
        this.per = Math.ceil((this.max - this.min) * scale + this.min)
        this.per = Math.max(this.per, this.min)
        this.per = Math.min(this.per, this.max)
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
        this.setProgress(this.scale)
      }
      return false
    }

    this.volumeSlider = this.$refs.volumeSlider
    this.volumeThunk = this.$refs.volumeTrunk
    this.volumeThunk.onmousedown = e => {
      let volumeWidth = parseInt(this.volumeWidth)
      let disX = e.clientX
      document.onmousemove = e => {
        // 拖拽的时候获取的新width
        let newWidth = e.clientX - disX + volumeWidth
        // 拖拽的时候得到新的百分比
        let scale = newWidth / this.volumeSlider.offsetWidth
        this.volumePer = Math.ceil((this.volumeMax - this.volumeMin) * scale + this.volumeMin)
        this.volumePer = Math.max(this.volumePer, this.volumeMin)
        this.volumePer = Math.min(this.volumePer, this.volumeMax)
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
        this.setVolume(this.volumeScale)
      }
      return false
    }
  }
}
</script>
