<template>
  <div class="map-btns" :class="{ isFull: fullScreen }">
    <template v-for="btn in btns">
      <n-tooltip
        v-if="!btn.hidden"
        :key="btn.key"
        trigger="hover"
        placement="left"
      >
        <template #trigger>
          <img :src="btn.icon" :title="btn?.tip" @click="onClick(btn.key)" />
        </template>
        {{ btn.tip }}
      </n-tooltip>
    </template>
  </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 btn8 from '@/assets/images/btn8.png'
import { computed, PropType } from 'vue'
import { NTooltip } from 'naive-ui'

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

const btns = computed(() => [
  {
    key: 'home',
    icon: btn7,
    hidden: props.isDefaultScreen || props.onlyOneView,
    tip: '回到首屏',
  },
  { key: 'search', icon: btn1, tip: '搜索小区' },
  { key: 'full', icon: btn2, tip: '切换全屏幕' },
  { key: 'in', icon: btn3, tip: '放大' },
  { key: 'out', icon: btn4, tip: '缩小' },
  {
    key: 'list',
    icon: btn5,
    hidden: props.onlyOneView,
    tip: '展示屏配置',
  },
  { key: 'gis', icon: btn6, tip: 'gis展示' },
  { key: 'reset', icon: btn8, tip: '重置' },
])
const onClick = (key: string) => {
  emit('touch', key)
}
</script>

<style lang="stylus" scoped>
.map-btns
  position fixed
  z-index 99
  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>
