<template>
  <div>
    <div class="map">
      <img class="background" :src="imgUrl.background"/>
      <img :src="imgUrl.go" class="go"/>
      <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-2? '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"/>
            <img :src="imgUrl.starDefault"/>
            <img :src="imgUrl.starDefault"/>
          </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"/>
    <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">
          <img :src="imgUrl.look" class="look" @click="goToLesson('look1')"/>
          <img :src="imgUrl.play" class="play" @click="goToLesson('play1')"/>
          <img :src="imgUrl.show" class="show"/>
          <img :src="imgUrl.jiayou" class="jiayou"/>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import {mapImage} from "../util/imgUrl";
  import  {getLessonListApi,getCourseListApi} from "../service/api";
  import bottomTab from './public/bottomTab'
  export default {
    data(){
      return {
        periods_id:this.$route.query.periods_id,
        parent_category_id:this.$route.query.parent_category_id,
        imgUrl:mapImage,
        lessonList:[],
        courseList:[],
        showLesson:false,
        thisLesson:null
      }
    },
    computed:{
      titleName(){
        return this.courseList.find(i=>{
          return i.id===Number(this.parent_category_id)
        })
      }
    },
    components:{
      bottomTab
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getLessonListApi(this.periods_id,{category_id:Number(this.parent_category_id)}).then(res=>{
          this.lessonList = res.list;
          this.$nextTick(function(){
            document.getElementById('nowLesson').scrollIntoView()
          })
        });
        getCourseListApi(this.periods_id).then(res=>{
          this.courseList = res
        })
      },
      showDia(data){
        this.thisLesson = data;
        this.showLesson = true
      },
      showCourseList(){

      },
      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{
        width: 100%;
        margin-bottom: 3*@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)
      }
    }
  }

</style>
