<template>
  <template v-if="loaded">
    <Header></Header>
    <LeftPano>
      <SceneList :current="currentModel" @update:current="loadModel" />
    </LeftPano>

    <router-view v-slot="{ Component }">
      <!-- <keep-alive> -->
      <component :is="Component" />
      <!-- </keep-alive> -->
    </router-view>
  </template>
</template>

<script setup lang="ts">
import Header from "./header/index.vue";
import SceneList from "../scene-list/index.vue";
import { LeftPano } from "@/layout";
import { custom } from "@/env";
import { onMounted, ref } from "vue";
import { currentModel, loadModel, fuseModel } from "@/model";
import { initialFuseModels, initialScenes } from "@/store";
import { asyncTimeout } from "@/utils";

const loaded = ref(false);
const initialSys = async () => {
  await Promise.all([initialFuseModels(), initialScenes()]);
  await loadModel(fuseModel);
  await asyncTimeout(1000);
  loaded.value = true;
};
initialSys();

custom.showLeftPano = true;
</script>

<style>
:root {
  --editor-menu-width: 0px;
}
</style>
