<template>
  <Container
    :upload-resourse="uploadResourse"
    v-model:full="full"
    :ref="(d: any) => (draw = d?.draw)"
  >
    <template #header>
      <Header @selectVR="(scene) => (vrScene = scene)" v-if="inited" />
    </template>
    <template #slide>
      <Slide v-if="inited" />
    </template>
    <template #cover>
      <ShowVR :scene="vrScene" v-if="vrScene" ref="vr" @close="vrScene = undefined" />
    </template>
  </Container>

  <Dialog />
</template>

<script lang="ts" setup>
import Header from "./header.vue";
import Slide from "./slide.vue";
import Container from "../../../components/container/container.vue";
import ShowVR from "../../../components/show-vr.vue";
import { uploadResourse } from "../../req";
import { ref, watch } from "vue";
import { Draw } from "../../../components/container/use-draw";
import { Scene } from "../../../platform/platform-resource";
import Dialog from "../../../dialog/dialog.vue";
import { tabulationData, refreshTabulationData } from "../../store";

const full = ref(false);
const draw = ref<Draw>();
const vrScene = ref<Scene>();

const inited = ref(false);
const init = async (draw: Draw) => {
  await refreshTabulationData();
  draw.config.showCompass = true;
  draw.config.showGrid = false;
  draw.config.showLabelLine = false;
  draw.config.showComponentSize = false;
  draw.store.setStore(tabulationData.value.store);
  inited.value = true;
};
watch(draw, (draw) => draw && init(draw));
</script>
