<template>
  <div class="map">
    <img class="background" :src="imgUrl.background" v-if="total !== 5 && total !== 7 "/>
    <img class="background" :src="imgUrl.background5" v-if="total === 5"/>
    <img class="background" :src="imgUrl.background7" v-if="total === 7"/>
    <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>
</template>

<script>
  import {mapOnce} from "../../util/imgUrl";
  export default {
    name: "once",
    props:[
      'total',
      'lessonList'
    ],
    data(){
      return {
        imgUrl:mapOnce
      }
    },
    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;
    }
    .go{
      position: absolute;
      top: 154*@toVw;
      left: 31*@toVw;
      width: 195*@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;
      }
      .star-block{
        position: absolute;
        left: 22*@toVw;
        bottom: -3*@toVw;
        img{
          width: 20*@toVw;
        }
      }
      .today{
        animation: dodge 1s 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.9,0.9)
      }
      50%{
        transform:scale(1.1,1.1)
      }
      100%{
        transform:scale(0.9,0.9)
      }
    }
  }
</style>
