<template>
  <div>
    <div class="map" v-if="total !== 20 && total !== 0 && total !== null">
      <once-map :total="total" :lessonList="lessonList" :shuoming="shuoming" @showDia="showDia"/>
    </div>
    <div v-if="total === 0" style="margin: 100px 0;text-align: center;font-size: 28px;">
      尚未开课
    </div>
    <div v-if="total === null" style="margin: 100px 0;text-align: center;font-size: 28px;color: #888">
      请等待...
    </div>
    <div class="title title20" v-if="courseList.length > 0" @click="showCourseList">
      {{titleName.category_name}}
      <i class="iconfont icon-xiala"></i>
    </div>
    <div class="map" v-if="total === 20">
      <div v-if="!titleName || titleName.category_name !== '数字'">
        <map-default :total="total" :lessonList="lessonList" :shuoming="shuoming"  @showDia="showDia"/>
      </div>
      <div v-if="titleName && titleName.category_name === '数字'">
        <number-map :total="total" :lessonList="lessonList" :shuoming="shuoming"  @showDia="showDia"/>
      </div>
    </div>
    <bottom-tab/>
    <mt-popup v-model="showLesson" style="background:transparent ">
      <div class="lesson-block">
        <img :src="imgUrl.lessonBg" class="lesson-bg"/>
        <img :src="imgUrl.close" class="close" @click="showLesson = false"/>
        <div class="age-choose" v-if="thisLessonBox && thisLessonBox.ele_list.length > 1">
          <div :class="{active:thisLesson.max_age === 3}" @click="chooseAge(3)">0-3岁</div>
          <div :class="{active:thisLesson.max_age === 6}" @click="chooseAge(6)">4-6岁</div>
        </div>
        <div class="list-block" v-if="thisLesson">
          <div class="img-block">
            <img :src="imgUrl.look" class="look list" @click="goToLesson('1')"/>
          </div>
          <div class="img-block" v-if="thisLesson">
            <img :src="imgUrl.play" class="play list" @click="goToLesson('2')"/>
          </div>
          <div class="img-block">
            <img :src="imgUrl.show" class="show list" @click="goToLesson('3')"/>
          </div>
          <div class="img-block">
            <img :src="imgUrl.jiayou" class="jiayou list" @click="goToLesson('4')"/>
          </div>
        </div>
      </div>
    </mt-popup >
    <mt-popup v-model="shuoming.show" style="background:transparent ">
      <div class="shuoming-block" :style="{backgroundImage:`url(${imgUrl.smBg})`}">
        <img :src="imgUrl.close" class="close" @click="shuoming.show = false"/>
        <div class="content">
          <h1>课程介绍：</h1>
          欢迎各位来到唱唱英语训练营，我们在每一天的课程中都准备了精彩的英语学习、唱动体验内容等着您哦，通过每日坚持学习与分享打卡收集星星，更可以在课程全部完成后用星星兑换神秘奖品哦！快来带着宝贝一起愉快的在玩耍中学习英语吧！
          <h1 class="se">规则介绍：</h1>
          1.地图中每一个浮动标志物（岛屿、树屋、房屋等）都对应着当天进行中的课程。
          <br>
          2.地图中显示灰色的课程是因课程还未开放，请耐心等待，我们会根据课程进度依次开放。
          <br>
          3.每一天的课程最多可以收集3颗星星。
          <br>
          4.完成一天的课程（即爸妈看一看和宝贝玩一玩单元）就可获得一颗星星。
          <br>
          5.填写每日宝贝成长秀并且提交后可获得一颗星星。
          <br>
          6.完成今日所有课程返回列表后获得最后一颗星星。
          <br>
          7.完成地图中所有课程内容并且集齐所有星星后，请联系您的私人老师兑换什么奖品哦！
        </div>
      </div>
    </mt-popup>
    <mt-popup v-model="showChoose" :modal="true" style="background:transparent " :closeOnClickModal="false">
      <div class="choose-block" :style="{backgroundImage: `url(${imgUrl.titleListBg})`}">
        <img :src="imgUrl.close2" class="close" @click="closeChoose"/>
        <div class="choose-content">
          <div class="choose-list" v-for="data in courseList">
            <span @click="subLesson(data)">{{data.category_name}}</span>
          </div>
        </div>
      </div>
    </mt-popup>
    <mt-popup v-model="teacherQ2">
      <div class="teacher-block">
        <img :src="imgUrl2.teacherBg" class="teacher-bg"/>
        <img :src="teacherDetail.qr" class="qr" v-if="teacherDetail">
        <div class="content-text">
          <div class="title-text">
            请长按识别图中二维码添加老师
          </div>
          并截图发送领取神秘礼品哦
        </div>
        <div class="closeBtn" @click="teacherQ2 = false"></div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import {mapImage,IndexImage} from "../../util/imgUrl";
  import  {getLessonListApi,getCourseListApi,getTeacherApi} from "../../service/api";
  import bottomTab from '../public/bottomTab'
  import onceMap from './once'
  import mapDefault from './mapDefault'
  import numberMap from './numberMap'
  import { Toast,MessageBox  } from 'mint-ui'
  export default {
    data(){
      return {
        periods_id:this.$route.query.periods_id,
        teacherQ2:false,
        parent_category_id:Number(this.$route.query.parent_category_id),
        imgUrl:mapImage,
        imgUrl2:IndexImage,
        lessonList:[],
        courseList:[],
        lesson:{},
        thisLessonBox:false,
        total:null,
        teacherDetail:null,
        showChoose:false,
        showLesson:false,
        shuoming:{
          show:false
        },
        thisLesson:false
      }
    },
    computed:{
      titleName(){
        let lesson = this.courseList.find(i=>{
          return i.category_id===Number(this.parent_category_id)
        });
        this.lesson =lesson;
        return lesson
      },
      indexOfLesson(){
        return this.courseList.findIndex(i=>i.category_id===Number(this.parent_category_id))
      },
    },
    components:{
      bottomTab,
      onceMap,
      mapDefault,
      numberMap
    },
    mounted(){
      this.initPage()
    },
    methods:{
      starNum(data,page_id){
        let ret = false;
        data.ele_list.forEach(i=>{
          if(i.watch_list && i.watch_list.find(i=>{return i.page_id === page_id })){
            ret = true
          }
        });
        return ret
      },
      chooseAge(a){
        let thisLesson = this.thisLessonBox.ele_list.find(i=>{
          return i.max_age === a
        });
        if(!!thisLesson){
          this.thisLesson = thisLesson
        }else{
          MessageBox('错误', '暂无课程');
        }
      },
      subLesson(data){
        this.$router.push({name:'map',query:{periods_id:this.periods_id,parent_category_id:data.category_id,course_type:this.$route.query.course_type}});
        this.parent_category_id = data.category_id;
        this.showChoose = false;
        document.getElementsByClassName('child-view')[0].style.cssText = '-webkit-overflow-scrolling:touch;';
        this.$nextTick(()=>{
          this.initPage()
        });
      },
      onValuesChange(a,b){
        this.lesson = b[0]
      },
      initPage(){
        if(this.$route.query.course_type == 0){
          getCourseListApi(this.periods_id).then(res=>{
            this.courseList = res;
          });
        }
        if(this.parent_category_id){
          getLessonListApi(this.periods_id,{category_id:this.parent_category_id}).then(res=>{
            this.lessonList = res.list;
            this.total = res.periods_info.current_watch_num || 0;
            if(this.$route.query.category_id){
              let lesson = this.lessonList.find(i=>{
                return i.category_id==this.$route.query.category_id
              });
              this.showDia(lesson)
            }else{
              if(res.list && res.list.length > 0){
                this.$nextTick(function(){
                  document.getElementById('nowLesson').scrollIntoView({behavior:'smooth',start:'center',block: "end"})
                })
              }
            }
          });
        }else{

        }
        getTeacherApi().then(res=>{
          this.teacherDetail = res;
        })
      },
      noLesson(){
        Toast('课程尚未开始')
      },
      showDia(data){
        this.thisLesson = data.ele_list[0];
        this.thisLessonBox = data;
        this.showLesson = true
      },
      showCourseList(){
        this.showChoose = true;
        document.getElementsByClassName('child-view')[0].style.overflow = 'hidden'
      },
      closeChoose(){
        this.showChoose = false;
        document.getElementsByClassName('child-view')[0].style.cssText = '-webkit-overflow-scrolling:touch;';
      },
      goToLesson(type){
        let typeOption = {
          1:'爸妈看一看',
          2:'宝贝玩一玩',
          3:'宝贝成长秀',
          4:'多元趣味课',
        };
        window._hmt.push(['_trackEvent', '进入课程',typeOption[type],]);//百度统计
        let query = {
          periods_id:this.thisLessonBox.periods_id,
          category_id:this.thisLessonBox.category_id,
          parent_category_id:this.parent_category_id,
          element_id:this.thisLesson.id,
          course_type:this.$route.query.course_type,
          type:type
        };
        this.$router.push({name:'lesson',query:query})
      }
    }
  }
</script>
<style scoped lang="less">
  @import "../../util/public";
  .box-img{
    position: fixed;
    left: 14*@toVw;
    bottom: 60*@toVw;
    width: 70*@toVw;
  }
  .lesson-block{
    position: relative;
    background: rgba(0,0,0,0.5);
    width: 308*@toVw;
    height: 364*@toVw;
    .lesson-bg{
      width: 308*@toVw;
      height: 364*@toVw;
      position: relative;
    }
    .close{
      top: 10*@toVw;
      position: absolute;
      right: 10*@toVw;
      width: 16*@toVw;
    }
    .age-choose{
      position: absolute;
      width: 292*@toVw;
      border-radius: 8 * @toVw;
      top: 43 * @toVw;
      height: 30 * @toVw;
      line-height: 30 * @toVw;
      text-align: center;
      background: #666;
      color: white;
      left: 50%;
      margin-left: -146*@toVw;
      overflow: hidden;
      div{
        display: inline-block;
        width: 50%;
        float: left;
        &.active{
          background: white;
          color: #666;
        }
      }
    }
    .list-block{
      width: 276*@toVw;
      height: 264*@toVw;
      border-radius: 8px;
      position: absolute;
      top: 76*@toVw;
      background: white;
      left: 50%;
      margin-left: -146*@toVw;
      padding: 8*@toVw;
      .img-block{
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        .disable-block{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 7px;
          border-radius: 8px;
          text-align: center;
          background-color: rgba(0,0,0,0.3);
          img{
            width: 25 * @toVw;
            margin-top: 15 * @toVw;
          }
        }
        .list{
          width: 100%;
          margin-bottom: 3*@toVw;
        }
      }
    }

  }

  .teacher-block{
    position: relative;
    width: 74.66666667vw;
    background-color: rgba(0,0,0,0.7);
    .teacher-bg{
      width: 280*@toVw;
    }
    .qr{
      width: 138*@toVw;
      height: 138*@toVw;
      position: absolute;
      top:65 * @toVw;
      left: 70 * @toVw;
    }
    .content-text{
      width: 100%;
      text-align: center;
      position: absolute;
      top: 315 * @toVw;
      font-size:12 * @toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
      line-height:23px;
      .title-text{
        color: #333;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        margin-bottom: 5 * @toVw;
        font-size: 17*@toVw;
      }
    }
    .closeBtn{
      position: absolute;
      width: 30*@toVw;
      height: 30*@toVw;
      right: 8*@toVw;
      top: 8*@toVw;
    }
  }
  .title{
    position: absolute;
    width: 120px;
    background: #654B17;
    font-size:13px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    left: 50%;
    margin-left: -70px;
    top: 146*@toVw;
    text-align: center;
    padding: 3px 0 3px 10px ;
    border-radius: 5px;

  }
  .shuoming-block{
    width: 308 * @toVw;
    height: 435 *@toVw;
    background-size: 100% 100%;
    border-radius: 8px;
    position: relative;
    .close{
      position: absolute;
      top: 10 * @toVw;
      right: 10 * @toVw;
      width: 16 * @toVw;
    }
    .content{
      background: white;
      width: 262 * @toVw;
      height: 313 * @toVw;
      border-radius: 8px;
      border: 1px solid #333;
      line-height: 1.6em;
      font-size: 12px;
      position: relative;
      top: 77 * @toVw;
      color: #333;
      padding: 15*@toVw;
      overflow: auto;
      h1{
        font-size: 16px;
        margin-bottom: 5px;
        &.se{
          margin-top: 10px;
        }
      }
    }
  }
  .choose-block{
    width: 300 * @toVw;
    position: relative;
    height: 203 * @toVw;
    padding: 10*@toVw 0;
    text-align: center;
    font-size: 14 * @toVw;
    background-size: 100% 100%;
    .choose-content{
      width: 248 * @toVw;
      position: relative;
      top: 20 * @toVw;
      line-height: 34 * @toVw;
      padding: 10 * @toVw;
      height: 126 * @toVw;
      border-radius: 4 * @toVw;
      background: white;
      margin-bottom: 30 * @toVw;
      overflow: auto;
    }
    .close{
      position: absolute;
      top: 5 * @toVw;
      right: 5 * @toVw;
      width: 20 * @toVw;
    }
    .sureBtn{
      width: 268px;
    }
  }
</style>