<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" :showData="showData" :lessonTitle="lessonTitle" :isShare="isShare" @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,
        isShare:false,
        category_id:query.category_id,
        parent_category_id:query.parent_category_id,
        element_id:query.element_id,
        type:Number(query.type),
        watch_list:[],
        lessonList:null,
        id:0,
        nowLesson:null,
        lessonTitle:null,
        showData:null,
        DocumentTitle:'唱唱启蒙英语',
        timeLong:nowTime,
        mouldUrl:{
          refueling1:refueling1,
          refueling2:refueling2
        }
      }
    },
    mounted(){
      this.initPage();
    },
    methods:{
      // 初始化页面
      initPage(){
        getLessonDetailApi(this.periods_id,this.category_id,this.element_id).then(res=>{
          this.lessonList = JSON.parse(res.content);
          this.lessonTitle = res.title
          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|| i.name === '看一看-1'}).content.timeLang = 0
          }
          if(!!this.watch_list.find(i=>{return i.page_type === 1})){
            this.showData = this.watch_list.find(i=>{return i.page_type === 1}).learn_report
          }
          if(!!this.watch_list.find(i=>{return i.page_type === 4})){
            this.isShare = true
          }
          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'
            }
          });
          let nowNameList = this.lessonList.filter(a=>{return a.name === this.nowLesson.name && a.key === this.nowLesson.key});
          this.nowLesson.content.mouldIndex = `${nowNameList.indexOf(this.nowLesson)*1 + 1}`
          if(this.nowLesson.name === 1){
            this.DocumentTitle = '爸妈看一看'
          }else if(this.nowLesson.name === 2){
            this.DocumentTitle = '宝贝玩一玩'
          }else if(this.nowLesson.name === 3){
            this.DocumentTitle = '爸妈秀宝贝'
          }else if(this.nowLesson.name === 4){
            this.DocumentTitle = '多元趣味课'
          }
        });
      },
      // 提交秀宝贝记录
      subLog(data){
        let json = {
          page_type:1,
          page_id:3,
          stay_time:0,
          learn_report:data
        };
        subUserLessonApi(this.id, this.category_id, this.periods_id,json).then(()=>{})
      },
      backToList(){
        let json = {
          periods_id:this.$route.query.periods_id,
          parent_category_id:this.$route.query.parent_category_id,
          course_type:this.$route.query.course_type
        };
        this.$router.push({name:'map',query:json})
      },
      // 切换页面
      goNext(data) {
        if((!data.i && data.i !== 0)|| data.i === '' || data.i === -1){
          this.backToList()
        }
        let stay_time = Date.parse(new Date()) - this.timeLong;
        let page_id = 0;
        if(data.next){
          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 = 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;
            getLessonDetailApi(this.periods_id,this.category_id,this.element_id).then(res=>{
              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 || i.name === '看一看-1'}).content.timeLang = 0
              }
            })
          });
        }
        this.nowLesson = this.lessonList[data.i];
        let nowNameList = this.lessonList.filter(a=>{return a.name === this.nowLesson.name && a.key === this.nowLesson.key});
        this.nowLesson.content.mouldIndex = `${nowNameList.indexOf(this.nowLesson)*1 + 1}`
        if(this.nowLesson.name === 1){
          this.DocumentTitle = '爸妈看一看'
        }else if(this.nowLesson.name === 2){
          this.DocumentTitle = '宝贝玩一玩'
        }else if(this.nowLesson.name === 3){
          this.DocumentTitle = '爸妈秀宝贝'
        }else if(this.nowLesson.name === 4){
          this.DocumentTitle = '多元趣味课'
        }
      },
    },
    watch:{
      DocumentTitle(value){
        document.title = value
      }
    }
  }
</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>