<template>
  <div class="map-menu" :style="style">
    <img @click="$emit('switch')" src="@/assets/images/switch.png"/>
    <img @click="$emit('in')" src="@/assets/images/zoomin.png"/>
    <img @click="$emit('out')" src="@/assets/images/zoomout.png"/>
    <img @click="$emit('full')" src="@/assets/images/full.png"/>
  </div>
</template>

<script>
export default {
  name: 'MapMenu',
  props: {
    full: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    style() {
      if (this.full) {
        return {
          left: '25%',
          bottom: '22%',
        }
      }
      return {
        left: '0',
        bottom: '0',
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.map-menu
  position fixed
  display flex
  flex-direction column
  z-index 1000
  transition all .5s
  img
    width 2.4rem
    height @width
    margin-bottom 0.3rem
    cursor pointer
    transition transform .3s
    &:first-child
      width 1.4rem
      height @width
      margin 0 0 .8rem .5rem
    &:hover
      transform scale(1.5)
</style>
