<template>
  <div :class="[{ 'expend-only': expend }, 'screen-map-server',toolBarStore.expand ? 'expand' : '']" @mouseenter="moveEnter" @mouseleave="moveLeave">

    <img alt="ICON_MAP" class="icon-cover" :src="getAssetsFile(`icon-${active}-active.png`)">

    <div v-for="(item, index) in list" class="screen-map-server-item" :key="index" :style="getStyle(item, index)"
      @click="toggle(item, index)">

      <img v-show="(!expend && !index) || expend" alt="ICON_MAP" class="icon-map"
        :src="getAssetsFile(`icon-${item.prop}${item.prop == active ? '-active' : ''}.png`)">

    </div>

  </div>

</template>

<script setup>
import { ref } from 'vue'
import { getAssetsFile } from '@/utils/common'
import useToolBarStore from '@/store/modules/toolbar'

const toolBarStore = useToolBarStore()
const emit = defineEmits([ 'toggle' ])

const active = ref('satellite')
const expend = ref(false)

const list = [
  {
    label: '遥感',
    prop: 'satellite'
  },
  {
    label: '海图',
    prop: 'sea'
  },
  {
    label: '浅色',
    prop: 'light'
  }
]

/**
 * 动态改变当前图例的定位
 * @param e 当前图例信息
 * @param index 当前图例下标
 */
const getStyle = (e, index) => ({
  'background-color': !expend.value && e.color ? e.color : 'transparent', // 未展开样式
  'border-radius': expend.value ? '0px' : '5px', // 未展开样式
  right: expend.value ? `${index * 40 + (index + 1) * 4}px` : `${(index + 1) * 4}px`,
  'transition-duration': expend.value ? `${index * 0.2}s` : '0s',
  'z-index': e.index
})

const moveEnter = () => {
  expend.value = true
}

const moveLeave = () => {
  expend.value = false
}

/**
 * 底图切换
 * @param e 当前图例信息
 */
const toggle = (e) => {
  active.value = e.prop
  emit('toggle', 'toggle-base', e.prop)
}
</script>

<style scoped lang="scss">
.screen-map-server {
  position: absolute;
  right: 30px;
  bottom: 112px;
  width: 48px;
  height: 48px;
  padding: 4px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: transparent;
  transition-duration: .3s;
  cursor: pointer;
  pointer-events: auto;

  &.expend-only {
    height: 48px;
    width: 135px;
  }

  &:hover {
    background-color: rgba(77, 151, 255, 0.5);

    .icon-cover {
      display: none;
    }
  }

  /* COVER */
  .icon-cover {
    display: block;
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 9;
  }

  /* ITEM */
  .screen-map-server-item {
    border-radius: 0;
    height: 40px;
    position: absolute;
    top: 4px;
    width: 40px;
    z-index: 1;

    .icon-map {
      height: 100%;
      width: 100%;
    }
  }
}
.expand{
  right: 390px;
}
</style>
