<template>
  <div>
    <div class="map">
      <img class="background" :src="imgUrl.background"/>
      <img :src="imgUrl.go" class="go" @click="shuoming = true"/>
      <div class="title" 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 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="!data.watch_list.find(i=>{return i.page_id === 1})"/>
            <img :src="imgUrl.starSelect" v-if="data.watch_list.find(i=>{return i.page_id === 1})"/>
            <img :src="imgUrl.starDefault" v-if="!data.watch_list.find(i=>{return i.page_id === 2})"/>
            <img :src="imgUrl.starSelect" v-if="data.watch_list.find(i=>{return i.page_id === 2})"/>
            <img :src="imgUrl.starDefault" v-if="!data.watch_list.find(i=>{return i.page_id === 4})"/>
            <img :src="imgUrl.starSelect" v-if="data.watch_list.find(i=>{return i.page_id === 4})"/>
          </div>
        </div>
      </div>
      <div v-for="i in (10 - lessonList.length) " :class="'island-block land'+(10-i+1)">
        <img :src="imgUrl.islandDefault" class="land"/>
        <img :src="imgUrl.day[10-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="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 === 2})">
              <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 === 3})">
              <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.填写每日宝贝成长秀并且提交后可获得一颗星星。 6.完成填写后根据页面提示分享打卡海报可获得一颗星星。
          <br>
          7.完成地图中所有课程内容并且集齐所有星星后，请联系您的私人老师兑换什么奖品哦！
        </div>
      </div>
    </mt-popup>
    <mt-popup v-model="showChoose">
      <div class="choose-block">
        <mt-picker :slots="[{values:courseList,defaultIndex:indexOfLesson}]" 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'
  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:{},
        teacherDetail:null,
        showChoose:false,
        showLesson:false,
        shuoming:false,
        thisLesson:null
      }
    },
    computed:{
      titleName(){
        let lesson = this.courseList.find(i=>{
          return i.id===Number(this.parent_category_id)
        });
        this.lesson =lesson;
        return lesson
      },
      indexOfLesson(){
        return this.courseList.findIndex(i=>i.id===Number(this.parent_category_id))
      }
    },
    components:{
      bottomTab
    },
    mounted(){
      this.initPage()
    },
    methods:{
      subLesson(){
        this.$router.push({name:'map',query:{periods_id:this.periods_id,parent_category_id:this.lesson.id}});
        this.parent_category_id = this.lesson.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
        });
        }
        getLessonListApi(this.periods_id,{category_id:this.parent_category_id}).then(res=>{
          this.lessonList = res.list;
          if(res.list && res.list.length > 0){
            this.$nextTick(function(){
              document.getElementById('nowLesson').scrollIntoView({behavior:'smooth',start:'center'})
            })
          }
        });
        getTeacherApi().then(res=>{
          this.teacherDetail = res;
        })
      },
      showDia(data){
        this.thisLesson = data;
        this.showLesson = true
      },
      showCourseList(){
        this.showChoose = true
      },
      goToLesson(type){
        let query = {
          periods_id:this.thisLesson.periods_id,
          category_id:this.thisLesson.category_id,
          parent_category_id:this.parent_category_id,
          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;
    }
    .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: 80px;
    background: #654B17;
    font-size:13px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    left: 50%;
    margin-left: -45px;
    top: 116*@toVw;
    text-align: center;
    padding: 3px 0 3px 10px ;
    border-radius: 5px;
  }
  .map{
    position: relative;
    .background{
      width: 375*@toVw;
    }
    .go{
      position: absolute;
      top: 154*@toVw;
      left: 31*@toVw;
      width: 195*@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;
      }
      &.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>