<template>
  <teleport :to="tags$" v-if="tags$">
    <template v-for="(tag, index) in tags" :key="index">
      <div
        @mouseenter="onMouseEnter(tag, index)"
        @mouseleave="onMouseLeave($event, tag)"
        :style="{ left: tag.x + 'px', top: tag.y + 'px' }"
        :class="{ visible: tag.visible }"
      >
        <span @click.stop="goTag(tag, index)" class="point zoom" :style="{ 'background-image': 'url(' + getUrl(tag.icon) + ')' }"></span>
        <!-- <div class="content"> -->
        <div class="content">
          <div class="trans" :class="{ active: (isFixed && tag.sid == hotData.sid) || showInfo }">
            <template v-if="hotData && tag.sid == hotData.sid && !showMsg">
              <div class="arrow" :id="`arrow_${tag.sid}`"></div>
              <ShowTag @click.stop="" v-if="hotData" @open="openInfo" />
            </template>
          </div>
        </div>
        <TagView @click.stop v-if="showMsg && toggleIndex == index" @close="closeInfo" />
      </div>
    </template>
  </teleport>
    <GoodsList @close="closetagtype" />
    <Treasure @close="closetagtype" />
</template>
<script setup>
import { ref, onMounted, computed, watch, watchEffect, onActivated, onDeactivated, getCurrentInstance, nextTick } from "vue";
import { getApp, useApp } from "@/app";
import { useStore } from "vuex";
import common from "../../utils/common";
import TagView from "./tag-view.vue";
import GoodsList from "./goods-list.vue";
import Treasure from "./treasure.vue";

import ShowTag from "./show-tag.vue";
import { useMusicPlayer } from "@/utils/sound";
const musicPlayer = useMusicPlayer();
let init = true;
const hotData = computed(() => {
  let data = store.getters["tag/hotData"];
  if (!data) {
    // musicPlayer.play()
    // musicPlayer.pause(true)
    // if (!getApp().Scene.isCurrentPanoHasVideo) {
    //     console.log('resume')
    //     console.log(init)
    //     musicPlayer.resume()
    // }
  }
  return data;
});


const isPlay = computed(() => store.getters["tour/isPlay"]);
const flying = computed(() => store.getters["flying"]);
const leaveId = computed(() => store.getters["tag/leaveId"]);
const isFixed = computed(() => store.getters["tag/isFixed"]);
const enterVisible = computed(() => store.getters["tag/enterVisible"]);
const editPosition = computed(() => store.getters["tag/editPosition"]);
const toggleIndex = computed(() => store.getters["tag/toggleIndex"]);
const isClick = computed(() => store.getters["tag/isClick"]);
const positionInfo = computed(() => store.getters["tag/positionInfo"]);
const store = useStore();
const tags$ = ref(null);
const tags = computed(() => {
  return store.getters["tag/tags"] || [];
});

const showInfo = ref(false);
const showMsg = ref(false);
// const toggleIndex = ref(null)
const openInfo = () => {
  showMsg.value = true;
  store.commit("tag/setFixed", false);
  showInfo.value = false;
};
const closeInfo = () => {
  showMsg.value = false;
  if (isClick.value) {
    //只有点击定位的才恢复显示
    store.commit("tag/show", toggleIndex.value);
    store.commit("tag/setFixed", true);
    // showInfo.value = true
    showInfo.value = false;
  }
  store.commit("tag/setClick", false);
};
const closeTag = async () => {
  const app = getApp();
  const player = await app.TourManager.player;
  //关闭热点面板时候，继续播放之前暂停的音频
  if (!app.Scene.isCurrentPanoHasVideo && !player.isPlaying) {
    if (hotData.value.type == "audio" || hotData.value.type == "video") {
      // console.log('resume')
      musicPlayer.resume();
    }
  }

  store.commit("tag/setFixed", false);
  store.commit("tag/closeTag");
  showInfo.value = false;
};

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

const goTag = async (item, index) => {
  let player = await getApp().TourManager.player;
  if (isPlay.value) {
    player.pause();
    store.commit("tour/setData", { isPlay: false });
  }
  if (flying.value) {
    return;
  }
  if (isFixed.value && hotData.value.sid == item.sid && !positionInfo.value) {
    closeTag();
  } else {
    if (!enterVisible.value && !editPosition.value) {
      if (!positionInfo.value) {
        store.commit("tag/show", index);
        store.commit("tag/setFixed", true);
        showInfo.value = true;
        store.commit("tag/setToggleIndex", index);
        store.commit("tag/gotoTag", item);
      }
      store.commit("tag/setClick", true);
    } else {
      //热点可视操作
      getApp().TagManager.edit.setTagVisi(item.sid);
    }
  }
};

onMounted(async () => {
  const app = await useApp();
  await app.TagManager.tag();
  init = false;

  tags$.value = "[xui_tags]";
  app.TagManager.updatePosition(tags.value);
  if (app.config.mobile) {
    nextTick(() => {
      let player = document.querySelector(".player");
      player.addEventListener("touchstart", onClickHandler);
    });
  } else {
    window.addEventListener("click", onClickHandler);
  }
});
const getUrl = (icon) => {
  let url = icon == "" || !icon ? getApp().resource.getAppURL("images/tag_icon_default.svg") : icon;

  return common.changeUrl(url);
};
const onMouseEnter = (tag, index) => {
  if (!getApp().config.mobile) {
    if (flying.value || isPlay.value) {
      return;
    }
    if (!enterVisible.value && !editPosition.value && !positionInfo.value) {
      // console.log('onMouseEnter')

      showInfo.value = true;
      store.commit("tag/show", index);

      store.commit("tag/setToggleIndex", index);
      if (leaveId.value != tag.sid) {
        //聚焦后 移到其他热点取消fixed
        store.commit("tag/setFixed", false);
      }
    }
  }
};

const onMouseLeave = (event, tag) => {
  if (!getApp().config.mobile) {
    if (flying.value) {
      return;
    }
    if (event.relatedTarget != null) {
      showInfo.value = false;
      store.commit("tag/setLeaveId", tag.sid);
      if (!enterVisible.value && !isFixed.value && !showMsg.value && !editPosition.value && !positionInfo.value) {
        closeTag();
      }
    }
  }
};

const onClickHandler = () => {
  // if (flying.value) {
  //     return
  // }

  if (!positionInfo.value && isFixed.value) {
    closeTag();
    store.commit("tag/setClick", false);
  }
};
</script>
