<template>
  <div>
    <div class="audioOff">
      <div class="ofplayBox">
        <audio id="audio" :src="src" @canplay ="onplay" @play="playOn"></audio>
        <div class="isPlayImg">
          <!--开始播放-->
          <img v-if="!playflg" @click="play()" :src="playUrl" />
          <!--暂停-结束播放-->
          <img v-if="playflg" @click="stop()" :src="stopUrl" />
        </div>
        <!--slider进度条-->
        <div class="progress" @mousedown="stopTime()">
          <mt-range v-model="rangeValue" :value='rangeValue' :max="offset" :bar-height="2">
          </mt-range>
        </div>
        <div class="duration"><span>{{starttime}}</span>/<span class="right-timer">{{duration}}</span></div>
        <div class="cover"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import stopUrl from '../../assets/mould/look1/rs.png'
  import playUrl from '../../assets/mould/look1/rp.png'
  export default {
    name: 'audioMsg',
    props:[
      'src',
      'autoPlay'
    ],
    data() {
      return {
        stopUrl:stopUrl,
        playUrl:playUrl,
        //这首歌时间有点长 大家测试的时候可以换一个短点的MP3文件
        audioURl:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
        playflg: false,
        rangeValue: 0,
        starttime: '00:00', //正在播放时长
        duration: '00:00', //总时长
        offset: 0,
        timer:null
      }
    },
    mounted(){
      if(this.autoPlay){
        this.play();
        this.autoPlayAudio()
      }
    },
    methods: {
      stopTime(){
        clearInterval(this.timer);
      },
      autoPlayAudio(){
        let that = this;
        let voice =  document.querySelector('#audio');;
        document.addEventListener("WeixinJSBridgeReady",function(){
          that.play();
        },false);
        wx.ready(function () {
          that.$nextTick(()=> {
            wx.ready(function () {
              that.$nextTick(()=>{
                if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
                  that.play();
                } else {
                  //監聽客户端抛出事件"WeixinJSBridgeReady"
                  if (document.addEventListener) {
                    document.addEventListener("WeixinJSBridgeReady", function(){
                      that.play();
                    }, false);
                  } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", function(){
                      that.play();
                    });
                    document.attachEvent("onWeixinJSBridgeReady", function(){
                      that.play();
                    });
                  }
                }
                wx.ready(()=>{
                  that.play();
                })
              })
            })
          })
        })
      },
      getDuration(){
        let min = null;
        if(parseInt(this.offset / 60)<10){
          min = '0' + parseInt(this.offset / 60)
        }else{
          min = parseInt(this.offset / 60)
        }
        let sec = parseInt(this.offset % 60);
        if (sec < 10) {
          sec = "0" + sec;
        }
        this.duration = min + ':' + sec;   /*  00:00  */
      },
      onplay(){
        let audio = document.querySelector('#audio');
        console.log(audio.duration)
        this.offset = Math.ceil(parseInt(audio.duration))
        console.log('开始播放-时长=' + audio.duration)
        console.log(Math.ceil(this.offset))
        this.$nextTick(()=>{
          this.getDuration();
        })
      },
      playOn(){
        let audio = document.querySelector('#audio');
        this.playflg = true;
        this.timer = setInterval(() => {
          let min = null;
          if(parseInt(audio.currentTime / 60)<10){
            min = '0' + parseInt(audio.currentTime / 60)
          }else{
            min = parseInt(audio.currentTime / 60)
          }
          let sec = parseInt(audio.currentTime % 60);
          if (sec < 10) {
            sec = "0" + sec;
          };
          this.starttime = min + ':' + sec;   /*  00:00  */
          this.rangeValue = parseInt(audio.currentTime)
          if(this.rangeValue === this.offset) {
            this.rangeValue=0;/*播放结束后进度条归零*/
            this.starttime='00:00'; /*播放结束后时间归零*/
            this.stop()
            clearInterval(this.timer)
          }
        }, 1000)
      },
      //开始播放
      play() {
        audio.play();
      },
      //暂停-结束
      stop() {
        let audio = document.querySelector('#audio');
        audio.pause();
        this.playflg = false
        console.log('暂停播放')
      },
      //滑动进度条

    },
    watch:{
      'rangeValue'(value,value2){
        let audio = document.querySelector('#audio');
        if(Math.abs(value - value2) > 2){
          this.timer = setInterval(() => {
            let min = "0" + parseInt(audio.currentTime / 60);
            let sec = parseInt(audio.currentTime % 60);
            if (sec < 10) {
              sec = "0" + sec;
            }
            this.starttime = min + ':' + sec;   /*  00:00  */
            this.rangeValue = parseInt(audio.currentTime);
            if(this.rangeValue == this.offset) {
              this.rangeValue=0;/*播放结束后进度条归零*/
              this.starttime='00:00'; /*播放结束后时间归零*/
              this.stop()
              clearInterval(this.timer)
            }
          }, 1000);
          audio.currentTime = value;
        }
      }
    }

  }
</script>

<style lang="less">
  @import "../../util/public";
  .audioOff {
    padding: 5 * @toVw;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #888;
    border-radius: 500px;
  }

  .ofplayBox {
    width: 100%;
    height: 30 * @toVw;
    margin: 0;
    display: flex;
  }

  .isPlayImg {
    width: 40 * @toVw;
    height: 100%;
  }

  .isPlayImg img {
    width: 30 * @toVw;
  }

  .progress {
    flex: 1;
    position: relative;
    font-size: 12px;
  }
  .mt-range-thumb {
    background-color: #fff;
    position: absolute;
    left: 0;
    width: 20 * @toVw;
    height: 20 * @toVw;
    top: -10 * @toVw;
    cursor: move;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    z-index: 999;
  }

  .duration {
    display: flex;
    font-size: 12px;
    margin-left: 5 * @toVw;
    justify-content: space-between;
    span:first-child{
      margin-left: 0;
    }
  }
  .right-timer{
    margin-right: 0.27rem;
  }
</style>