<template>
  <div class="lesson">
    <!--看一看1-->
    <div :style="{backgroundImage:`url(${mouldUrl.look1.bg}`}" class="look1" v-if="nowLesson && nowLesson.key === 'look1'">
      <div class="content">
        <img :src="mouldUrl.look1.reqiqiu" class="reqiqiu"/>
        <img :src="mouldUrl.look1.qiqiu" class="qiqiu"/>
        <img :src="mouldUrl.look1.feiji" class="feiji"/>
        <div class="title">
          <img :src="mouldUrl.look1.title1"/>
        </div>
        <div class="radio">
          <img :src="mouldUrl.look1.radio"/>
        </div>
        <div class="today-block">
          <img :src="mouldUrl.look1.tadayBg"/>
          <div class="today-text">
            <div class="zhanwei1"></div>
            <div class="zhanwei2"></div>
            <div class="zhanwei3"></div>
            <div v-html="nowLesson.content.today">
            </div>
          </div>
        </div>
        <div class="title2-block">
          <img :src="mouldUrl.look1.title2" class="title2"/>
          <div class="directory-text">
            <div  v-html="nowLesson.content.directory">
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-block">
        <img :src="mouldUrl.look1.bank" @click="backToList()"/>
        <img :src="mouldUrl.look1.go" @click="goNext(nowLesson.content.nextIndex,nowLesson.content.timeLang)"/>
      </div>
    </div>
    <div v-if="nowLesson && nowLesson.key === 'play1'" class="play1" :style="{backgroundImage:`url(${mouldUrl.play1.bg}`}">
      <div class="bg-block">
        <div class="video-block">
          <div class="icon-class">
            <img :src="mouldUrl.play1.play"/>
          </div>
          <video v-if="nowLesson.content.videoUrl.length > 0" :poster="nowLesson.content.banner[0].url" :src="nowLesson.content.videoUrl[0].url"></video>
        </div>
        <img :src="mouldUrl.play1.radio" class="radio-img" v-if="nowLesson.content.tabRadio.type" @click="goNext(nowLesson.content.tabRadio.index)"/>
        <img :src="mouldUrl.play1.backBtn" class="btn back" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="mouldUrl.play1.next" class="btn next" @click="goNext(nowLesson.content.nextIndex)"/>
      </div>
    </div>
    <div v-if="nowLesson && nowLesson.key === 'radio1'" class="radio1" :style="{backgroundImage:`url(${nowLesson.content.titleType === 0 ? mouldUrl.radio1.bg:mouldUrl.radio1.moerduoBg})`}">
      <div class="bg-block" :style="{backgroundImage:`url(${mouldUrl.radio1.contentBg}`}">
        <img :src="mouldUrl.radio1.tabVideo" class="tab-video-img" @click="goNext(nowLesson.content.tabVideo.index)" v-if="nowLesson.content.tabVideo.type"/>
        <div class="title">
          <img :src="mouldUrl.radio1.title" v-if="nowLesson.content.titleType === 0"/>
          <img :src="mouldUrl.radio1.moerduo" v-if="nowLesson.content.titleType === 1"/>
        </div>
        <div class="cd">
          <img :src="mouldUrl.radio1.CD"/>
        </div>
        <div class="name-block">
          <div class="name">
            <span v-if="nowLesson.content.radio[0]">{{nowLesson.content.radio[0].title}}</span>
          </div>
          <div class="ahtor">
            <span v-if="nowLesson.content.radio[0]">{{nowLesson.content.radio[0].lable}}</span>
          </div>
        </div>
        <div class="play-block">
          <img :src="mouldUrl.radio1.loading"/>
          <div class="radius-icon"></div>
        </div>
        <div class="btn-block">
          <img :src="mouldUrl.radio1.near"/>
          <img :src="mouldUrl.radio1.play" class="play"/>
          <img :src="mouldUrl.radio1.next"/>
        </div>
      </div>
      <div class="bottom-block" v-if="nowLesson.content.buttonType === 0">
        <img :src="mouldUrl.radio1.backLookBtn" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="mouldUrl.radio1.showBtn" @click="goNext(nowLesson.content.nextIndex)"/>
      </div>
      <div class="bottom-block" v-if="nowLesson.content.buttonType === 1">
        <img :src="mouldUrl.radio1.backPlayBtn" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="mouldUrl.radio1.finishBtn" @click="goNext(nowLesson.content.nextIndex)"/>
      </div>
      <div class="bottom-block" v-if="nowLesson.content.buttonType === 2">
        <img :src="mouldUrl.radio1.backLookBtn" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="mouldUrl.radio1.finishBtn" @click="goNext(nowLesson.content.nextIndex)"/>
      </div>
      <div class="bottom-block" v-if="nowLesson.content.buttonType === 3">
        <img :src="mouldUrl.radio1.backPlayBtn" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="mouldUrl.radio1.nextBtn" @click="goNext(nowLesson.content.nextIndex)"/>
      </div>
    </div>
    <div v-if="nowLesson && nowLesson.key === 'show1'" class="show1" :style="{backgroundImage:`url(${mouldUrl.show1.bg}`}">
      <img :src="mouldUrl.show1.riji" class="riji"/>
      <img :src="mouldUrl.show1.yeziyou" class="yeziyou"/>
      <img :src="mouldUrl.show1.yezizuo" class="yezizuo"/>
      <img :src="mouldUrl.show1.zhaopianqiang" class="zhaopianqiang"/>
      <div class="bg-block" :style="{backgroundImage:`url(${mouldUrl.show1.contentBg}`}">
        <div class="title-block">
          <img :src="mouldUrl.show1.title"/>
        </div>
        <div class="textarea">
          <div contenteditable class="text" id="text">

          </div>
          <div class="btn-block">
            <img :src="mouldUrl.show1.radioIcon" @click="chooseRadio()"/>
            <img :src="mouldUrl.show1.imgIcon"/>
            <img :src="mouldUrl.show1.videoIcon"/>
          </div>
        </div>
        <div class="text-block">
          解释说明：
          <div class="text-content">
            各位爸爸妈妈，记得在每日完成学习后记录宝宝一天的学习过程哦！养成良好的学习习惯也是很重要的一环，记录并分享后更可以获得
            <span style="color: #333">唱学加油包</span>哦！
          </div>
        </div>
      </div>
      <div class="bottom-block">
        <img :src="mouldUrl.show1.backBtn" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="mouldUrl.show1.jiayoubao" @click="subLog(nowLesson.content.nextIndex)"/>
      </div>
    </div>
    <div v-if="nowLesson && nowLesson.key === 'refueling1'" class="refueling1" :style="{backgroundImage:`url(${mouldUrl.refueling1.bg}`}">
      <div class="bg-block">
        <img :src="mouldUrl.refueling1.title" class="title">
        <div class="content-img" :style="{backgroundImage:nowLesson.content.banner[0] ? `url(${nowLesson.content.banner[0].url}`:''}">
          <img :src="mouldUrl.refueling1.radio" class="radio-icon">
        </div>
      </div>
      <div class="bottom-block">
        <img :src="mouldUrl.refueling1.backBtn"/>
        <img :src="mouldUrl.refueling1.next" v-if="nowLesson.content.nextType"/>
      </div>
    </div>
  </div>
</template>
<script>
  import {getLessonDetailApi,subUserLessonApi,getwechatParam} from "../service/api";
  import {look1,radio1,play1,show1,refueling1} from "../util/imgUrl";
  import { Toast } from 'mint-ui';
  export default {
    name: "lesson",
    data(){
      let query = this.$route.query;
      return{
        periods_id:query.periods_id,
        category_id:query.category_id,
        parent_category_id:query.parent_category_id,
        type:query.type,
        watch_list:[],
        lessonList:null,
        id:0,
        nowLesson:null,
        timeLong:Date.parse(new Date()),
        mouldUrl:{
          look1:look1,
          radio1:radio1,
          play1:play1,
          show1:show1,
          refueling1:refueling1
        }
      }
    },
    mounted(){
      this.initPage();
    },
    methods:{
      initPage(){
        getwechatParam({api_list:'chooseImage'}).then(res=>{
          wx.config({
            debug: res.debug,
            appId: res.appId,
            timestamp: parseInt(res.timestamp),
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: res.jsApiList
          });
        });
        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;
          this.nowLesson = this.lessonList.find(i=>{return i.key === this.type})
        })
      },
      chooseRadio(){
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          }
        });
      },
      goNext(i,setTime){
        let stay_time = Date.parse(new Date()) - this.timeLong;
        if(!this.watch_list.find(x=>{return x.page_id === 1}) && setTime && stay_time/1000 < setTime){
          Toast('尚未到时间，请继续观看');
          return
        }
        let page_id = 0;
        if(this.nowLesson.key === 'look1'){
          page_id = 1
        }else if(this.nowLesson.key === 'play1' ||( this.nowLesson.key === 'radio1' && this.nowLesson.content.titleType === 0)){
          page_id = 2
        }else if(this.nowLesson.key === 'show1'){
          page_id = 3
        }else if(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];
      },
      backToList(){
        let query = {
          periods_id:this.periods_id,
          parent_category_id:this.parent_category_id
        };
        this.$router.push({name:'map',query:query})
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .lesson{
    height: 100%;
    overflow: auto;
    .look1{
      height: 100%;
      background-size: 100% 100%;
      .bottom-block{
        position: fixed;
        bottom: 9 * @toVw;
        width: 100%;
        left: 0;
        text-align: center;
        img{
          width: 127 * @toVw;
        }
        img:first-child{
          margin-right: 25 * @toVw;
        }
      }
      .content{
        width: 325 * @toVw;
        height: 520 * @toVw;
        background: white;
        border-radius: 5px;
        position: relative;
        top: 15 * @toVw;
        padding: 10 * @toVw;
        .reqiqiu{
          position: absolute;
          left: -30/ 2 * @toVw;
          width: 56 * @toVw;
          z-index: 1;
        }
        .qiqiu{
          position: absolute;
          z-index: 1;
          width: 42 *@toVw;
          left: -30/ 2 * @toVw;
          top: 700/ 2 * @toVw
        }
        .feiji{
          position: absolute;
          z-index: 1;
          width: 84 * @toVw;
          right: -10 * @toVw;
          top: 120 * @toVw;
        }
        .title{
          img{
            width: 100%;
          }
        }
        .radio{
          text-align: center;
          img{
            width: 85%;
          }
        }
        .today-block{
          position: relative;
          img{
            width: 100%;
          }
          .today-text{
            position: absolute;
            top: 35* @toVw;
            left: 0;
            bottom: 0;
            right: 0;
            font-size: 14* @toVw;
            line-height: 35* @toVw;
            text-align: left;
            padding-left: 20* @toVw;
            padding-right: 15* @toVw;
            z-index: 3;
            overflow: hidden;
            .zhanwei1{
              float: left;
              clear: left;
              width: 15* @toVw;
              height: 35* @toVw;
            }
            .zhanwei2{
              float: left;
              clear: left;
              width: 60* @toVw;
              height: 35* @toVw;
            }
            .zhanwei3{
              float: left;
              clear: left;
              width: 70* @toVw;
              height: 35* @toVw;
            }
          }
        }
        .title2-block{
          background: #FFFFFF;
          border: 1px solid #2E2E2E;
          border-radius: 4px;
          position: relative;
          top: 10 * @toVw;
          height: 213 * @toVw;
          .directory-text{
            position: absolute;
            top: 50/ 2 * @toVw;
            left: 0;
            bottom: 0;
            right: 0;
            font-size: 28/ 2 * @toVw;
            line-height: 50/ 2 * @toVw;
            text-align: left;
            padding-left: 40/ 2 * @toVw;
            padding-right: 30/ 2 * @toVw;
            z-index: 3;
            overflow: auto;
          }
          .title2{
            position: absolute;
            width: 192 * @toVw;
            top: -20 * @toVw;
            left: 10 * @toVw;
          }
          .redM{
            position: absolute;
            width: 96 * @toVw;
            top: -2 * @toVw;
            right: -2 * @toVw;
          }
          .flour{
            position: absolute;
            bottom: 0;
            width: 169 * @toVw;
            right: 0;
          }
        }
      }
    }
    .play1{
      height: 100%;
      background-size: 100% 100%;
      .bg-block{
        background: white;
        text-align: left;
        border-radius: 4 * @toVw;
        width: 577 * @toVw ;
        height: 314 * @toVw;
        transform-origin: 168 * @toVw 185 * @toVw;
        transform: rotate(90deg);
        padding: 10* @toVw;
        .radio-img{
          position: absolute;
          right: 10 * @toVw;
          top: 10 * @toVw;
          width: 40 * @toVw;
        }
        .btn{
          position: absolute;
          width: 40 * @toVw;
          right: 10 * @toVw;
          bottom: 10 * @toVw;
          &.back{
            bottom:60 * @toVw
          }
        }
        .video-block{
          margin: 0;
          background: black;
          border-radius: 8/ 2 * @toVw;
          height: 100%;
          width: 506 * @toVw;
          position: relative;
          .icon-class{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.3);
          }
          img{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 58 * @toVw ;
            margin-top: -50/ 2 * @toVw;
            margin-left: -50/ 2 * @toVw;
          }
          video{
            width: 1000/ 2 * @toVw;
          }
        }
      }
    }
    .radio1{
      height: 100%;
      background-size: 100% 100%;
      .bg-block{
        background-color: transparent;
        border: none;
        width: 345 * @toVw;
        top: 10 *@toVw;
        height: 540 * @toVw;
        padding: 10*@toVw;
        box-shadow: none;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .tab-video-img{
          position: absolute;
          bottom: 15 * @toVw;
          width: 24* @toVw;
          right: 15 * @toVw;
        }
        .title{
          text-align: center;
          img{
            width: 80%;
          }
        }
        .cd{
          text-align: center;
          img{
            width: 194 * @toVw;
          }
        }
        .name-block{
          margin-top: 20 * @toVw;
          font-family: PingFang-SC-Regular;
          color: #333333;
          .name{
            height: 25 * @toVw;
            line-height: 25 * @toVw;
            font-size: 16 * @toVw;
          }
          .ahtor{
            font-size: 12 * @toVw;
          }
        }
        .play-block{
          width: 272 * @toVw;
          margin: 20 * @toVw auto auto auto;
          position: relative;
          img{
            width: 272 * @toVw;
          }
          .radius-icon{
            position: absolute;
            width: 13 * @toVw;
            top: 5*@toVw;
            left: 0;
            height: 13 * @toVw;
            background: #80952B ;
            border-radius: 50 * @toVw;
          }
        }
        .btn-block{
          line-height: 100 * @toVw;
          text-align: center;
          img{
            vertical-align: middle;;
            margin-right: 10 * @toVw;
            width: 24 *@toVw;
            &.play{
              width: 36 *@toVw;
            }
            &:last-child{
              margin-right: 0;
            }
          }
        }
      }
      .bottom-block{
        position: fixed;
        width: 100%;
        bottom: 10*@toVw;
        text-align: center;
        img{
          width: 127 * @toVw;
        }
        img:first-child{
          margin-right: 25 * @toVw;
        }
      }
    }
    .show1{
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
      position: relative;
      &>img{
        position: absolute;
        z-index: 2;
        &.haiou{
          top: 390 * @toVw;
          left: 70/ 2 * @toVw;
          width: 81 * @toVw;
        }
        &.riji{
          width:78*@toVw ;
          top: 25 * @toVw;
          left: 0;
        }
        &.yeziyou{
          bottom: 0;
          right: 0;
          width: 258/2*@toVw;
        }
        &.yezizuo{
          width: 238 / 2 *@toVw;
          bottom: 0;
          left: 0;
        }
        &.zhaopianqiang{
          top: 400 * @toVw;
          left: 80/ 2 * @toVw;
          width: 234 / 2  * @toVw;
        }
      }
      .bg-block{
        position: relative;
        width: 344 * @toVw;
        background-size: 100%;
        height: 552 * @toVw;
        .zhuangshi{
          bottom: 0;
        }
      }
      .title-block{
        padding-top: 50 * @toVw;
        text-align: center;
        img{
          width:  420 / 2 * @toVw;
        }
      }
      .textarea{
        background: #FDFDFD;
        height: 352/ 2 * @toVw;
        width: 626/ 2 * @toVw;
        margin:10*@toVw auto 0 auto;
        box-shadow: inset 1/ 2 * @toVw 1/ 2 * @toVw 3/ 2 * @toVw 1/ 2 * @toVw rgba(142,142,142,0.50);
        border-radius: 8/ 2 * @toVw;
        position: relative;
        .text{
          position: absolute;
          top: 5px;
          left: 5px;
          overflow: auto;
          outline: none;
          bottom: 5px;
          right: 5px;
        }
        .btn-block{
          position: absolute;
          bottom: 10/ 2 * @toVw;
          right: 10/ 2 * @toVw;
          img{
            width: 24 * @toVw;
            margin-right: 10/ 2 * @toVw;
          }
        }
      }
      .text-block{
        width: 600/ 2 * @toVw;
        margin: auto;
        padding-top: 20/ 2 * @toVw;
        text-align: left;
        font-family: PingFang-SC-Medium;
        font-size: 28/ 2 * @toVw;
        color: #666666;
        line-height: 40/ 2 * @toVw;
        .text-content{
          font-family: PingFang-SC-Regular;
          font-size: 24/ 2 * @toVw;
          color: #999999;
        }
      }
      .sub-block{
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 160/ 2 * @toVw;
        img{
          width: 88 * @toVw
        }
      }
      .bottom-block{
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 10 * @toVw;
        img{
          width: 127 * @toVw;
          &:first-child{
            margin-right: 15 * @toVw;
          }
        }
      }
    }
    .refueling1{
      background-size: 100% 100%;
      height: 100%;
      .bg-block{
        width: 325 * @toVw;
        height: 520 * @toVw;
        background: white;
        overflow: hidden;
        border-radius: 8 * @toVw;
        padding: 10 * @toVw;
        position: relative;
        top: 10 * @toVw;
        text-align: center;
      }
      .title{
        width: 280 * @toVw ;
      }
      .bottom-block{
        position: fixed;
        bottom: 10 *@toVw;
        width: 100%;
        text-align: center;
        img{
          width: 127 * @toVw;
          &:first-child{
            margin-right: 10*@toVw;
          }
        }
      }
      .content-img{
        position: relative;
        height: 832/ 2 * @toVw;
        background: #333;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 20/ 2 * @toVw;
        border-radius: 8/ 2 * @toVw;
        .radio-icon{
          position: absolute;
          width: 40 * @toVw;
          right: 20/ 2 * @toVw;
          top: 20/ 2 * @toVw;
        }
      }
    }
  }
</style>
