import { initEditor } from "@/modules/editor";
import Viewport from "@/modules/editor/components/Viewport";
import { EditorMode } from "@/modules/editor/typings";
import { useResource } from "@/modules/resource";
import { SelectOneImage } from "@/pages/website/Material2/modal";
import { useAuth } from "@queenjs-modules/auth";
import { defineComponent } from "vue";

export default defineComponent(() => {
  const editor = initEditor();
  const resource = useResource();
  resource.controls.categoryCtrl.init();
  const auth = useAuth();

  const params = new URLSearchParams(location.hash.split("?")[1]);
  editor.actions.switchMode((params.get("mode") || "editPage") as EditorMode);
  const prodId = params.get("id");
  const isWk = params.get("isWk");
  auth.actions.on("getUserInfo:success", () => {
    if (prodId) {
      const userInfo: any = auth.store.userInfo;
      const isSys = userInfo.roles?.includes("system") ? true : false;
      if (isWk) {
        editor.actions.initWkDesign(prodId);
        return;
      }
      const categories = resource.controls.categoryCtrl.state.categories;
      const list: any = categories.find((d: any) => d.type == "h5");
      const res = list?.children.find((e: any) => e.name == "平台");
      editor.store.setTplCategory(res?.children);
      editor.actions.initDesign(prodId, isSys);
    } else {
      editor.jumpIndexHtml();
    }
  });

  editor.controls.pickCtrl.onPickImage = async (maxCount: number) => {
    if (maxCount <= 1) {
      const url = await SelectOneImage();

      return [url as string];
    }
    return [];
  };

  editor.controls.pickCtrl.onPickPack = async () => {
    return resource.treeController.selectOnePackScene();
  };

  return () => <Viewport class="!h-100vh" />;
});