<script setup lang="ts">
import { onMounted, defineProps, watch, PropType } from 'vue';
import { IViewMode } from '../../../map/index.type';
import _Map from '../../../map/map';
import { DEFAULT_CLS } from '../utils';

const props = defineProps({
  map: { type: Object as PropType<_Map>, required: true },
  viewMode: { type: String as PropType<IViewMode>, default: '3D' },
  teleportTo: { type: String, default: 'body' }
});
const emits = defineEmits(['update:viewMode']);

onMounted(() => {
  console.log('onMounted :>> ', 'onMounted');
});

const handleChange = () => {
  console.log('props :>> ', props);
  const mode = props.viewMode.toUpperCase() === '2D' ? '3D' : '2D';
  emits('update:viewMode', mode);
  props.map.setViewMode(mode);
};
</script>
<template>
  <Teleport :to="teleportTo">
    <button :class="DEFAULT_CLS('view-mode')" class="foo" @click="handleChange">
      切换{{ viewMode }}
    </button>
  </Teleport>
</template>
