import { createApp } from "vue";
import "normalize.css";
import App from "./App.vue";
import { router, setupRouter } from "./router";
import "./styles/base.css";
import "./styles/common.css";
import useMock from "@/mock";
import { useUserStore } from "./stores/modules/user";
import { useKeepAliverStore } from "./stores/modules/keep-aliver";

import "@/assets/index.css";
import { setupStore } from "./stores";
import { setupRouterGuard } from "./router/routes/guard";

export const bootstrap = async (callback?: Function) => {
  // 接口是否使用mock数据
  useMock(import.meta.env.VITE_IS_MOCK, async () => {
    const meta = document.createElement("meta");
    meta.name = "naive-ui-style";
    document.head.appendChild(meta);
    const app = createApp(App);
    // 设置Store
    setupStore(app);

    const { clear } = useKeepAliverStore();
    clear();

    // 设置路由
    setupRouter(app);
    // 设置路由守卫
    setupRouterGuard(router);
    await router.isReady();

    // 请求
    const userStore = useUserStore();
    const global = await userStore.baseInfo().catch((e) => {
      console.error("请求报错了：", e);
    });
    const markLogo = document.getElementsByName("markLogo")[0];
    if (markLogo && global) {
      let version = "";
      try {
        version = document
          .getElementsByName("version")[0]
          ?.getAttribute("content") as string;
      } catch (e) {
        console.log(e);
      }
      markLogo.innerHTML = `
.markLogo{
  background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3E${global.appTitle}-${version}%3C/text%3E%3C/svg%3E");
}
`;
    }
    app.mount("#app");

    if (callback) {
      callback();
    }
  });
};