<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>
    <img :src="starUrl" class="star-img" v-show="starShow">
  </div>
</template>
<script>
  import {getLessonDetailApi,subUserLessonApi} from "../service/api";
  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'
  import starUrl from '../assets/map20/star.png'
  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,
        starUrl:starUrl,
        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,
        starShow:false,
        id:0,
        nowLesson:null,
        lessonTitle:null,
        showData:null,
        DocumentTitle:'唱唱启蒙英语',
        timeLong:nowTime,
      }
    },
    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
            }else if(this.type===2){
              return i.name === this.type
            }else if(this.type===3){
              return i.name === this.type
            }else if(this.type===4){
              return i.name === this.type
            }
          });
          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 = '爸妈看一看';
            window._hmt.push(['_trackEvent', '看课', "切换到爸妈看一看",`periods_id=${this.periods_id}&category_id=${this.category_id}&element_id=${this.element_id}`]);//百度统计
          }else if(this.nowLesson.name === 2){
            this.DocumentTitle = '宝贝玩一玩';
            window._hmt.push(['_trackEvent', '看课', "切换到宝贝玩一玩",`periods_id=${this.periods_id}&category_id=${this.category_id}&element_id=${this.element_id}`]);//百度统计
          }else if(this.nowLesson.name === 3){
            this.DocumentTitle = '爸妈秀宝贝';
            window._hmt.push(['_trackEvent', '看课', "切换到爸妈秀宝贝",`periods_id=${this.periods_id}&category_id=${this.category_id}&element_id=${this.element_id}`]);//百度统计
          }else if(this.nowLesson.name === 4){
            this.DocumentTitle = '多元趣味课';
            window._hmt.push(['_trackEvent', '看课', "切换到多元趣味课",`periods_id=${this.periods_id}&category_id=${this.category_id}&element_id=${this.element_id}`]);//百度统计
          }
        });
      },
      // 提交秀宝贝记录
      subLog(data){
        let json = {
          page_type:1,
          page_id:3,
          stay_time:1,
          learn_report:data
        };
        let str = data.replace(/(^\s*)|(\s*$)/g, "");
        if(str && str !== ''){
          window._hmt.push(['_trackEvent', '成长秀记录','有内容记录']);//百度统计
        }else{
          window._hmt.push(['_trackEvent', '成长秀记录','无内容记录'])
        }
        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) {
        this.starShow = false;
        let stay_time = Date.parse(new Date()) - this.timeLong;
        if((!data.i && data.i !== 0)|| data.i === '' || data.i === -1){
          if(data.i === -1){
            if(!this.watch_list.find(i=>{return i.page_id === 5})){
              this.$nextTick(()=>{
                this.starShow = true;
              })
            }
            let json = {
              page_type: 0,
              page_id: 5,
              stay_time: stay_time / 1000
            };
            subUserLessonApi(this.id, this.category_id, this.periods_id, json).then(res => {
              this.backToList()
            })
          }else{
            this.backToList()
          }
        }
        let page_id = 0;
        if(data.next){
          if (this.nowLesson.name === 1) {
            page_id = 1
          } else if (this.nowLesson.name === 2 ) {
            if(!this.watch_list.find(i=>{return i.page_id === 2})){
              this.starShow = false;
              this.$nextTick(()=>{
                this.starShow = true;
              });
            }
            page_id = 2
          } else if (this.nowLesson.name === 3) {
            if(!this.watch_list.find(i=>{return i.page_id === 3})){
              this.starShow = false;
              this.$nextTick(()=>{
                this.starShow = true;
              });
            }
            page_id = 3
          }
          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.$nextTick(()=>{
          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 = '爸妈看一看';
            window._hmt.push(['_trackEvent', '看课', "切换到爸妈看一看",]);//百度统计
          }else if(this.nowLesson.name === 2){
            this.DocumentTitle = '宝贝玩一玩';
            window._hmt.push(['_trackEvent', '看课', "切换到宝贝玩一玩",]);//百度统计
          }else if(this.nowLesson.name === 3){
            this.DocumentTitle = '爸妈秀宝贝';
            window._hmt.push(['_trackEvent', '看课', "切换到爸妈秀宝贝",]);//百度统计
          }else if(this.nowLesson.name === 4){
            this.DocumentTitle = '多元趣味课';
            window._hmt.push(['_trackEvent', '看课', "切换到多元趣味课",]);//百度统计
          }
        });
      },
    },
    watch:{
      DocumentTitle(value){
        document.title = value
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .star-img{
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 1px;
    right: 0;
    animation:myfirst 2s 1;
    animation-direction: normal
  }
  @keyframes myfirst
  {
    0% {
      transform:translate(0,0) rotate(30deg) scale(0,0);

    }
    50%{
      transform:translate(-180 * @toVw,-300 * @toVw)  rotate(340deg) scale(40,40)
    }
    to {
      transform:translate(0 * @toVw,-800 * @toVw) rotate(720deg) scale(0,0)
    }
  }

  .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>