import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import { createProjectRouter } from "./router";
import "./global.less";
import VueGridLayout from "vue-grid-layout"; // 引入layout
import {
  renderWithQiankun,
  qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";

let app;
function render(props: Object = {}) {
  app = createApp(App);
  setStyleSheet(props.styles);
  const router = createProjectRouter(props.base);
  app.use(router);
  app.use(VueGridLayout);
  app.use(createPinia());
  app.mount("#y-code-app");
}

function setStyleSheet(styles: Object = {}) {
  const styleEle = document.createElement("style");
  styleEle.type = "text/css";
  styleEle.innerHTML = `
  :root {
    --primary-color: ${styles.primaryColor || "#1677ff"};
    --primary-light-color: ${styles.primaryLightColor || "#4096ff"};
    --table-head-bg-color: ${styles.tableHeadBgColor || "#fafafa"};
    --table-head-font-color: ${styles.tableHeadFontColor || "#191919"};
  }
  `;
  document.head.appendChild(styleEle);
}

const __POWERED_BY_QIANKUN__ =
  qiankunWindow?.__POWERED_BY_QIANKUN__ ||
  window?.proxy?.__POWERED_BY_QIANKUN__;

if (__POWERED_BY_QIANKUN__) {
  renderWithQiankun({
    bootstrap() {
      console.log("bootstrap");
      return Promise.resolve();
    },
    mount(props) {
      console.log("mount");
      render(props);
      return Promise.resolve();
    },
    unmount() {
      console.log("unmount");
      if (app) {
        app.unmount();
      }
      return Promise.resolve();
    },
    update() {},
  });
} else {
  render();
}