<template>
  <div class="birdview" :style="{
    transform: `translate(calc(-${props.tagdata.left} + ${isMobile ? 38 : 90}px),calc(-${props.tagdata.top} + ${isMobile ? 18 : 86}px))`
  }">
    <img :src="require(`@/assets/images/resource/scene/pc_map_bg.jpg`)" alt="" />
    <div class="tag" :style="{
      top: tagdata.top,
      left: tagdata.left
    }">
      <span></span>
    </div>
</div>
</template>

<script setup>


import { onMounted, computed, inject, ref, defineProps } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tag_position } from "@/data";
import emitter from "@/mitt/index";
import browser from '@/utils/browser'

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

const router = useRouter();

const props = defineProps({
  tagdata: {
    type: String,
    default: {
      left: 0,
      top: 0,
    },
  }
})

console.log('result:', props.top);


const lastIsPlayBgm = ref(false)

let isplayingtour = ref(false)

let tags = ref(tag_position);

let onClick = (data) => {
  router.push({
    name: `Scene`,
    params: {
      id: data.id
    },
    query: {
      active: data.subPano
    }
  });
};


</script>

<style lang="scss" scoped>
$w: 8px;

.birdview {
  // width: 100vw;
  height: 100vh;
  z-index: 400;
  display: flex;
  justify-content: flex-start;
  position: absolute;
  pointer-events: none;
  >img {
    height: 100%;
  }

  .tag {
    position: absolute;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    top: 50%;
    left: 50%;

    >span {
      display: inline-block;
      width: 16px;
      height: 16px;
      transform: translate(10px, 34px);
      background: #FFFFFF;
      border-radius: 50%;
      border: 3px solid #E1CEAA;
    }

  }
}

.mapIfr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 401;

  .back {
    position: absolute;
    z-index: 402;
    top: 30px;
    left: 30px;
    cursor: pointer;

    >img {
      width: 80px;
      height: auto;
    }
  }

  >iframe {
    width: 100%;
    height: 100%;
  }
}

@keyframes upanddown {
  0% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -16px);
  }

  100% {
    transform: translate(-50%, 0);
  }
}
</style>
