<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">
      <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}">
      <look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson"/>
      <video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow"/>
      <audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson"/>
    </div>
  </div>
</template>

<script>
  import {getLessonDetailApi} 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,
        nowLesson:{
          type:'',
          content:null,
          age:1,
        }
      }
    },
    components:{
      lookBlock,
      videoBlock,
      audioBlock
    },
    mounted(){
      this.initPage();
    },
    methods:{
      backList(){
        let query={
          periods_id:this.$route.query.periods_id,
          course_type:this.$route.query.course_type,
          parent_category_id:this.$route.query.parent_category_id,
          back_id:this.category_id
        };
        this.$router.push({name:'map',query:query})
      },
      changeTitle(type){
        this.nowShow = type;
        switch (type) {
          case 1:
            this.nowLesson = {
              type:'text',
              content:this.lesson.content.look,
              age:this.nowLesson.age
            };
            break;
          case 2:
            if(this.lesson.content.play.type){
              this.nowLesson = {
                type:'audio',
                content:this.lesson.content.play,
                age:this.nowLesson.age
              };
            }else{
              this.nowLesson = {
                type:'video',
                content:this.lesson.content.play,
                age:this.nowLesson.age
              };
            }
            break;
          case 3:
            if(this.lesson.content.fun.type){
              this.nowLesson = {
                type:'audio',
                content:this.lesson.content.fun,
                age:this.nowLesson.age
              };
            }else{
              this.nowLesson = {
                type:'video',
                content:this.lesson.content.fun,
                age:this.nowLesson.age
              };
            }
            break;
        }
      },
      initPage(){
          this.lesson = JSON.parse(localStorage.getItem('lessonDetail'));
          this.nowShow = 1;
          document.title =`${this.lesson.domTitle}`;
          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";
.lessonHeader{background:url('/static/images/lessonHeader.png')  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: #eeeeee;
  }
  .backImg{
    position: fixed;
    bottom: 40*@toVw;
    right: 20*@toVw;
    z-index: 99999999;
    width: 60*@toVw;
  }

@media screen and (orientation: landscape) {
  @toVw:100/667vw;
  .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('/static/images/index-h.png')  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>

