<template>
  <teleport v-show="show" v-if="ifShow" :to="refMiniMap">
    <span class="button-switch" @click.stop="toggleMap">
      <i
        class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-show_map_collect iconzm-show_map_collect"
      ></i>
    </span>
    <div v-if="showDollhouse" class="change" @click="changeMode">
      <i
        class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-show_3d_normal iconzm-show_3d_normal"
      ></i>
      <span> 3D模型</span>
    </div>
  </teleport>
</template>
<script lang="ts">
  import { defineComponent, onMounted, watchEffect, ref } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  const refMiniMap = ref<Nullable<string>>(null);
  const ifShow = ref(false);
  const isCollapse = ref(false);

  export default defineComponent({
    name: 'MinMap',
    props: {
      show: propTypes.bool.def(true),
      showDollhouse: propTypes.bool.def(false),
      to: {
        type: String as PropType<Nullable<string>>,
        default: null,
      },
    },
    emits: ['changeMode', 'toggleMap'],
    setup(props, { emit }) {
      onMounted(() => {
        watchEffect(() => {
          if (props.to?.length) {
            ifShow.value = true;
            refMiniMap.value = props.to;
          }
        });
      });

      const toggleMap = () => {
        isCollapse.value = !isCollapse.value;
        emit('toggleMap', isCollapse.value);
        let $minmap = document.querySelector('[xui_min_map]');
        if ($minmap) {
          if (!isCollapse.value) {
            $minmap.classList.remove('collapse');
          } else {
            $minmap.classList.add('collapse');
          }
        }
      };
      const changeMode = () => {
        emit('changeMode', 'dollhouse');
      };

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