import { useResource } from "@/modules/resource";
import { initQueditor } from "@queenjs-modules/queditor";
import { switchSceneProdComp } from "@queenjs-modules/queditor/module/controls/Queen3dCtrl/actions/geom";
import { initExpViewer } from "@queenjs-modules/queentree-explorer-viewer";
import { defineComponent, onBeforeUnmount, onMounted } from "vue";
import { useRoute } from "vue-router";
import AttrPanel from "./components/AttrPanel";
import Header from "./components/Header";
import LeftPanel from "./components/LeftPanel";

export default defineComponent({
  setup() {
    const route = useRoute();
    const expViewer = initExpViewer({
      modules: {
        queditor: initQueditor({
          config: {
            dragEnable: true,
          },
        }),
      },
    });
    const resource = useResource();

    const { queditor } = expViewer.modules;

    expViewer.initComponents({
      Viewport: {
        Header: {
          default: Header,
        },
        EditPanel: {
          default: AttrPanel,
        },
      },
    });

    queditor.initComponents({
      Viewport: {
        SiderLeft: {
          default: LeftPanel,
        },
        Toolbar: {
          default: () => null,
        },
      },
    });

    const { id } = route.params;

    const init = async () => {
      await resource.actions.queryTplsDetail(id as string);
      queditor.actions.initPack(resource.store.sourceDetail?.webEditor?.pack);
      queditor.store.setCurrScene(0);
      expViewer.store.setEditNodeUid(resource.store.sourceDetail._id);

      queditor.actions.on("initQueen3dScene:success", () => {
        switchSceneProdComp.call(
          queditor.controls.queen3dCtrl,
          queditor.store.pack.scenes[0].products[0].id,
          resource.store.currentMesh.meshName
        );
      });
    };

    onMounted(() => init());

    onBeforeUnmount(() => resource.store.setSourceDetail({}));

    return () => {
      return (
        <div class="h-100vh">
          <expViewer.components.Viewport />
        </div>
      );
    };
  },
});