<template>
  <teleport to="body" v-if="currentTag.hotspotType">
    <div class="tag-layer" @click.stop>
      <img class="close" v-if="currentTag.hotspotType != 'audio'" @click.stop="close" :src="require('@/assets/images/icon/material_preview_close@2x.png')" alt="" />
      <metasImage v-if="currentTag.hotspotType == 'image'" />
      <metasWeb v-if="currentTag.hotspotType == 'link'" />
      <metasAudio  @close="close" v-if="currentTag.hotspotType == 'audio'" />
      <metasVideo v-if="currentTag.hotspotType == 'video'" />
      <metasText v-if="currentTag.hotspotType == 'textarea'" />
      <metasArticle v-if="currentTag.hotspotType == 'article'" />
      <metasImageText v-if="currentTag.hotspotType == 'imageText'" />
      <metasPdf v-if="currentTag.hotspotType == 'pdf'" />
      <metasPhone v-if="currentTag.hotspotType == 'phone'" />
    </div>
  </teleport>
</template>

<script setup>
import metasImage from './metas/metas-image'
import metasWeb from './metas/metas-web'
import metasAudio from './metas/metas-audio'
import metasVideo from './metas/metas-video'
import metasText from './metas/metas-text'
import metasArticle from './metas/metas-article.vue'
import metasImageText from './metas/metas-imagetext.vue'
import metasPdf from './metas/metas-pdf.vue'
import metasPhone from './metas/metas-phone.vue'

import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
import { useStore } from "vuex";

import { useMusicPlayer,useSoundPlayer } from '@/utils/sound'
//背景音乐
const musicPlayer = useMusicPlayer()

//解说音乐
const soundPlayer = useSoundPlayer()

const store = useStore();

const currentTag = computed(() => store.getters['tags/currentTag'])
const pauseFrom = computed(() => store.getters["functions/pauseFrom"]);

const emit = defineEmits(["close"]);

const close = () => {
  emit("close");
  store.commit("tags/setCurrentTag", {});
  if (pauseFrom.value=='commentary') {
    soundPlayer.play()
  }else if (pauseFrom.value=='bgm') {
    musicPlayer.play()
}
};
</script>

<style lang="scss" scoped>
.tag-layer {
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  top: 0;
  position: fixed;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  .close {
    width: 36px;
    height: 36px;
    right: 30px;
    top: 20px;
    position: absolute;
    cursor: pointer;
    z-index: 999;
  }
}
</style>
