<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> {{ t('base.threeDModel') }}</span>
    </div>
  </teleport>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
  import { useI18n } from '/@/hooks/useI18n';
  import { useAppStore } from '/@/store/modules/app';
  import { useRtcStore } from '/@/store/modules/rtc';
  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 }) {
      const rtcStore = useRtcStore();
      const appStore = useAppStore();
      const isLeader = computed(() => rtcStore.isLeader);
      const isTourMode = computed(() => appStore.isTourMode);

      const { t } = useI18n();
      onMounted(() => {
        watch(
          () => [props.show, props.to],
          () => {
            if (props.to?.length && props.show) {
              console.log('小地图must show', props.to, props.show);
              setTimeout(() => {
                ifShow.value = true;
                refMiniMap.value = props.to;
              }, 10);
            }
          },
          {
            immediate: true,
            deep: true,
          },
        );
      });

      const toggleMap = () => {
        // if (unref(isLeader) || unref(isTourMode)) {
        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 = () => {
        if (unref(isLeader) || unref(isTourMode)) {
          emit('changeMode', 'dollhouse');
        }
      };

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