<template>
  <div class="map-btns" :class="{isFull: value}">
    <img
      v-for="btn in btns"
      :key="btn.name"
      @click="$emit(btn.name, btn.name == 'input' ? !value : null)"
      :src="require(`@/assets/images/${btn.img}`)" />
  </div>
</template>

<script>
export default {
  name: 'MapBtns',
  props: {
    value: {
      type: Boolean,
    }
  },
  data() {
    return {
      btns: [
        {name: 'info', img: 'map1.png'},
        {name: 'zoomin', img: 'map2.png'},
        {name: 'zoomout', img: 'map3.png'},
        {name: 'input', img: 'map4.png'},
        {name: 'sensor', img: 'map5.png'},
        {name: 'position', img: 'map6.png'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.map-btns
  position fixed
  left calc(33.3% + .05rem)
  bottom .1rem
  transition left .5s ease-in-out
  &.isFull
    left .05rem
  img
    display block
    width .2rem
    height @width
    margin-top .03rem
    cursor pointer
    transition transform .3s ease-in-out
    &:hover
      transform scale(1.25)
</style>
