<template>
  <div class="home">
    <pano />
    <div class="mapcon" @click="router.push({ name: 'map', params: { id: store.currentScene.sceneCode } })">
      <vmap :tagdata="tagData" />
      <!-- <vmap :left="`calc(-${tagData.left} )`" :top="`calc(-${tagData.top} )`"/> -->
    </div>
    <!-- <div @click="gohome" class="homeicon" v-if="isMobile">
        <img :src="require(`@/assets/images/resource/home.png`)" alt="" />
      </div>
      <vaside v-else /> -->
</div>
</template>

<script setup>

import vaside from "./aside";
import { useRouter, useRoute } from "vue-router";
import pano from "./pano";
import vmap from "./mapIcon";
import browser from '@/utils/browser'
import { onMounted, watch, computed, ref, nextTick } from "vue";
import appStore from '@/store/index';
import { tag_position } from "@/data";

const router = useRouter();
const store = appStore();

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

const tagData = computed(() => tag_position[store.currentScene.sceneCode] || {})


const gohome = () => {
  router.push({
    path: `/`,
  });
  setTimeout(() => {
    window.location.reload()
  }, 0);
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;

  .mapcon {
    position: absolute;
    z-index: 999;
    left: 30px;
    top: 60px;
    width: 240px;
    height: 240px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid #E1CEAA;
    cursor: pointer;
    background-color: #a6b5a8;
  }
}

@media screen and (max-width: 1000px) {
  .home {
    .mapcon {
      width: 120px;
      height: 120px;
      left: unset;
      right: 10px;
      top: 10px;
      border: 2px solid #E1CEAA;
    }

  }
}
</style>
