<template>
  <LoadingLogo :thumb="true" />
  <Guide />

  <div class="ui-view-layout" :class="{ show: show }" is-mobile="true">
    <div class="scene" ref="scene$"></div>
    <template v-if="dataLoaded">
      <Information v-if="!isshoppingguide" />
      <Control />
      <!-- <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
        <span :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" class="button-switch" @click.stop="toggleMap">
          <ui-icon type="show_map_collect"></ui-icon>
        </span>

        <p class="change" :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" @click="changeMode('dollhouse', $event, 'focus3d')">
          <ui-icon type="show_3d_normal"></ui-icon>
          3D模型
        </p>
      </teleport> -->
      <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
        <span
          :class="{ gudieDisabled: isshoppingguide && role != 'leader' }"
          class="button-switch"
          @click.stop="toggleMap"
        >
          <ui-icon type="show_map_collect"></ui-icon>
        </span>
        <div
          v-if="controls.showDollhouse"
          :class="{ gudieDisabled: isshoppingguide && role != 'leader' }"
          class="change"
          @click="changeMode('dollhouse')"
        >
          <ui-icon type="show_3d_normal"></ui-icon>
          <span> 3D模型</span>
        </div>
      </teleport>
      <!-- <template v-if="refMiniMap && player.showWidgets">
        <div
          :class="{ disabled: flying, gudieDisabled: isshoppingguide && role != 'leader' }"
          v-show="mode != 'panorama'"
          v-if="controls.showFloorplan && controls.showDollhouse"
          class="tab-layer"
        >
          <div class="tabs" v-if="controls.showMap">
            <span :class="{ active: mode === 'floorplan' }" @click="changeMode('floorplan', $event)">
              <ui-icon :type="mode == 'floorplan' ? 'show_plane_selected' : 'show_plane_normal'"></ui-icon>
              二維
            </span>
            <span :class="{ active: mode === 'dollhouse' }" @click="changeMode('dollhouse', $event)">
              <ui-icon :type="mode == 'dollhouse' ? 'show_3d_selected' : 'show_3d_normal'"></ui-icon>

              三維
            </span>
            <div class="background" ref="background"></div>
          </div>
        </div>
      </template> -->

      <template v-if="refMiniMap && player.showWidgets">
        <div
          :class="{
            disabled: flying,
            gudieDisabled: isshoppingguide && role != 'leader',
          }"
          v-show="mode != 'panorama'"
          v-if="controls.showFloorplan && controls.showDollhouse"
          class="tab-layer"
        >
          <div class="tabs" v-if="controls.showMap">
            <span
              :class="{ active: mode === 'floorplan' }"
              ref="floorplan_ref"
              @click="changeMode('floorplan', $event)"
            >
              <ui-icon
                :type="
                  mode == 'floorplan'
                    ? 'show_plane_selected'
                    : 'show_plane_normal'
                "
              ></ui-icon>
              二維
            </span>
            <span
              :class="{ active: mode === 'dollhouse' }"
              ref="dollhouse_ref"
              @click="changeMode('dollhouse', $event)"
            >
              <ui-icon
                :type="
                  mode == 'dollhouse' ? 'show_3d_selected' : 'show_3d_normal'
                "
              ></ui-icon>

              三維
            </span>
            <div class="background" ref="background"></div>
          </div>
        </div>
      </template>
    </template>
    <!-- <UiTags /> -->
  </div>

  <GoodsList @close="closetagtype" />
  <Treasure @close="closetagtype" />
  <Waterfall @close="closetagtype" />
</template>

<script setup>
import { initialRoom } from '@/store/room.js'
// import UiTags from "@/components/Tags";
import GoodsList from "@/components/Tags/goods-list.vue";
import Treasure from "@/components/Tags/treasure.vue";
import Waterfall from "@/components/Tags/waterfall.vue";

import Information from "@/components/Information";
import Control from "@/components/Controls/Control.Mobile.vue";
import LoadingLogo from "@/components/shared/Loading.vue";
import Guide from "@/components/shared/Guide.vue";
import { Dialog } from "@/global_components/";

import { createApp } from "@/app";
import { ref, onMounted, computed, nextTick, watch } from "vue";
import { useStore } from "vuex";
import browser from "@/utils/browser";
import { useApp, getApp } from "@/app";

const store = useStore();

let visibilitychangeFn = () => {
  if (browser.isTabHidden()) {
  }
};

let hashchangefn = () => {
  if (window.location.hash.indexOf("#showpage") >= 0) {
    window.history.go(-1);
  }
};


let app = null;

let tagid = browser.getURLParam("tagid");

const role = computed(() => store.getters["rtc/role"]);

const closetagtype = () => {
  store.commit("tag/setTagClickType", {
    type: "",
    data: {},
  });

  if (isshoppingguide.value) {
    if (role.value == "leader") {
      socket.value &&
        socket.value.emit("action", {
          type: "tagclose",
        });
    }
  }
};
const socket = computed(() => store.getters["rtc/socket"]);

const tags = computed(() => {
  return store.getters["tag/tags"] || [];
});

const isshoppingguide = computed(() => store.getters["shoppingguide"]);

const player = computed(() => store.getters["player"]);
const flying = computed(() => store.getters["flying"]);
const metadata = computed(() => store.getters["scene/metadata"]);
const controls = computed(() => {
  return metadata.value.controls;
});
const mode = computed(() => store.getters["mode"]);
const showNavigations = computed(() => store.getters["showNavigations"]);
const scene$ = ref(null);

const show = ref(false);
const dataLoaded = ref(false);
const refMiniMap = ref(null);
const isCollapse = ref(false);
const background = ref(null);
const resize = () => {
  if (
    this.$refs.background &&
    (this.mode == "floorplan" || this.mode == "dollhouse")
  ) {
    this.$nextTick(() => {
      let $active = $(this.$el).find(".tabs .active");
      background.value.style.width =
        $active[0].getBoundingClientRect().width + "px";
      background.value.style.left = $active.position().left + "px";
    });
  }
};

watch(
  () => isshoppingguide.value,
  (val, old) => {
    let $minmap = document.querySelector("[xui_min_map]");

    if ($minmap) {
      setTimeout(async () => {
        await nextTick();
        if (browser.getURLParam("role") == "customer") {
          if (isshoppingguide.value) {
            $minmap.classList.add("gudieDisabled");
          } else {
            $minmap.classList.remove("gudieDisabled");
          }
        } else {
          $minmap.classList.remove("gudieDisabled");
        }
      });
    }
  },
  {
    deep: true,
  }
);

watch(
  () => player.value.showMap,
  (val, old) => {
    if (!isCollapse.value) {
      let $minmap = document.querySelector("[xui_min_map]");
      if ($minmap) {
        if (val) {
          $minmap.classList.remove("collapse");
        } else {
          $minmap.classList.add("collapse");
        }
      }
    }
  },
  {
    deep: true,
  }
);
watch(
  () => player.value.showWidgets,
  (val, old) => {
    let $minmap = document.querySelector("[xui_min_map]");
    if ($minmap) {
      if (val) {
        $minmap.classList.remove("collapse");
      } else {
        $minmap.classList.add("collapse");
      }
    }
  },
  {
    deep: true,
  }
);

watch(
  () => mode.value,
  (val, old) => {
    console.log(val);
    let timer = setTimeout(() => {
      clearTimeout(timer);
      if (val == "floorplan") {
        if (floorplan_ref.value && floorplan_ref.value) {
          background.value.style.width =
            floorplan_ref.value.getBoundingClientRect().width + "px";
          background.value.style.left = floorplan_ref.value.offsetLeft + "px";
        }
      } else if (val == "dollhouse") {
        if (dollhouse_ref.value && dollhouse_ref.value) {
          background.value.style.width =
            dollhouse_ref.value.getBoundingClientRect().width + "px";
          background.value.style.left = dollhouse_ref.value.offsetLeft + "px";
        }
      }
    }, 0);
  },
  {
    deep: true,
  }
);
const floorplan_ref = ref(null);
const dollhouse_ref = ref(null);
const changeMode = (name, e) => {
  if (e) {
    if (!flying.value) {
      store.commit("setMode", name);
    }
  } else {
    store.commit("setMode", name);
  }
};
const toggleMap = () => {
  isCollapse.value = !isCollapse.value;
  let $minmap = document.querySelector("[xui_min_map]");
  if ($minmap) {
    if (!isCollapse.value) {
      $minmap.classList.remove("collapse");
    } else {
      $minmap.classList.add("collapse");
    }
  }
};

const onClickTagInfo = (el) => {
  el.stopPropagation();
  let item = tags.value.find((item) => item.sid == el.data.sid);
  guideclicktag(item);
  store.commit("tag/setTagClickType", {
    type: "goodlist",
    data: item,
  });
};

const guideclicktag = (tag) => {
  if (isshoppingguide.value) {
    if (role.value == "leader") {
      socket.value &&
        socket.value.emit("action", {
          type: "tagclick",
          data: {
            sid: tag.sid,
          },
        });
    }
  }
  return;
};

onMounted(async () => {
  app = createApp({
    num: browser.getURLParam("m"),
    dom: scene$.value,
    mobile: true,
  });
  app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
  app.use("Tag");
  app
    .use("TagView", {
      render(data) {
        if (data.media["image"] && data.media["image"].length) {
          return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span>
                      <div class="tag-body">
                        <div data-id="${data.sid}" class="tag-commodity">
                          <div  style="background-image:url(${
                            app.resource.getUserResourceURL(
                              data.media["image"][0].src
                            ) + "&x-oss-process=image/resize,m_fill,w_80,h_80"
                          })" class='tag-avatar'></div>
                          <p class="tag-title">${data.title}</p>
                          <div class="tag-info">
                            <div>${(data.content || "").substring(0, 30)}</div>
                          </div>
                        </div>
                      </div>
                  `;
        }
        return `<span class="tag-icon animate" style="display:none"></span>`;
      },
    })
    .then((view) => {
      view.on("rendered", (e) => {
        view.on("click", (e) => {
          var tag = e.data;
          // 聚焦當前點擊的熱點
          view.focus(tag.sid).then(() => {
               onClickTagInfo(e)
          });
        });

        view.on("focus", (e) => {
          if (!e.data.media["image"] || !e.data.media["image"].length) {
            return
          }
          document.querySelectorAll("[xui_tags_view] >div").forEach((el) => {
            el.querySelector(".tag-body").classList.remove("show");
            el.style.zIndex = "auto";
          });
          e.target.style.zIndex = "999";
          e.target.querySelector(".tag-body").classList.add("show");
         
          // e.target
          //   .querySelector(".tag-commodity")
          //   .removeEventListener("click", onClickTagInfo);
          // e.target
          //   .querySelector(".tag-commodity")
          //   .addEventListener("click", onClickTagInfo);
        });
      }); //dom渲染完成
    });

  app.use("TourPlayer");
  // if (!hadVideo.value) {
  //   app.Scene.lock();
  // }
  app.Scene.on("ready", () => {
    show.value = true;
  });
  app.Scene.on("error", (data) => {
    switch (data.code) {
      case 5033:
        Dialog.alert("该场景正在计算中，请稍后再试");
        break;
      case 5034:
        Dialog.alert("服务端开小差，请稍后再试");
        break;
      case 5009:
        Dialog.alert("服务端开小差，请稍后再试");
        break;
      case 5005:
        Dialog.alert("服务端开小差，请稍后再试");
        break;
    }
  });
  app.Scene.on("loaded", (pano) => {
    refMiniMap.value = "[xui_min_map]";
    store.commit("setFloorId", pano.floorIndex);
    store.commit("rtc/setShowdaogou", true);

    if (browser.getURLParam("roomId") && browser.getURLParam("vruserId") && browser.getURLParam("name")) {
      store.commit("showShoppingguide", true);
    }
  });
  app.Scene.on("panorama.videorenderer.resumerender", () => {
    //musicPlayer.pause(true);
  });

  app.Scene.on("panorama.videorenderer.suspendrender", async () => {
    let player = await getApp().TourManager.player;
    if (!player.isPlaying) {
      //musicPlayer.resume();
    }
  });
  app.store.on("metadata", (metadata) => {
    store.commit("scene/load", metadata);
    if (!metadata.controls.showMap) {
      app.MinMap.hide(true);
    }
    dataLoaded.value = true;
  });
  app.store.on("tags", (tags) => {
    store.commit("tag/load", tags);
  });
  app.Camera.on("mode.beforeChange", ({ fromMode, toMode, floorIndex }) => {
    if (fromMode) {
      store.commit("setFlying", true);
    }
  });
  app.Camera.on("mode.afterChange", ({ toMode, floorIndex }) => {
    store.commit("setFlying", false);
  });
  app.Camera.on("flying.started", (pano) => {
    store.commit("setFlying", true);
  });
  app.Camera.on("flying.ended", ({ targetPano }) => {
    store.commit("setFlying", false);
    store.commit("setPanoId", targetPano.id);
    if (app.Scene.isCurrentPanoHasVideo) {
    }
  });

  app.Camera.on("pano.chosen", (pano) => {});
  app.store.on("tour", async (tour) => {
    app.TourManager.load(tour);
    store.commit("tour/setData", {
      tours: JSON.parse(
        JSON.stringify(app.TourManager.tours, (key, val) => {
          if (key === "audio") {
            return null;
          } else {
            return val;
          }
        })
      ),
    });
    store.commit("tour/setBackUp", {
      tours: JSON.parse(
        JSON.stringify(app.TourManager.tours, (key, val) => {
          if (key === "audio") {
            return null;
          } else {
            return val;
          }
        })
      ),
    });
  });
  app.store.on("floorcad", (floor) =>
    store.commit("scene/loadFloorData", floor)
  );

  app.render();
  document.removeEventListener("visibilitychange", visibilitychangeFn);
  document.addEventListener("visibilitychange", visibilitychangeFn);

  if (browser.detectWeixin()) {
    //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
    wx.miniProgram.getEnv((res) => {
      if (res.miniprogram) {
        window.removeEventListener("hashchange", hashchangefn);
        window.addEventListener("hashchange", hashchangefn);
      }
    });
  }
});

initialRoom()
</script>
<style lang="scss">
.tab-layer {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 2.3rem;
  pointer-events: none;
}
.tabs {
  pointer-events: auto;
  position: relative;
  display: flex;
  background: #222222;
  border-radius: 6px;
  padding: 2px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
  .background {
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    width: 50%;
    border-radius: 4px;
    background: #444444;
    box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.3);
    z-index: 0;
    transition: left 0.3s;
  }
  span {
    flex: 1;
    color: #fff;
    opacity: 0.5;
    border-radius: 6px;
    height: 0.94737rem;
    font-size: 0.36842rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    z-index: 1;
    i {
      font-size: 0.47368rem;
      margin-right: 4px;
      pointer-events: none;
    }
  }

  span.active {
    opacity: 1;
  }
}

[xui_tags_view] {
  .tag-body {
    /* display: none; */
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%) scale(0);
    transform-origin: bottom;
    transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
    // pointer-events: none;
    .tag-commodity {
      min-width: 230px;
      height: 76px;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
      border-radius: 2px;
      position: relative;
      margin-bottom: 30px;
      &::before {
        content: "";
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 28px;
        bottom: -30px;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.8),
          rgba(255, 255, 255, 0)
        );
        position: absolute;
      }
      .tag-avatar {
        position: absolute;
        z-index: 99;
        width: 80px;
        height: 80px;
        background: #ffffff;
        box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%);
        border-radius: 2px;
        top: -14px;
        left: -12px;
        background-size: cover;
        pointer-events: none;
      }
      > p {
        color: #131d34;
        font-size: 16px;
        pointer-events: none;
      }
      .tag-title {
        font-weight: bold;
        color: #131d34;
        padding: 10px 10px 10px 76px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 240px;
        font-size: 14px;
      }
      .tag-info {
        color: #444444;
        padding: 0 20px 0 76px;
        font-size: 12px;
        width: 240px;
        > div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 240px;
        }
      }
    }
    &.show {
      transform: translateX(-50%) scale(1);
    }
  }
}

.gudieDisabled {
  pointer-events: none !important;
  * {
    pointer-events: none !important;
  }
}

@media (orientation: landscape) {
  .tab-layer {
    top: 1.2rem;
    .tabs {
      height: 0.7rem;
      > span {
        height: 0.7rem;
        font-size: 0.25rem;
      }
    }
  }
}
</style>
