<template>
  <div class="map">
    <img class="background" :src="imgUrl.bg"/>
    <div  v-for="(data,index) in lessonList"  :class="'island-block land20'+(index+1)" :key="index" :id="index === lessonList.length-2? 'nowLesson' :''">
      <div :class="{today:index === lessonList.length-1}" @click="showDia(data)">
        <img :src="imgUrl.day[index]" class="land"/>
        <img :src="imgUrl.shadow" class="shadow"/>
        <div class="star-block">
          <img :src="imgUrl.starDefault" v-if="!starNum(data,2)"/>
          <img :src="imgUrl.star" v-if="starNum(data,2)"/>
          <img :src="imgUrl.starDefault" v-if="!starNum(data,3)"/>
          <img :src="imgUrl.star" v-if="starNum(data,3)"/>
          <img :src="imgUrl.starDefault" v-if="!starNum(data,5)"/>
          <img :src="imgUrl.star" v-if="starNum(data,5)"/>
        </div>
      </div>
    </div>
    <div v-for="i in (20 - lessonList.length) " :class="'island-block land20'+(20-i+1)">
      <img :src="imgUrl.dayDefault[total-i]" class="land"/>
      <img :src="imgUrl.shadow" class="shadow"/>
      <div class="star-block">
        <img :src="imgUrl.starDefault"/>
        <img :src="imgUrl.starDefault"/>
        <img :src="imgUrl.starDefault"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapNumber} from "../../util/imgUrl";
  export default {
    name: "numberMap",
    data(){
      return {
        imgUrl:mapNumber
      }
    },
    props:[
      'total',
      'lessonList',
      'shuoming'
    ],
    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
      },
      showDia(data){
        this.$emit('showDia',data)
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .map{
    padding-bottom: 45 * @toVw;
    .background{
      width: 375*@toVw;
    }
    .go20{
      position: absolute;
      width: 134 * @toVw;
      top: 196 * @toVw;
      left: 42 * @toVw;
    }
    .title-d{
      font-size: 12 * @toVw;
      width:100 * @toVw ;
      height: 30 * @toVw;
      color: #3c2700;
      position: absolute;
      top: 0;
      overflow : hidden;
      text-overflow: ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient: vertical;
      &.title-d-name1{
        top: 525 *@toVw;
        right:40 * @toVw ;
      }
      &.title-d-name6{
        top: 1210 *@toVw;
        left:26 * @toVw ;
      }
      &.title-d-name11{
        top: 1865 *@toVw;
        right:32 * @toVw ;
      }
      &.title-d-name16{
        top: 2598 *@toVw;
        right:39 * @toVw ;
      }
    }
    .island-block{
      position: absolute;
      width: 105*@toVw;
      text-align: center;
      .land{
        width: 70 * @toVw;
        position: relative;
        z-index: 1;
      }
      .shadow{
        width: 100%;
        left: 0;
        bottom: -20 * @toVw;
        z-index: 0;
        position: absolute;

      }
      .star-block{
        position: absolute;
        left: 22*@toVw;
        z-index: 1;
        bottom: -20*@toVw;
        img{
          &:nth-child(2){
            width: 30 * @toVw;
            margin: 0 -5*@toVw;
          }
          width: 20*@toVw;
        }
      }
      .today{
        animation: dodge 1s infinite;
      }
      &.land201{
        top: 287 * @toVw;
        right: 90 * @toVw;
        .land{
          width: 52 * @toVw;
        }
      }
      &.land202{
        top: 407 * @toVw;
        left: 19 * @toVw;
        .land{
          width: 66 * @toVw;
        }
      }
      &.land203{
        top: 564 * @toVw;
        right: 188 * @toVw;
        .land{
          width: 55 * @toVw;
        }
      }
      &.land204{
        top: 666 * @toVw;
        right: 54 * @toVw;
        .land{
          width: 54 * @toVw;
        }
      }
      &.land205{
        top: 775 * @toVw;
        left: 15 * @toVw;
        .land{
          width: 64 * @toVw;
        }
      }
      &.land206{
        top: 910 * @toVw;
        right: 31 * @toVw;
        .land{
          width: 61 * @toVw;
        }
      }
      &.land207{
        top: 993 * @toVw;
        left: 4 * @toVw;
        .land{
          width: 70 * @toVw;
        }
      }
      &.land208{
        top: 1131 * @toVw;
        right: 142 * @toVw;
        .land{
          width: 57 * @toVw;
        }
      }
      &.land209{
        top: 1301 * @toVw;
        right: 61 * @toVw;
        .land{
          width: 56 * @toVw;
        }
      }
      &.land2010{
        top: 1420 * @toVw;
        right: 169 * @toVw;
        .land{
          width: 103 * @toVw;
        }
      }
      &.land2011{
        top: 1602 * @toVw;
        right: 50 * @toVw;
      }
      &.land2012{
        top: 1765 * @toVw;
        left: 48 * @toVw;
      }
      &.land2013{
        top: 1908 * @toVw;
        right: 78 * @toVw;
      }
      &.land2014{
        top: 2095 * @toVw;
        right: 38 * @toVw;
      }
      &.land2015{
        top: 2208 * @toVw;
        left: 46 * @toVw;
      }
      &.land2016{
        top: 2381 * @toVw;
        right: 81 * @toVw;
      }
      &.land2017{
        top: 2549 * @toVw;
        left: 33 * @toVw;
      }
      &.land2018{
        top: 2646 * @toVw;
        right: 69 * @toVw;
      }
      &.land2019{
        top: 2799 * @toVw;
        right: 200 * @toVw;
      }
      &.land2020{
        top: 2959 * @toVw;
        right: 47 * @toVw;
      }
    }
    @keyframes dodge
    {
      0%{
        transform:scale(0.9,0.9)
      }
      50%{
        transform:scale(1.1,1.1)
      }
      100%{
        transform:scale(0.9,0.9)
      }
    }
  }
</style>