<template>
  <div class="basemap-area"  @mouseenter="isBaseExtend = true" @mouseleave="isBaseExtend = false"  :class="{'is-extend':isBaseExtend}">

    <ul class="basemap-list clearfix">
      <li v-for="item in baseMapArr" class="t-4px" :key="item.name" >
        <div class="right-row">
          <!-- <div class="content" :class="{'active':item.name === baseMapName}"> -->
          <div class="content">
            <div class="basemap-bgc" @click="changeMapBaseMap(item.name, item.className)" :class="[item.className]">
              <span class="basemap-name">{{item.title}}</span>
            </div>
          </div>
        </div>

      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "BaseMapArea",
  data() {
    return {
      // baseMapName: 'basemap_dark',
      baseMapArr:[
        {
          name:'basemap_air',
          title:'影像底图',
          className:'air'
        },
        {
          name:'basemap_zw',
          title:'政务底图',
          className:'gov'
        },
        {
          name:'basemap_dark',
          title:'暗色底图',
          className:'dark'
        },
      ],
      isBaseExtend:false,
    }
  },
  methods:{
    changeMapBaseMap(name, className) {
        this.$emit('changeBaseMap',className)
        let y = 0;
        for (let i = 0; y < this.baseMapArr.length; y++) {
          if (this.baseMapArr[i].name === name) this.baseMapArr.push(this.baseMapArr.splice(i, 1)[0]);//循环到是0的位置就删除该元素0并且在arr末尾push进这个元素0，由于splice删除了该位置元素，所以i不用+1，下次循环仍然检查i位置的元素
          else i++;//循环到不是0的位置就继续往后循环
        }
    }
  }

}
</script>

<style scoped lang="scss">
$width:193px;
$height:193px;
$splitWidth:10px;
$borderWidth:0;
$allWidth:$width * 3 +  $borderWidth + $splitWidth * 2;

.basemap-area   {
  position: absolute;
  bottom: 32px;
  right: 30px;
  z-index: 9;
  background: rgba(255,255,255,0);
  transition: width 0.5s;
  width: $width;
  height: $height;
  box-shadow: 0 0 10px rgba(0, 103, 205, 0.2);
  &.has-right {
    right: 870px;
  }

  .basemap-list li{
    width:$width;
    height: $height;
    box-sizing: border-box;

  }

  .right-row{
    position: absolute;
    height: 100%;
    width: 100%;
  }
  &.is-extend{
    // background: rgba(255,255,255,0.1);
    width:$allWidth;
    .basemap-list{
      li{

        &:nth-child(2){
          right:$splitWidth * 1 + $borderWidth + $width;
          opacity: 1;

        }
        &:nth-child(1){
          right: $splitWidth * 2 + $borderWidth + $width + $width;
          opacity: 1;

        }
      }
    }

  }
  .basemap-list{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    .basemap-bgc{
      position: relative;
      width: 100%;
      height: 100%;
      .basemap-name{
        position: absolute;
        bottom: 1px;
        display: block;
        width: calc(100% - 3px);
        margin: 0 1px;
        height: 50px;
        line-height: 50px;
        background-color: rgba($color: #000000, $alpha: 0.5);
        font-size: 28px;
        letter-spacing: 1px;
        color: #fff;
        text-align: center;
      }
      
      &.dark{
        background-image: url("../../assets/imgs/deck/map/as.png");
      }
      &.gov{
        background-image: url("../../assets/imgs/deck/map/zw.png");
      }
      &.air{
        background-image: url("../../assets/imgs/deck/map/hk.png");
      }
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    li {
      .content{
        box-sizing: border-box;
        height: 100%;
        &.active{
          
        }
      }
      cursor: pointer;
      opacity: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      transition: all 0.5s;
      position: absolute;
      right: 0px;
      &:nth-child(2){
        z-index: 2;
        right: $borderWidth;
        opacity: 0;
      }
      &:nth-child(3){
        z-index: 3;
        right: $borderWidth;
        opacity: 1;
      }
      float: left;
    }
  }
}
</style>