<template>
  <teleport v-if="show" :to="to">
    <span class="button-switch" @click.stop="toggleMap">
      <!-- <ui-icon type="show_map_collect"></ui-icon> -->
    </span>
    <div v-if="showDollhouse" class="change" @click="changeMode">
      <!-- <ui-icon type="show_3d_normal"></ui-icon> -->
      <span> 3D模型</span>
    </div>
  </teleport>
</template>
<script lang="ts">
import { defineComponent, watchEffect } from "vue";
import { propTypes } from "/@/utils/propTypes";

export default defineComponent({
  name: "minMap",
  props: {
    show: propTypes.bool.def(false),
    showDollhouse: propTypes.bool.def(false),
    to: propTypes.string.def(""),
  },
  emits: ["changeMode", "toggleMap"],
  setup(props, { emit }) {
    watchEffect(() => {
      if (props.to?.length) {
        debugger;
      }
    });
    // debugger
    const toggleMap = () => {
      emit("toggleMap");
    };
    const changeMode = () => {
      emit("changeMode", "dollhouse");
    };

    return {
      toggleMap,
      changeMode,
    };
  },
});
</script>
