<template>
  <div>
    <div class="map" v-if="total !== 20 && total !== 0">
      <img class="background" :src="imgUrl.background" v-if="total !== 5"/>
      <img class="background" :src="imgUrl.background5" v-if="total === 5"/>
      <img :src="imgUrl.go" class="go" @click="shuoming = true"/>
      <div v-for="(data,index) in lessonList" :class="'island-block land'+(index+1)" :id="index === lessonList.length-1? 'nowLesson' :''">
        <div :class="{today:index === lessonList.length-1}" @click="showDia(data)">
          <img :src="imgUrl.isLandAct" v-if="index !== lessonList.length-1" class="land"/>
          <img :src="imgUrl.islandNow" v-if="index === lessonList.length-1"  class="land"/>
          <img :src="imgUrl.day[index]" class="day"/>
          <div class="star-block">
            <img :src="imgUrl.starDefault" v-if="!starNum(data,2)"/>
            <img :src="imgUrl.starSelect" v-if="starNum(data,2)"/>
            <img :src="imgUrl.starDefault" v-if="!starNum(data,3)"/>
            <img :src="imgUrl.starSelect" v-if="starNum(data,3)"/>
            <img :src="imgUrl.starDefault" v-if="!starNum(data,4)"/>
            <img :src="imgUrl.starSelect" v-if="starNum(data,4)"/>
          </div>
        </div>
      </div>
      <div v-for="i in (total - lessonList.length) " :class="'island-block land'+(total-i+1)" @click="noLesson()">
        <img :src="imgUrl.islandDefault" class="land"/>
        <img :src="imgUrl.day[total-i]" class="day"/>
        <div class="star-block">
          <img :src="imgUrl.starDefault"/>
          <img :src="imgUrl.starDefault"/>
          <img :src="imgUrl.starDefault"/>
        </div>
      </div>
    </div>
    <div class="map" v-if="total === 20 || total === 0">
      <img class="background" :src="imgUrl.bg20"/>
      <img :src="imgUrl.go20" class="go go20" @click="shuoming = true"/>
      <div class="title title20" v-if="courseList.length > 0" @click="showCourseList">
        {{titleName.category_name}}
        <i class="iconfont icon-xiala"></i>
      </div>
      <div v-for="(data,index) in lessonList" :class="'island-block land20'+(index+1)" :id="index === lessonList.length-1? 'nowLesson' :''">
        <div :class="{today:index === lessonList.length-1}" @click="showDia(data)">
          <img :src="imgUrl.map20Land" v-if="index !== lessonList.length-1" class="land"/>
          <img :src="imgUrl.map20Land" v-if="index === lessonList.length-1"  class="land"/>
          <img :src="imgUrl.day[index]" class="day"/>
          <div class="star-block">
            <img :src="imgUrl.mapBgStarN" v-if="!starNum(data,2)"/>
            <img :src="imgUrl.mapBgStar" v-if="starNum(data,2)"/>
            <img :src="imgUrl.mapBgStarN" v-if="!starNum(data,3)"/>
            <img :src="imgUrl.mapBgStar" v-if="starNum(data,3)"/>
            <img :src="imgUrl.mapBgStarN" v-if="!starNum(data,4)"/>
            <img :src="imgUrl.mapBgStar" v-if="starNum(data,4)"/>
          </div>
        </div>
      </div>
      <div v-for="i in (20 - lessonList.length) " :class="'island-block land20'+(20-i+1)" @click="noLesson()">
        <img :src="imgUrl.map20LandC" class="land"/>
        <img :src="imgUrl.day[total-i]" class="day"/>
        <div class="star-block">
          <img :src="imgUrl.starDefault"/>
          <img :src="imgUrl.starDefault"/>
          <img :src="imgUrl.starDefault"/>
        </div>
      </div>
    </div>
    <img :src="imgUrl.box" class="box-img" @click="teacherQ2 = true"/>
    <bottom-tab/>
    <mt-popup v-model="showLesson">
      <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">
          <span :class="{active:thisLesson.max_age === 3}" @click="chooseAge(3)">0-3岁</span>
          <span :class="{active:thisLesson.max_age === 6}" @click="chooseAge(6)">4-6岁</span>
        </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 class="disable-block" v-if="!thisLesson.watch_list.find(i=>{return i.page_id === 1})">
              <img :src="imgUrl.clock"/>
            </div>
          </div>
          <div class="img-block">
            <img :src="imgUrl.show" class="show list" @click="goToLesson('3')"/>
            <div class="disable-block" v-if="!thisLesson.watch_list.find(i=>{return i.page_id === 2})">
              <img :src="imgUrl.clock"/>
            </div>
          </div>
          <div class="img-block">
            <img :src="imgUrl.jiayou" class="jiayou list" @click="goToLesson('4')"/>
            <div class="disable-block" v-if="!thisLesson.watch_list.find(i=>{return i.page_id === 4})">
              <img :src="imgUrl.clock"/>
            </div>
          </div>
        </div>
      </div>
    </mt-popup>
    <mt-popup v-model="shuoming">
      <div class="shuoming-block" :style="{backgroundImage:`url(${imgUrl.smBg})`}">
        <img :src="imgUrl.close" class="close" @click="shuoming = 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">
      <div class="choose-block">
        <mt-picker :slots="[{values:courseList,defaultIndex:courseList.indexOf(lesson)}]"  value-key="category_name" @change="onValuesChange"></mt-picker>
        <mt-button type="primary" size="large" plain @click="subLesson">确定</mt-button>
      </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 { 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:0,
        teacherDetail:null,
        showChoose:false,
        showLesson:false,
        shuoming:false,
        thisLesson:null
      }
    },
    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
    },
    mounted(){
      this.initPage()
    },
    methods:{
      starNum(data,page_id){
        let ret = false;
        data.ele_list.forEach(i=>{
          if(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
          });

        console.log(thisLesson)
        if(!!thisLesson){
          this.thisLesson = thisLesson
        }else{
          MessageBox('错误', '暂无课程');
        }
      },
      subLesson(){
        this.$router.push({name:'map',query:{periods_id:this.periods_id,parent_category_id:this.lesson.category_id,course_type:this.$route.query.course_type}});
        this.parent_category_id = this.lesson.category_id;
        this.showChoose = false;
        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(res.list && res.list.length > 0){
              this.$nextTick(function(){
                document.getElementById('nowLesson').scrollIntoView({behavior:'smooth',start:'center'})
              })
            }
          });
        }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
      },
      goToLesson(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;
      span{
        display: inline-block;
        width: 145.5*@toVw;
        float: left;
        &.active{
          background: white;
          color: #666;
        }
        &:nth-child(1){
          border-right:  1*@toVw solid #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;

  }
  .map{
    .background{
      width: 375*@toVw;
    }
    .go{
      position: absolute;
      top: 154*@toVw;
      left: 31*@toVw;
      width: 195*@toVw;
      &.go20{
        width: 134 * @toVw;
        top: 196 * @toVw;
        left: 42 * @toVw;
      }
    }
    .island-block{
      position: absolute;
      width: 105*@toVw;
      .land{
        width: 100%;
      }
      .day{
        position: absolute;
        width: 45*@toVw;
        bottom: 14*@toVw;
        left: 76*@toVw;
      }
      .star-block{
        position: absolute;
        left: 22*@toVw;
        bottom: -3*@toVw;
        img{
          width: 20*@toVw;
        }
      }
      .today{
        animation: dodge 1.5s infinite;
      }
      &.land201{
        top: 287 * @toVw;
        right: 39 * @toVw;
      }
      &.land202{
        top: 407 * @toVw;
        left: 39 * @toVw;
      }
      &.land203{
        top: 564 * @toVw;
        right: 158 * @toVw;
      }
      &.land204{
        top: 666 * @toVw;
        right: 24 * @toVw;
      }
      &.land205{
        top: 775 * @toVw;
        left: 35 * @toVw;
      }
      &.land206{
        top: 910 * @toVw;
        right: 11 * @toVw;
      }
      &.land207{
        top: 993 * @toVw;
        left: 24 * @toVw;
      }
      &.land208{
        top: 1131 * @toVw;
        right: 112 * @toVw;
      }
      &.land209{
        top: 1301 * @toVw;
        right: 24 * @toVw;
      }
      &.land2010{
        top: 1420 * @toVw;
        right: 169 * @toVw;
      }
      &.land2011{
        top: 1602 * @toVw;
        right: 50 * @toVw;
      }
      &.land2012{
        top: 1765 * @toVw;
        left: 48 * @toVw;
      }
      &.land2013{
        top: 1908 * @toVw;
        right: 68 * @toVw;
      }
      &.land2014{
        top: 2095 * @toVw;
        right: 38 * @toVw;
      }
      &.land2015{
        top: 2208 * @toVw;
        left: 46 * @toVw;
      }
      &.land2016{
        top: 2381 * @toVw;
        right: 71 * @toVw;
      }
      &.land2017{
        top: 2549 * @toVw;
        left: 33 * @toVw;
      }
      &.land2018{
        top: 2646 * @toVw;
        right: 49 * @toVw;
      }
      &.land2019{
        top: 2799 * @toVw;
        right: 200 * @toVw;
      }
      &.land2020{
        top: 2959 * @toVw;
        right: 47 * @toVw;
      }
      &.land1{
        top: 215*@toVw;
        right: 48*@toVw;
      }
      &.land2{
        top: 343*@toVw;
        left: 39*@toVw;
      }
      &.land3{
        top: 500*@toVw;
        left: 105*@toVw;
      }
      &.land4{
        top: 602*@toVw;
        right: 32*@toVw;
      }
      &.land5{
        top: 710*@toVw;
        left: 35*@toVw;
      }
      &.land6{
        top: 846*@toVw;
        right: 18*@toVw;
      }
      &.land7{
        top: 929*@toVw;
        left: 24*@toVw;
      }
      &.land8{
        top: 1064*@toVw;
        right: 151*@toVw;
      }
      &.land9{
        top: 1237*@toVw;
        right: 32*@toVw;
      }
      &.land10{
        top: 1356*@toVw;
        left: 93*@toVw;
      }
    }
    @keyframes dodge
    {
      0%{
        transform:scale(0.95,0.95)
      }
      50%{
        transform:scale(1.05,1.05)
      }
      100%{
        transform:scale(0.95,0.95)
      }
    }
  }
  .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;
    padding: 10 * @toVw;
  }
</style>