<template>
  <div class="newLesson">
    <!--竖屏导航-->
    <div class="header" v-if="!nowLesson.old">
      <i class="lessonHeader home" @click="backList"></i>
      <i :class="{lessonHeader:true, defaultLook:nowShow !== 1,look:nowShow===1}" @click="changeTitle(1)"></i>
      <i :class="{lessonHeader:true, defaultPlay:nowShow !== 2,play:nowShow===2}" @click="changeTitle(2)"></i>
      <i :class="{lessonHeader:true, defaultFun:nowShow !== 3,fun:nowShow===3}" @click="changeTitle(3)"></i>
    </div>
    <!--横屏导航-->
    <div class="header-h" v-if="!nowLesson.old">
      <i :class="{headerHP:true, defaultLook:nowShow !== 1,lookHP:nowShow===1}" @click="changeTitle(1)"></i>
      <i :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="changeTitle(2)"></i>
      <i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="changeTitle(3)"></i>
      <i class="headerHP home" @click="backList"></i>
    </div>
    <!--老课包返回按钮-->
    <img :src="backUrl" v-if="nowLesson.old"  @click="backList" class="backImg">
    <!--内容-->
    <div :class="{'index-content-block':true,radius:nowShow !== 1 || nowLesson.old}">
      <look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson" @backList="backList"/>
      <video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow" @backList="backList"/>
      <audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson" @backList="backList"/>
    </div>
  </div>
</template>

<script>
  import {getViewDataApi} from "../../service/api";
  import lookBlock from './look'
  import videoBlock from './video'
  import backUrl from '../../assets/newLesson/back.png'
  import audioBlock from './audio'
  export default {
    name: "index",
    data(){
      let query = this.$route.query;
      return {
        backUrl:backUrl,
        periods_id:query.periods_id,
        category_id:query.category_id,
        elementId:query.elementId,
        lesson:null,
        nowShow:0,
        page_id :1,
        stillTime:0,
        watchDetail:null,
        timeInterval:null,
        nowLesson:{
          type:'',
          content:null,
          age:1,
        }
      }
    },
    components:{
      lookBlock,
      videoBlock,
      audioBlock
    },
    mounted(){
      this.initPage();
    },
    methods:{
      backList(){
        this.$message({
          message: '预览无该功能',
          type: 'error'
        });
      },
      changeTitle(type){
        this.nowShow = type;
        let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
        let nowTime = Date.parse(new Date());
        let lookTime = (nowTime- lessonDetail.nowTime)/1000;
        let json = {
          page_type:0,
          page_id:this.page_id,
          stay_time:lookTime,
        };
        switch (type) {
          case 1:
            this.page_id = 1;
            this.nowLesson = {
              type:'text',
              title:1,
              partName:'爸妈看一看',
              content:this.lesson.content.look,
              age:this.nowLesson.age
            };
            break;
          case 2:
            this.page_id = 2;
            if(this.lesson.content.play.type){
              this.nowLesson = {
                type:'audio',
                title:2,
                partName:'宝贝玩一玩',
                content:this.lesson.content.play,
                age:this.nowLesson.age
              };
            }else{
              this.nowLesson = {
                type:'video',
                title:2,
                partName:'宝贝玩一玩',
                content:this.lesson.content.play,
                age:this.nowLesson.age
              };
            }
            break;
          case 3:
            this.page_id = 5;
            if(this.lesson.content.fun.type){
              this.nowLesson = {
                type:'audio',
                title:3,
                partName:'磨磨小耳朵',
                content:this.lesson.content.fun,
                age:this.nowLesson.age
              };
            }else{
              this.nowLesson = {
                type:'video',
                partName:'磨磨小耳朵',
                title:3,
                content:this.lesson.content.fun,
                age:this.nowLesson.age
              };
            }
            break;
        }

      },
      initPage(){
        getViewDataApi(this.$route.query.elementId).then(res=>{
          localStorage.setItem('lessonDetail',res);
          this.lesson = {content:JSON.parse(res)};
          this.nowShow = 1;
          document.title =`课程预览`;
          this.nowLesson = {
            type:'text',
            content:this.lesson.content.look,
            age:this.nowLesson.age
          };
          if(this.lesson.content.play.video.length < 1 && this.lesson.content.play.audio.length < 1 ){
            this.nowLesson.old=true
          }
        })
      }
    },
  }
</script>

<style scoped lang="less">
@import "../../util/public";
*{
  margin: auto;
}
.lessonHeader{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader.png?v=2')  no-repeat;background-size:102*@toVw 334*@toVw;display: inline-block}
.header-h{display: none}
.home{height:46*@toVw;width:46*@toVw;background-position:0 0;}
.play{height:48*@toVw;width:102*@toVw;background-position:0 -46*@toVw;}
.look{height:48*@toVw;width:102*@toVw;background-position:0 -94*@toVw;}
.fun{height:48*@toVw;width:102*@toVw;background-position:0 -142*@toVw;}
.defaultFun{height:48*@toVw;width:102*@toVw;background-position:0 -190*@toVw;}
.defaultLook{height:48*@toVw;width:102*@toVw;background-position:0 -238*@toVw;}
.defaultPlay{height:48*@toVw;width:102*@toVw;background-position:0 -286*@toVw;}
  .header{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5*@toVw 0;
    z-index: 2;
    background:rgba(255,255,255,1);
    box-shadow:0*@toVw 2*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.1);
  }
  .newLesson{
    background: #f8f8f8;
  }
  .backImg{
    position: fixed;
    bottom: 40*@toVw;
    right: 20*@toVw;
    z-index: 99999999;
    width: 60*@toVw;
  }

@media screen and (orientation: landscape) {
  @toVw:100/667vw;
  .backImg{
    position: fixed;
    bottom: 40*@toVw;
    right: 20*@toVw;
    z-index: 99999999;
    width: 60*@toVw;
  }
  .lessonHeader{
    display: none;
  }
  .header{
    display: none;
  }
  .actBanKuai{
    background-color: white;
    border: 1*@toVw solid transparent;
    border-left-color: black;
    border-top-color: black;
    border-bottom-color: black;
    border-radius: 8*@toVw 0 0 8*@toVw;
  }
  .headerHP{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2')  no-repeat;background-size:62*@toVw 434*@toVw;display: inline-block}
  .home{height:62*@toVw;width:62*@toVw;background-position:0 0;}
  .lookHP{height:62*@toVw;width:62*@toVw;background-position:0 -62*@toVw;.actBanKuai}
  .playHP{height:62*@toVw;width:62*@toVw;background-position:0 -124*@toVw;.actBanKuai}
  .funHP{height:62*@toVw;width:62*@toVw;background-position:0 -186*@toVw;.actBanKuai}
  .defaultFun{height:62*@toVw;width:62*@toVw;background-position:0 -248*@toVw;}
  .defaultLook{height:62*@toVw;width:62*@toVw;background-position:0 -310*@toVw;}
  .defaultPlay{height:62*@toVw;width:62*@toVw;background-position:0 -372*@toVw;}

  .header-h{
    display: block;
    width: 62*@toVw;
    position: absolute;
    left: 17.5*@toVw;
    top: 20*@toVw;
    z-index: 2;
    .headerHP{
      display: block;
    }
  }
  .index-content-block{
    position: absolute;
    top: 20*@toVw;
    left: 80*@toVw;
    right: 20*@toVw;
    bottom: 20*@toVw;
    background: white;
    border: 1*@toVw solid #000;
    border-radius: 0 8*@toVw 8*@toVw 8*@toVw;
    &.radius{
      border-radius: 8*@toVw;
    }
  }
}
@media screen and (min-aspect-ratio: ~"20/8"){
  @toVw:100/900vw;
  .backImg{
    position: fixed;
    bottom: 40*@toVw;
    right: 20*@toVw;
    z-index: 99999999;
    width: 60*@toVw;
  }
  .lessonHeader{
    display: none;
  }
  .header{
    display: none;
  }
  .actBanKuai{
    background-color: white;
    border: 1*@toVw solid transparent;
    border-left-color: black;
    border-top-color: black;
    border-bottom-color: black;
    border-radius: 8*@toVw 0 0 8*@toVw;
  }
  .headerHP{
    background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2')  no-repeat;
    background-size:62*@toVw 434*@toVw;
    display: inline-block;
    &.lookHP{height:62*@toVw;width:62*@toVw;background-position:0 0;.actBanKuai}
    &.defaultPlay{height:62*@toVw;width:62*@toVw;background-position:0 -62*@toVw;}
    &.playHP{height:62*@toVw;width:62*@toVw;background-position:0 -124*@toVw;.actBanKuai}
    &.defaultLook{height:62*@toVw;width:62*@toVw;background-position:0 -186*@toVw;}
    &.home{height:62*@toVw;width:62*@toVw;background-position:0 -248*@toVw;}
    &.defaultFun{height:62*@toVw;width:62*@toVw;background-position:0 -310*@toVw;}
    &.funHP{height:62*@toVw;width:62*@toVw;background-position:0 -372*@toVw;.actBanKuai}
  }

  .header-h{
    display: block;
    width: 62*@toVw;
    position: absolute;
    left: 17.5*@toVw;
    top: 20*@toVw;
    z-index: 2;
    .headerHP{
      display: block;
    }
  }
  .index-content-block{
    position: absolute;
    top: 20*@toVw;
    left: 80*@toVw;
    right: 20*@toVw;
    bottom: 20*@toVw;
    background: white;
    border: 1*@toVw solid #000;
    border-radius: 0 8*@toVw 8*@toVw 8*@toVw;
    &.radius{
      border-radius: 8*@toVw;
    }
  }
}
</style>

