<template>
  <!-- <template v-if="isMo">
    <NoMobile />
  </template> -->
  <div>
    <Opening @done="onOpeningDone" @show-step="isHomePage = true" />
    <Homepage :show="isHomePage" :showKrpano="showKrpano" @close="handleCloseAndGoHomePage" />
    <Logo :id="currentSceneId" />
    <RightMenu @toggle-menu="handleNavi" @change-scene="handleChangeScene" />
    <Container :url="currentScene"></Container>
    <NavigationBar :show="navi" @toggle-menu="handleNavi" @change-scene="handleChangeScene" />
  </div>
</template>
<script setup>
import { onBeforeMount, onMounted, provide, ref, watchEffect } from "vue";
import Logo from "./components/Logo.vue";
import RightMenu from "./components/RightMenu.vue";
import Container from "./components/Container.vue";
import NavigationBar from "./components/NavigationBar.vue";
import Homepage from "./components/Home.vue";
import Opening from "./components/Opening.vue";
// import NoMobile from './components/Nomobile.vue';
import MobileDetect from "mobile-detect";

import config from "./config.json";
const data = ref([]);
const isMo = ref(false);
const isOpening = ref(false);
const isHomePage = ref(true);
const showKrpano = ref(false);

const md = new MobileDetect(window.navigator.userAgent);
data.value = config;
provide("data", data);
provide("isMo", isMo);
const navi = ref(false);
const currentScene = ref("");
const currentSceneId = ref("home");

const handleNavi = () => {
  navi.value = !navi.value;
  console.log("navi", navi.value);
};
const onOpeningDone = () => {
  isOpening.value = true;
  showKrpano.value = true;
};

onMounted(() => {
  if (md.mobile()) {
    // console.log('isMo')
    isMo.value = true;
    document.body.classList.add("isMo");

    // return
  }

  const scenes = Array.from(data.value).find((item) => item.id === "home");
  currentScene.value = scenes.url;
});

const handleChangeScene = (item, isHome) => {
  if (!isHome) {
    isHomePage.value = false;
  } else {
    isHomePage.value = true;
  }

  console.log("handleChangeScene", item, isHome);
  currentScene.value = item.url;
  currentSceneId.value = item.id;
};
const handleCloseAndGoHomePage = () => {
  console.log("handleCloseAndGoHomePage");
  const first = config[0];
  isHomePage.value = false;
  currentScene.value = first.url;
  currentSceneId.value = first.id;
};
</script>
<style lang="sass">

@--swiper-theme-color:#fff
</style>
