<template>
  <div class="map-btns" :class="{ isFull: fullScreen }">
    <img
      v-for="btn in btns"
      v-show="!btn.hidden"
      :key="btn.key"
      :src="btn.icon"
      @click="onClick(btn.key)"
    />
  </div>
</template>

<script lang="ts" setup>
import btn1 from '@/assets/images/btn1.png'
import btn2 from '@/assets/images/btn2.png'
import btn3 from '@/assets/images/btn3.png'
import btn4 from '@/assets/images/btn4.png'
import btn5 from '@/assets/images/btn5.png'
import btn6 from '@/assets/images/btn6.png'
import btn7 from '@/assets/images/btn7.png'
import { computed, PropType } from 'vue'

const props = defineProps({
  isDefaultScreen: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
  fullScreen: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
})
const emit = defineEmits(['touch'])

const btns = computed(() => [
  { key: 'home', icon: btn7, hidden: props.isDefaultScreen },
  { key: 'btn1', icon: btn1 },
  { key: 'full', icon: btn2 },
  { key: 'in', icon: btn3 },
  { key: 'out', icon: btn4 },
  { key: 'list', icon: btn5 },
  { key: 'btn6', icon: btn6 },
])
const onClick = (key: string) => {
  emit('touch', key)
}
</script>

<style lang="stylus" scoped>
.map-btns
  position fixed
  z-index 9999
  right 29%
  bottom .05rem
  transition right .25s ease-in-out
  &.isFull
    right .05rem
  >img
    width .2rem
    height @width
    margin-bottom .05rem
    display block
    cursor pointer
    transition transform .3s ease-in-out
    &:hover
      transform scale(1.2)
</style>
