<template>
  <div
    :class="{
      disabled: true,
      // gudieDisabled: isshoppingguide && role != 'leader',
    }"
    class="tab-layer"
  >
    <div class="tabs" v-if="show">
      <span :class="{ active: isFloorplan }" ref="floorplan_ref" @click="handle2DMode">
        <i
          :class="{
            'icon-show_plane_selected': isFloorplan,
            'icon-show_plane_normal': !isFloorplan,
          }"
          class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom iconzm-show_plane_normal"
        ></i>

        <!-- <ui-icon
          :type="
            mode == 'floorplan' ? 'show_plane_selected' : 'show_plane_normal'
          "
        ></ui-icon> -->
        {{ t('base.floorPlan') }}
      </span>
      <span :class="{ active: isDollhouse }" ref="dollhouse_ref" @click="handle3DMode">
        <i
          :class="{
            'icon-show_3d_selected': isDollhouse,
            'icon-show_3d_normal': !isDollhouse,
          }"
          class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom iconzm-show_3d_selected"
        ></i>
        <!-- <ui-icon
          :type="mode == 'dollhouse' ? 'show_3d_selected' : 'show_3d_normal'"
        ></ui-icon> -->
        <!-- 三维 -->
        {{ t('base.dollhouse') }}
      </span>
      <div class="background" ref="background"></div>
    </div>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, ref, watchEffect, watch, unref } from 'vue';
  import { useI18n } from '/@/hooks/useI18n';
  import { useAppStore } from '/@/store/modules/app';
  import { useRtcStore } from '/@/store/modules/rtc';
  import { propTypes } from '/@/utils/propTypes';

  export default defineComponent({
    name: 'Floorplan',
    props: {
      mode: propTypes.string.def(''),
      disabled: propTypes.bool.def(false),
      show: propTypes.bool.def(false),
    },
    emits: ['changeMode', 'toggleMap'],
    setup(props, { emit }) {
      const { t } = useI18n();
      const refMiniMap = ref<Nullable<string>>(null);
      const ifShow = ref(false);
      const background = ref<Nullable<HTMLElement>>(null);
      const floorplan_ref = ref<Nullable<HTMLElement>>(null);
      const dollhouse_ref = ref<Nullable<HTMLElement>>(null);
      const isFloorplan = computed(() => props.mode === 'floorplan');
      const isDollhouse = computed(() => props.mode === 'dollhouse');
      const rtcStore = useRtcStore();
      const appStore = useAppStore();
      const isLeader = computed(() => rtcStore.isLeader);
      const isTourMode = computed(() => appStore.isTourMode);

      watchEffect(() => {
        console.log('floorplan', isFloorplan);
      });

      watch(
        () => props.mode,
        (val, _) => {
          console.log(val);
          let timer = setTimeout(() => {
            clearTimeout(timer);
            if (val == 'floorplan') {
              if (unref(floorplan_ref) && background.value) {
                const width = unref(floorplan_ref)?.getBoundingClientRect().width + 'px';
                const offsetLeft = unref(floorplan_ref)?.offsetLeft + 'px';
                background.value.style.width = width;
                background.value.style.left = offsetLeft;
              }
            } else if (val == 'dollhouse') {
              if (unref(dollhouse_ref) && background.value) {
                const width = unref(dollhouse_ref)?.getBoundingClientRect().width + 'px';
                const offsetLeft = unref(dollhouse_ref)?.offsetLeft + 'px';

                background.value.style.width = width;
                background.value.style.left = offsetLeft;
              }
            }
          }, 0);
        },
        {
          deep: true,
        },
      );

      const changeMode = (eventName: string) => {
        emit('changeMode', eventName);
      };
      const handle2DMode = () => {
        if (unref(isLeader) || unref(isTourMode)) {
          changeMode('floorplan');
        }
      };
      const handle3DMode = () => {
        if (unref(isLeader) || unref(isTourMode)) {
          changeMode('dollhouse');
        }
      };

      return {
        handle2DMode,
        handle3DMode,
        t,
        changeMode,
        refMiniMap,
        ifShow,
        isFloorplan,
        isDollhouse,
        floorplan_ref,
        background,
        dollhouse_ref,
      };
    },
  });
</script>
