<template>
  <div class="map">
    <img class="background" :src="imgUrl.bg20"/>
    <img :src="imgUrl.go20" class="go go20" @click="shuoming.show = true"/>
    <div v-for="(data,index) in lessonList" :class="'title-d title-d-name'+ (index+1)" v-if="index === 0 ||index === 5 ||index === 10 ||index === 15"> {{data.title}}</div>
    <div
      v-for="(data,index) in lessonList"
      :class="'island-block land20'+(index+1)"
      :id="index === lessonList.length-2? '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.day20[index]" class="day day20"/>
        <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,5)"/>
          <img :src="imgUrl.mapBgStar" v-if="starNum(data,5)"/>
        </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.day20[total-i]" class="day day20"/>
      <div class="star-block">
        <img :src="imgUrl.starDefault"/>
        <img :src="imgUrl.starDefault"/>
        <img :src="imgUrl.starDefault"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapDefault} from "../../util/imgUrl";
  export default {
    name: "mapDefault",
    data(){
      return {
        imgUrl:mapDefault
      }
    },
    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;
      .land{
        width: 100%;
      }
      .title{

      }
      .day{
        position: absolute;
        width: 45*@toVw;
        bottom: 14*@toVw;
        left: 76*@toVw;
        &.day20{
          width: 45 * @toVw;
          left: 60 * @toVw;
        }
      }
      .star-block{
        position: absolute;
        left: 22*@toVw;
        bottom: -3*@toVw;
        img{
          width: 20*@toVw;
        }
      }
      .today{
        animation: dodge 1s 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: 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>