<template>
  <SlideMenu />
  <ModelList v-if="!showSceneList" />
  <LeftPano v-else>
    <SceneList :current="currentModel" @update:current="loadModel" />
  </LeftPano>

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

<script lang="ts" setup>
import SlideMenu from "./fuse-slide-menu.vue";
import SceneList from "../scene-list/index.vue";
import { LeftPano } from "@/layout";
import ModelList from "./fuse-left-pano.vue";
import { computed, watch, watchEffect } from "vue";
import router from "@/router";
import { currentModel, fuseModel, loadModel } from "@/model";

const showSceneList = computed(
  () => router.currentRoute.value.meta.left === "scene-list"
);
watch(showSceneList, (n, o) => {
  if (!n && o) {
    loadModel(fuseModel);
  }
});
</script>
