<template>
      <!-- <Logo /> -->
      <Tips />
      <!-- <Menu /> -->
      <div v-show="showUI && !vrStatus">
            <sceneList />
            <div class="btn-style">
                  <!-- <div class="menu-icon">
                        <div @click="onIsShowList"
                              v-if="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)">
                              <img :src="require(`@/assets/images/icon/${isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'}`)"
                                    alt="" />
                        </div>
                  </div> -->

                  <Control />
                  <!-- <ControlRight /> -->
            </div>

      </div>

</template>

<script setup>
import Logo from "./logo";
import Tips from "./tips";
import sceneList from "./list";
import Control from "./control_js";
import ControlRight from "./control.right";
import Menu from "./menu";
import { ref, watch, computed, onMounted, nextTick } from "vue";
import { useApp, getApp } from "@/app";

import { useStore } from "vuex";
const store = useStore();
const showUI = ref(false)


const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
const showTours = computed(() => store.getters["fdkk/isShowToursList"]);

const metadata = computed(() => store.getters["scene/metadata"]);
const scenes = computed(() => store.getters["scene/list"]);
const secondaryList = computed(() => store.getters["scene/secondaryList"]);
const currentScene = computed(() => store.getters["scene/currentScene"]);
const vrStatus = computed(() => store.getters["functions/vrStatus"]);

const onIsShowList = (data) => {
      if (showTours.value) {
            store.commit('fdkk/setShowToursList', false)
      }
      store.commit("functions/setShowScenesList", !isShowScenesList.value);
};

watch(currentScene, () => {
      if (currentScene.value.type == '4dkk' && isShowScenesList.value) {
            let t = setTimeout(() => {
                  clearTimeout(t)
                  store.commit("functions/setShowScenesList", false);
            }, 1500);
      }
})

useApp().then((app) => {
      app.Scene.on("ready", (data) => {
            if (currentScene && currentScene.value.type == '4dkk' && !showUI.value) {
                  showUI.value = true
            }
      })
      app.Scene.on("sceneReady", () => {
            showUI.value = true
      })
      app.Scene.on("onExitVr", () => {
            store.commit("functions/setVrStatus", false);
      })
})

</script>

<style lang="scss" scoped>
.btn-style {
      display: flex;
      width: 96%;
      max-width: 600px;
      position: absolute;
      left: 2%;
      right: 2%;
      bottom: 38px;
      z-index: 9;

      .menu-icon {
            width: 36px;
            height: 36px;

            >div {
                  width: 100%;
                  height: 36px;
                  background: rgba(0, 0, 0, 0.4);
                  border-radius: 50%;
                  border: 1px solid rgba(255, 255, 255, 0.2);
                  backdrop-filter: blur(6px);
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  >img {
                        width: 24px;
                        height: 24px;

                  }
            }
      }
}
</style>