<!--  -->
<template>
  <teleport to="body">
    <div class="tag-layer" :class="{ mobile: isMobile, full: tag.type == 'image' }">
      <div class="tag-info" id="tag-info">
        <i
          @click.stop="handleClose"
          class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close close-btn"
        ></i>
        <div class="tag-metas" v-if="tag.media[tag.type].length > 0 && tag.type != 'audio'">
          <metasImage
            :data="tag"
            @close="handleClose"
            :scale="true"
            :viewer="true"
            v-if="tag.type == 'image' && !isMobile"
          />
          <imageView :data="tag" v-if="tag.type == 'image' && isMobile" />
          <metasWeb :data="tag" v-if="tag.type == 'link'" />
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
  import { defineEmits, onMounted, computed } from 'vue';
  import metasImage from './metas/metas-image.vue';
  import imageView from './metas/image-view.vue';
  import browser from '/@/utils/browser';
  import metasWeb from './metas/metas-web.vue';

  import { tagType } from '/@/store/modules/scene';

  const isMobile = computed(() => browser.isMobile());

  const props = defineProps({
    data: {
      type: Object,
      default: {} as any as tagType,
    },
  });
  const tag = computed(() => props.data);
  const emits = defineEmits(['close']);

  onMounted(async () => {});

  // const audioInfo = computed(() => {
  //   return tag.value.media.audio;
  // });
  // const audio = ref(null);

  // watchEffect(() => {
  //   if (audio.value) {
  //     audio.value.play();
  //   }
  // });

  const handleClose = () => {
    emits('close', tag.value);
  };
</script>

<style lang="scss">
  .tag-layer {
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    top: 0;
    position: fixed;
    left: 0;
    // padding: calc(var(--editor-head-height) + 20px) calc(var(--editor-toolbox-width) + 20px) 60px calc(var(--editor-menu-width) + 20px);
    background-color: rgba(0, 0, 0, 0.7);

    .tag-info {
      color: #fff;
      width: 100%;
      height: 85%;
      position: absolute;
      top: 7.5%;
      left: 0;
      .close-btn {
        position: fixed;
        right: 36px;
        top: 36px;
        font-size: 18px;
        cursor: pointer;
        z-index: 100;
      }
      .tag-metas {
        width: 100%;
        height: 100%;
        position: relative;

        .pic-box {
          width: 100%;
          height: 100%;
          border: none;

          .image-list {
            .image-item {
              background-size: contain;
            }
          }
        }
        .video-box {
          height: auto;
          border: none;
          video {
            width: 100%;
            height: auto;
            object-fit: contain;
          }
        }
        .web-box {
          // height: 500px;
          width: 91%;
          height: 100%;
          border: none;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  [is-mobile] {
    .tag-layer {
      .tag-info {
        .close-btn {
          position: absolute;
          right: 20px;
          top: -30px;
          font-size: 18px;
          cursor: pointer;
        }
      }
      &.full {
        background-color: #141414;
        .tag-info {
          height: 100%;
          top: 0;
          .close-btn {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 18px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
