<template>
  <div class="map-menu" :style="style">
    <img v-show="$route.name === 'linyiercun'" @click="handleClick" :src="require(`@/assets/images/${cur}.png`)"/>
    <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,
    }
  },
  data() {
    return {
      cur: '2d',
    }
  },
  computed: {
    style() {
      if (this.full) {
        return {
          left: '25.5%',
          bottom: '23%',
        }
      }
      return {
        left: '0',
        bottom: '0',
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('3d')
      this.cur = (this.cur === '2d' ? '3d' : '2d')
    },
  }
}
</script>

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