<template>
  <div id="mapType-wrapper" @mouseover="hoverMargin=91" @mouseleave="hoverMargin=5">
    <div id="mapType">
      <div v-for='(mapType,index) in mapTypeList' class="mapTypeCard" @click="changeMapType(mapType.id)"
           :id="mapType.id"
           :style="{background:'url(./img/mapType/'+mapType.layer.icon1+'.png)',right:index *hoverMargin+5+'px'}">
        <span>{{mapType.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import eventHelper from './utils/eventHelper';

  export default {
    name: 'map-type',
    data: function () {
      return {
        isExpand: false,
        indexId: 1,
        hoverMargin: 5,
        mapTypeList: [
          {
            layer: {icon1: 'TDT'}
          }
        ]
      }
    },
    methods: {
      changeMapType: function (mapType) {
        this.$parent.changeBaseMap(mapType);
        this.indexId = mapType.id;
        $(this).addClass("active").siblings().removeClass("active");
        if (!!this.closeTimmer) {
          clearTimeout(this.closeTimmer)
        }
        this.closeTimmer = setTimeout(function () {
          $("#mapType-wrapper").removeClass("expand");
          this.hoverMargin = 5
        }.bind(this), 5000)//5秒后自动关闭，应对移动端
      },
      toggleClass: function (status) {
        this.isExpand = status;
      },
      highLight: function (item, index) {
        this.$parent.changeBaseMap(item.id);
        this.indexId = item.id;
      }
    },
    mounted: function () {
      var currentAction = '';
      var self = this;
      this.$on('init-map-type', function (mapConfigHelper) {
        this.mapTypeList = mapConfigHelper.getBaseMapConfig();
        this.$nextTick(function () {
          $("#mapType-wrapper").hover(
            function () {
              $("#mapType-wrapper").addClass("expand");
            },
            function () {
              $("#mapType-wrapper").removeClass("expand");
            }
          );
          if (this.mapTypeList.length == 1) {
            $('.mapTypeCard').addClass('active')
          } else {
            var displayIndex = '.mapTypeCard:eq(' + 0 + ')';
            $(displayIndex).addClass('active');
          }
          this.$parent.changeBaseMap(this.mapTypeList[0].id);//默认选取第一张作为地图
        }.bind(this))
      }.bind(this));
    },
  }
</script>

<style>
  /*地图类型框*/
  #mapType {
    position: absolute;
    bottom: 10px;
    right: 5px;
    height: 80px;
    width: 120px;
    background: rgba(255, 255, 255, 0);
    z-index: 3;
    transition-duration: .4s;
    cursor: pointer;
  }

  #mapType .active {
    z-index: 9 !important;
  }

  #mapType .mapTypeCard {
    height: 60px;
    width: 86px;
    position: absolute;
    border-radius: 2px;
    top: 10px;
    right: 15px;
    box-sizing: border-box;
    border: 1px solid rgba(153, 153, 153, .42);
    background: url(./assets/mapType/shadow.png) no-repeat 0 0;
    transition-duration: .4s;
  }

  #mapType .normal {
    z-index: 0;
    background-position: 0 0;
    right: 25px;
  }

  #mapType .earth {
    z-index: 1;
    background: url("./assets/mapType/maptype.png");
    background-position: 0 -181px;
    border-left: 1px solid rgba(153, 153, 153, 1);
  }

  #mapType .mapTypeCard.active span, #mapType .mapTypeCard:hover span {
    background-color: #3385ff;
  }

  #mapType .mapTypeCard span {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    padding: 3px 3px 2px 4px;
    font-size: 12px;
    height: 16px;
    line-height: 12px;
    color: #fff;
    border-top-left-radius: 2px;
  }

  .expand #mapType {
    width: 202px;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .expand #mapType .mapTypeCard.active {
    border: 1px solid #3385ff;
  }

  .expand #mapType .normal {
    right: 106px;
  }

  .expand #mapType .mapTypeCard {
    background-image: url("./assets/mapType/maptype.png");
  }
</style>
