<template>
  <div class="play1" :style="{backgroundImage:`url(${imgUrl.bg})`}">
    <div class="bg-block">
      <div class="video-block">
        <div class="icon-class" v-if="playVideoType">
          <img :src="imgUrl.play" @click="playVideo()"/>
        </div>
        <video
          ref="video"
          preload="auto"
          x5-video-player-type="h5"
          v-if="nowLesson.content.videoUrl.length > 0"
          :controls="!playVideoType"
          controlsList="nodownload" :poster="!!nowLesson.content.banner[0] ? nowLesson.content.banner[0].url : '' " :src="nowLesson.content.videoUrl[0].url"></video>
      </div>
      <img :src="imgUrl.radio" class="radio-img" v-if="nowLesson.content.tabRadio.type" @click="goNext(nowLesson.content.tabRadio.index)"/>
      <img :src="imgUrl.backBtn" class="btn back" @click="goNext(nowLesson.content.lastIndex)"/>
      <img :src="imgUrl.next" class="btn next" @click="goNext(nowLesson.content.nextIndex)"/>
    </div>
  </div>
</template>

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

  export default {
    name: "video1",
    props:[
      'nowLesson'
    ],
    data(){
      return{
        imgUrl:play1,
        playVideoType:true,
      }
    },
    methods:{
      goNext(i){
        this.$emit('goNext',i)
      },
      // 播放视频
      playVideo(){
        this.playVideoType = false;
        this.$refs.video.play()
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .play1{
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: 100% 100%;
    .bg-block{
      background: white;
      text-align: left;
      border-radius: 4 * @toVw;
      width: 557 * @toVw ;
      height: 294 * @toVw;
      transform-origin: 163 * @toVw 180 * @toVw;
      transform: rotate(90deg);
      padding: 10* @toVw;
      .radio-img{
        position: absolute;
        right: 10 * @toVw;
        top: 10 * @toVw;
        width: 40 * @toVw;
      }
      .btn{
        position: absolute;
        width: 40 * @toVw;
        right: 10 * @toVw;
        bottom: 10 * @toVw;
        &.back{
          bottom:60 * @toVw
        }
      }
      .video-block{
        margin: 0;
        background: black;
        border-radius: 8/ 2 * @toVw;
        height: 100%;
        width: 506 * @toVw;
        position: relative;

        .icon-class{
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0,0,0,0.3);
        }
        img{
          position: absolute;
          top: 50%;
          z-index: 2;
          left: 50%;
          width: 58 * @toVw ;
          margin-top: -50/ 2 * @toVw;
          margin-left: -50/ 2 * @toVw;
        }
        video{
          width: 100%;
        }
      }
    }
  }
  @media screen and (orientation: landscape) {
      .play1 {
        height: 100%;
        background-size: 100% 100%;
        padding: 5 * @toVw;
        .bg-block {
          margin-top: 5 * @toVw;
          background: white;
          text-align: left;
          border-radius: 4 * @toVw;
          width: 245 * @toVw;
          height: 120 * @toVw;
          transform: rotate(0deg);
          padding: 10* @toVw;
          .radio-img {
            position: absolute;
            right: 5 * @toVw;
            top: 5 * @toVw;
            width: 20 * @toVw;
          }
          .btn {
            position: absolute;
            width: 20 * @toVw;
            right: 5 * @toVw;
            bottom: 5 * @toVw;
            &.back {
              bottom: 30 * @toVw
            }
          }
          .video-block {
            margin: 0;
            background: black;
            border-radius: 8/ 2 * @toVw;
            height: 100%;
            width: 220 * @toVw;
            position: relative;

            .icon-class {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background: rgba(0, 0, 0, 0.3);
            }
            img {
              position: absolute;
              top: 50%;
              z-index: 2;
              left: 50%;
              width: 30 * @toVw;
              margin-top: -30/ 2 * @toVw;
              margin-left: -30/ 2 * @toVw;
            }
            video {
              width: 100%;
            }
          }
        }
      }
  }
</style>