import { defineComponent, reactive } from "vue";
import { Provider } from "queenjs/adapter/vue";
import { Router } from "vue-router";
import { createApp } from "vue";
import { queenApi } from "queenjs";
import "windi.css";
import "@/styles/global.less";
import { InitControllers } from "@/comm/ctx";
import { Spin } from "ant-design-vue";

let setModuleHooks: any[] = [];

const App = defineComponent(() => {
  const state = reactive({
    loading: true,
  });

  try {
    InitControllers().then(() => {
      state.loading = false;
    });
  } catch (error) {
    console.error(error);
    state.loading = true;
  }
  setModuleHooks.forEach((hook) => hook());
  setModuleHooks = [];
  return () => {
    if (state.loading) {
      return (
        <div class={"text-center mt-20px"}>
          <Spin tip={"初始加载中..."}></Spin>
        </div>
      );
    }
    return (
      <Provider>
        <router-view></router-view>
      </Provider>
    );
  };
});

export function startApp(router: Router, hooks: any[] = []) {
  setModuleHooks = hooks;
  queenApi.router = router;
  createApp(App).use(router).mount("#app");
}
