<template>
  <div class="lesson">
    <!--看一看1-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'look1'">
      <look1-div :nowLesson="nowLesson" @goNext="goNext"></look1-div>
    </transition>
    <!--玩一玩1-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'play1'">
      <video1-div :nowLesson="nowLesson" @goNext="goNext"></video1-div>
    </transition>
    <!--玩一玩音频-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'radio1'">
      <audio1-div :nowLesson="nowLesson" @goNext="goNext"></audio1-div>
    </transition>
    <!--秀宝贝1-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'show1'">
      <show1-div :nowLesson="nowLesson" @goNext="goNext" @subLog="subLog"></show1-div>
    </transition>
    <!--加油包1-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling1'">
      <refueling1-div :nowLesson="nowLesson" @goNext="goNext"></refueling1-div>
    </transition>
    <!--加油包2-->
    <transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling2'">
      <refueling2-div :nowLesson="nowLesson" @goNext="goNext"></refueling2-div>
    </transition>
  </div>
</template>
<script>
  import {getLessonDetailApi,subUserLessonApi} from "../service/api";
  import {refueling1,refueling2} from "../util/imgUrl";
  import look1Div from './mould/look1'
  import video1Div from './mould/video1'
  import audio1Div from './mould/audio1'
  import show1Div from './mould/show1'
  import refueling1Div from './mould/refueling1'
  import refueling2Div from './mould/refueling2'
  export default {
    name: "lesson",
    components:{
      look1Div,
      video1Div,
      audio1Div,
      show1Div,
      refueling1Div,
      refueling2Div
    },
    data(){
      let query = this.$route.query;
      let nowTime = Date.parse(new Date());
      return{
        periods_id:query.periods_id,
        category_id:query.category_id,
        parent_category_id:query.parent_category_id,
        type:Number(query.type),
        watch_list:[],
        lessonList:null,
        id:0,
        nowLesson:null,
        timeLong:nowTime,
        mouldUrl:{
          refueling1:refueling1,
          refueling2:refueling2
        }
      }
    },
    mounted(){
      this.initPage();
    },
    methods:{
      // 初始化页面
      initPage(){
        getLessonDetailApi(this.periods_id,this.category_id).then(res=>{
          this.lessonList = JSON.parse(res.content);
          this.id = res.id;
          this.watch_list = res.watch_list;
          if(!!this.watch_list.find(i=>{return i.page_id === 1})){
            this.lessonList.find(i=>{return i.name === 1}).content.timeLang = 0
          }
          this.nowLesson = this.lessonList.find(i=>{
            if(this.type===1){
              return i.name === this.type || i.key === 'look1'
            }else if(this.type===2){
              return i.name === this.type || i.key === 'play1'
            }else if(this.type===3){
              return i.name === this.type || i.key === 'show1'
            }else if(this.type===4){
              return i.name === this.type || i.key === 'refueling1' || i.key === 'refueling2'
            }
          });

        });
      },
      // 提交秀宝贝记录
      subLog(data){
        let json = {
          page_type:1,
          page_id:0,
          stay_time:0,
          learn_report:data
        };
        subUserLessonApi(this.id, this.category_id, this.periods_id,json).then(()=>{})
      },
      // 切换页面
      goNext(i, setTime) {
        if(!i && i !== 0){
          this.backToList()
        }
        let stay_time = Date.parse(new Date()) - this.timeLong;
        let page_id = 0;
        if (this.nowLesson.name === 1 || this.nowLesson.key === 'look1') {
          page_id = 1
        } else if (this.nowLesson.name === 2 || this.nowLesson.key === 'play1' || (this.nowLesson.key === 'radio1' && this.nowLesson.content.titleType === 0)) {
          page_id = 2
        } else if (this.nowLesson.name === 3 || this.nowLesson.key === 'show1') {
          page_id = 3
        } else if (this.nowLesson.name === 4 || this.nowLesson.key === 'refueling1' || (this.nowLesson.key === 'radio1' && this.nowLesson.content.titleType === 1)) {
          page_id = 4
        }
        let json = {
          page_type: 0,
          page_id: page_id,
          stay_time: stay_time / 1000
        };
        subUserLessonApi(this.id, this.category_id, this.periods_id, json).then(res => {
          this.timeLong += stay_time
        });
        this.nowLesson = this.lessonList[i];
      },
    },
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .popup-block{
    background-color: transparent;
    .tip{
      position: fixed;
      top: 0;
      width: 300 * @toVw;
      z-index: 100;
      right: 0;
    }
    .showFinish-block{
      background-size: 100% 100%;
      position: relative;
      top: 80 * @toVw;
      width: 313 * @toVw;
      height: 439 * @toVw;
      background-color: rgba(0,0,0,0.5);
      .header{
        position: absolute;
        width: 100%;
        text-align: center;
        top: 110 * @toVw;
        img{
          width: 48 * @toVw;
          border-radius: 1000px;
        }
      }
      .text1{
        position: absolute;
        right: 125 * @toVw;
        width: 3em;
        text-align: center;
        top: 181 * @toVw;
        font-size:12px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:17px;
      }
      .text2{
        position: absolute;
        right: 125 * @toVw;
        width: 3em;
        text-align: center;
        top: 225 * @toVw;
        font-size:12px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:17px;
      }
      .text3{
        position: absolute;
        right: 125 * @toVw;
        width: 3em;
        text-align: center;
        top: 273 * @toVw;
        font-size:12px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:17px;
      }
    }
  }
  .lesson{
    height: 100%;
    min-height: 500 * @toVw;
    overflow: auto;
    .finishBtn{
      width: 100%;
      text-align: center;
      position: absolute;
      top: 375 * @toVw;
      img{
        width: 215 * @toVw;
      }
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }


</style>