<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"
        :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">
        <img :src="imgUrl.loading"/>
        <div class="radius-icon" :style="{left:audioLeft}"></div>
      </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,
        radioLenth:0,
        playAudioType:false,
      }
    },
    methods:{
      goNext(i,next){
        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('已是最后一个')
        }
      },
      updateTime(e){
        let time = e.target.currentTime / e.target.duration * 72.5333333;
        this.audioLeft = time + 'vw';
        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;
      },
    }
  }
</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;
        bottom: 15 * @toVw;
        width: 24* @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;
        }
        .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>
