<template>
  <div class="refueling1" :style="{backgroundImage:`url(${imgUrl.bg})`}">
    <div class="bg-block">
      <img :src="imgUrl.title" class="title" >
      <audio v-if="nowLesson.content.radio.length" :src="nowLesson.content.radio[0].url" autoplay ref="jiayouAudio"></audio>
      <div class="content-img" :style="{backgroundImage:nowLesson.content.banner[0] ? `url(${nowLesson.content.banner[0].url})`:''}">
        <img :src="imgUrl.radio" class="radio-icon" @click="playJiayou()">
      </div>
    </div>
    <div class="bottom-block">
      <img :src="imgUrl.backBtn" @click="goNext(nowLesson.content.lastIndex)"/>
      <img :src="imgUrl.next" v-if="nowLesson.content.nextIndex !== -1" @click="goNext(nowLesson.content.nextIndex)"/>
    </div>
  </div>
</template>

<script>
  import {refueling1} from "../../util/imgUrl";

  export default {
    name: "refueling1",
    props:[
      'nowLesson'
    ],
    data(){
      return{
        imgUrl:refueling1
      }
    },
    methods:{
      goNext(i){
        this.$emit('goNext',i)
      },
      // 播放加油包音频
      playJiayou(){
        if(this.$refs.jiayouAudio.paused){
          this.$refs.jiayouAudio.play()
        }else{
          this.$refs.jiayouAudio.pause()
        }
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .refueling1{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: 100% 100%;
    height: 100%;
    .bg-block{
      width: 325 * @toVw;
      height: 520 * @toVw;
      background: white;
      overflow: hidden;
      border-radius: 8 * @toVw;
      padding: 10 * @toVw;
      position: relative;
      top: 10 * @toVw;
      text-align: center;
    }
    .title{
      width: 280 * @toVw ;
    }
    .bottom-block{
      position: fixed;
      bottom: 10 *@toVw;
      width: 100%;
      text-align: center;
      img{
        width: 127 * @toVw;
        &:first-child{
          margin-right: 10*@toVw;
        }
      }
    }
    .content-img{
      position: relative;
      height: 832/ 2 * @toVw;
      background: #333;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 20/ 2 * @toVw;
      border-radius: 8/ 2 * @toVw;
      .radio-icon{
        position: absolute;
        width: 40 * @toVw;
        right: 20/ 2 * @toVw;
        top: 20/ 2 * @toVw;
      }
    }
  }
</style>
