<template>
  <div  class="refueling2" :style="{backgroundImage:`url(${imgUrl.refueling1.bg})`}">
    <div class="bg-block">
      <img :src="imgUrl.refueling1.title" class="title" v-if="nowLesson.content.title === 0">
      <img :src="imgUrl.refueling2.title2" class="title" v-if="nowLesson.content.title === 1"/>
      <div :class="{'audio-block-ref':true,active:!!audioActive}">
        <audio-div :src="nowLesson.content.radio[0].url" :autoPlay="true" />
      </div>
      <div class="content-img">
        <img :src="nowLesson.content.banner[0].url" class="img" v-if="nowLesson.content.banner[0]">
        <img :src="imgUrl.refueling2.radio" class="radio-icon"  @click="audioActive = !audioActive">
          <img :src="imgUrl.refueling2.back" class="left-icon" @click="goNext(nowLesson.content.lastIndex)"/>
          <img :src="imgUrl.refueling2.next" class="right-icon" @click="goNext(nowLesson.content.nextIndex,true)"/>
        <span class="pageNo">-{{nowLesson.content.mouldIndex}}-</span>
      </div>
    </div>
    <div class="bottom-block">
    </div>
  </div>
</template>

<script>
  import {refueling1,refueling2} from "../../util/imgUrl";
  import audioDiv from "../public/audioPlay"
  export default {
    name: "refueling2",
    props:[
      'nowLesson'
    ],
    components:{
      audioDiv
    },
    data(){
      return{
        imgUrl:{
          refueling1:refueling1,
          refueling2:refueling2
        },
        audioActive:false
      }
    },
    mounted(){
      window._hmt.push(['_trackPageview', '/#/PV/card']);
    },
    methods:{
      goNext(i,next){
        this.$emit('goNext',{i:i,next:!!next})
      },
    },
  }
</script>

<style scoped lang="less">
@import "../../util/public";
.audio-block-ref{
  width: 180 * @toVw;
  position: absolute;
  top: 280 * @toVw;
  left: 80 * @toVw;
  z-index: -1;
  opacity: 0;
  &.active{
    z-index: 3;
    opacity: 0.8;
  }
}
.refueling2{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  background-size: 100% 100%;
  .bg-block{
    width: 1054/2 * @toVw;
    height: 690/2 * @toVw;
    transform-origin: 355/2 * @toVw 370/2 * @toVw;
    transform: rotate(90deg);
    background: white;
    text-align: center;
    .title{
      position: relative;
      width: 560 / 2 * @toVw;
    }
    .content-img{
      width: 1000/2 * @toVw;
      height: 500/2 * @toVw;
      position: relative;
      border-radius: 8/2 * @toVw;
      background-size: 100% 100%;
      .img{
        width: 100%;
        border-radius: 4 * @toVw;
      }
      .left-icon{
        position: absolute;
        left: 10 * @toVw;
        top:50%;
        width: 40 * @toVw;
        margin-top: -20 * @toVw;
      }
      .right-icon{
        position: absolute;
        right: 10 * @toVw;
        top:50%;
        width: 40 * @toVw;
        margin-top: -20 * @toVw;
      }
      .pageNo{
        color: white;
        position: absolute;
        bottom: 0;
        right: 20 * @toVw;
      }
      .radio-icon{
        width: 40 * @toVw;
        position: absolute;
        bottom: 20/2 * @toVw;
        left: 20/2 * @toVw;
      }

    }
  }
}

@media screen and (orientation: landscape) {
  .audio-block-ref{
    width: 150 * @toVw;
    position: absolute;
    top: 118 * @toVw;
    left: 45 * @toVw;
    z-index: -1;
    opacity: 0;
    &.active{
      z-index: 3;
      opacity: 0.8;
    }
  }
  .refueling2{
    height: 100%;
    overflow: hidden;
    width: 100%;
    background-size: 100% 100%;
    .bg-block{
      width: 300 * @toVw;
      height: 160 * @toVw;
      transform: rotate(0);
      background: white;
      text-align: center;
      border-radius: 8 * @toVw;
      margin-top: 10 * @toVw ;
      .title{
        position: relative;
        top: -10 * @toVw;
        width: 120* @toVw;
      }
      .content-img{
        width: 270 * @toVw;
        height: 134 * @toVw;
        margin: 0 * @toVw auto 0 auto;
        position: relative;
        top: -22 *@toVw;
        border-radius: 8 * @toVw;
        background-size: 100% 100%;
        .img{
          width: 100%;
        }

        .left-icon{
          position: absolute;
          left: 5 * @toVw;
          top:50%;
          width: 20 * @toVw;
          margin-top: -10 * @toVw;
        }
        .right-icon{
          position: absolute;
          right: 5 * @toVw;
          top:50%;
          width: 20 * @toVw;
          margin-top: -10 * @toVw;
        }
        .pageNo{
          color: white;
          position: absolute;
          bottom: 0;
          right: 10 * @toVw;
        }
        .radio-icon{
          width: 22 * @toVw;
          position: absolute;
          bottom: 5 * @toVw;
          left: 5 * @toVw;
        }
        .changPage-block{
          position: absolute;
          left: 50%;
          bottom: 0;
          text-align: center;
          img{
            width: 18 * @toVw;
            &:first-child{
              margin-right: 15 * @toVw;
            }
          }
        }
      }
    }
  }
}
</style>
