<template>
  <div class="radio1" :style="{backgroundImage:`url(${nowLesson.content.titleType === 0 ? imgUrl.bg:imgUrl.moerduoBg})`}">
    <div class="bg-block" :style="{backgroundImage:`url('${imgUrl.contentBg}')`}">
      <img :src="imgUrl.tabVideo" class="tab-video-img" @click="goNext(nowLesson.content.tabVideo.index)" v-if="nowLesson.content.tabVideo.type"/>
      <div class="title">
        <img :src="imgUrl.title" v-if="nowLesson.content.titleType === 0"/>
        <img :src="imgUrl.moerduo" v-if="nowLesson.content.titleType === 1"/>
      </div>
      <div class="cd">
        <img :src="imgUrl.CD"/>
      </div>
      <audio
        ref="audio"
        id="audio"
        @canplay ="onPlay" @play="playOn"
        :src="nowLesson.content.radio[radioLenth].url"
        @timeupdate="updateTime">
      </audio>
      <div class="name-block">
        <div class="name">
          <span v-if="nowLesson.content.radio[radioLenth]">{{nowLesson.content.radio[radioLenth].title}}</span>
        </div>
        <div class="ahtor">
          <span v-if="nowLesson.content.radio[radioLenth]">{{nowLesson.content.radio[radioLenth].lable}}</span>
        </div>
      </div>
      <div class="play-block" @mousedown="changeB=true">
        <mt-range v-model="rangeValue" :value='rangeValue' :max="offset" :bar-height="2">
        </mt-range>
        <span class="time-span left">{{starttime}}</span>
        <span class="time-span right">{{duration}}</span>
      </div>
      <div class="btn-block">
        <img :src="imgUrl.near" @click="dRadio()" v-if="nowLesson.content.radio && nowLesson.content.radio.length > 0"/>
        <img :src="imgUrl.play" class="play" v-if="!playAudioType" @click="playAudio()"/>
        <img :src="imgUrl.stop" class="play" v-if="playAudioType" @click="stopAudio()"/>
        <img :src="imgUrl.next"  @click="aRadio()" v-if="nowLesson.content.radio && nowLesson.content.radio.length > 0"/>
      </div>
    </div>
    <div class="bottom-block" v-if="nowLesson.content.buttonType === 0">
      <img :src="imgUrl.backLookBtn" @click="goNext(nowLesson.content.lastIndex)"/>
      <img :src="imgUrl.showBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
    </div>
    <div class="bottom-block" v-if="nowLesson.content.buttonType === 1">
      <img :src="imgUrl.backPlayBtn" @click="goNext(nowLesson.content.lastIndex)"/>
      <img :src="imgUrl.finishBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
    </div>
    <div class="bottom-block" v-if="nowLesson.content.buttonType === 2">
      <img :src="imgUrl.backLookBtn" @click="goNext(nowLesson.content.lastIndex)"/>
      <img :src="imgUrl.finishBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
    </div>
    <div class="bottom-block" v-if="nowLesson.content.buttonType === 3">
      <img :src="imgUrl.backPlayBtn" @click="goNext(nowLesson.content.lastIndex)"/>
      <img :src="imgUrl.nextBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
    </div>
  </div>
</template>

<script>
  import {radio1} from "../../util/imgUrl";
  import {Toast} from 'mint-ui'
  export default {
    name: "audio1",
    props: [
      'nowLesson'
    ],
    data() {
      return {
        imgUrl: radio1,
        audioLeft:0,
        offset:0,
        radioLenth:0,
        starttime: '00:00', //正在播放时长
        duration: '00:00', //总时长
        rangeValue:0,
        timer:null,
        changeB:false,
        playAudioType:false,
      }
    },
    mounted(){
      window._hmt.push(['_trackPageview', '/#/PV/audio']);
    },
    methods:{
      goNext(i,next){
        this.stopAudio();
        this.$emit('goNext',{i:i,next:!!next})
      },
      // 切换音频+
      aRadio(){
        if(this.radioLenth < this.nowLesson.content.radio.length - 1){
          this.radioLenth ++;
          this.playAudioType = false;
          this.audioLeft = 0;
        }else{
          Toast('已是最后一个')
        }
      },
      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');
        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)
      },
      updateTime(e){
        let time = e.target.currentTime / e.target.duration * 1000;
        this.audioLeft = time;
        if(e.target.currentTime === e.target.duration ){
          this.playAudioType = false
        }
      },
      // 暂停音频
      stopAudio(){
        this.$refs.audio.pause();
        this.playAudioType = false
      },
      // 切换音频-
      dRadio(){
        if(this.radioLenth>0){
          this.radioLenth --;
          this.playAudioType = false;
          this.audioLeft = 0;
        }else{
          Toast('已是第一个')
        }
      },
      // 播放音频
      playAudio(){
        this.$refs.audio.play();
        this.playAudioType = true;
      },
    },
    watch:{
      'rangeValue'(value,value2) {
        let audio = document.querySelector('#audio');
        if (Math.abs(value - value2) > 2) {
          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.stopAudio();
              clearInterval(this.timer)
            }
          }, 1000);
          audio.currentTime = value;
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .radio1{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-size: 100% 100%;
    .bg-block{
      background-color: transparent;
      border: none;
      width: 345 * @toVw;
      top: 10 *@toVw;
      height: 540 * @toVw;
      padding: 10*@toVw;
      box-shadow: none;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      .tab-video-img{
        position: absolute;
        top: 85 * @toVw;
        width: 40* @toVw;
        right: 15 * @toVw;
      }
      .title{
        text-align: center;
        img{
          width: 80%;
        }
      }
      .cd{
        text-align: center;
        img{
          width: 194 * @toVw;
        }
      }
      .name-block{
        text-align: center;
        margin-top: 20 * @toVw;
        font-family: PingFang-SC-Regular;
        color: #333333;
        .name{
          height: 25 * @toVw;
          line-height: 25 * @toVw;
          font-size: 16 * @toVw;
        }
        .ahtor{
          font-size: 12 * @toVw;
        }
      }
      .play-block{
        width: 272 * @toVw;
        margin: 20 * @toVw auto auto auto;
        position: relative;
        img{
          width: 272 * @toVw;
        }
        .time-span{
          font-size: 12px;
          color: #888888;
          position: absolute;
          bottom: -15*@toVw;
          &.right{
            right: 0;
          }
        }
        .radius-icon{
          position: absolute;
          width: 13 * @toVw;
          top: 5*@toVw;
          left: 0;
          height: 13 * @toVw;
          background: #80952B ;
          border-radius: 50 * @toVw;
        }
      }
      .btn-block{
        line-height: 100 * @toVw;
        text-align: center;
        img{
          vertical-align: middle;;
          margin-right: 10 * @toVw;
          width: 24 *@toVw;
          &.play{
            width: 36 *@toVw;
          }
          &:last-child{
            margin-right: 0;
          }
        }
      }
    }
    .bottom-block{
      position: fixed;
      width: 100%;
      bottom: 10*@toVw;
      text-align: center;
      img{
        width: 127 * @toVw;
      }
      img:first-child{
        margin-right: 25 * @toVw;
      }
    }
  }
</style>
<style lang="less">
  @import "../../util/public";
  .mt-range-thumb {
    background-color: #fff;
    position: absolute;
    left: 0;
    width: 20 * @toVw !important;
    height: 20 * @toVw !important;
    top: -10 * @toVw !important;
    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;
  }
</style>
