import { createVNode, render } from "vue";
import WlLoading from "./src/index.vue";
interface IOptions {
  tips?: string;
  type?: "show" | "hide" | "changePercent";
  showLoading?: boolean;
  needPercent?: boolean;
  currentRate?: number;
  percent?: number;
  content?: string;
  onCancel?: () => {};
  parentNode: Element;
  backgroundColor?: string;
  loadingModelBackgroundColor?: string;
}
let mountNode = null;
export default (options: IOptions) => {
  const {
    type,
    needPercent,
    tips,
    percent,
    currentRate,
    backgroundColor = "white",
    loadingModelBackgroundColor = "rgba(0, 0, 0, 0.45)",
  } = options;
  const app = createVNode(WlLoading, {
    percent,
    needPercent,
    currentRate,
    content: tips,
    backgroundColor,
    loadingModelBackgroundColor,
  });
  if (type === "hide") {
    if (mountNode) {
      if (options.parentNode) {
        options.parentNode.removeChild(mountNode);
      } else {
        document.body.removeChild(mountNode);
      }
      mountNode = null;
    }
  } else if (type === "show") {
    app.props.showLoading = true;
    mountNode = document.createElement("div");
    render(app, mountNode);
    if (options.parentNode) {
      options.parentNode.appendChild(mountNode);
    } else {
      document.body.appendChild(mountNode);
    }
  } else if (type === "changePercent") {
    app.props.currentRate = percent;
    app.props.needPercent = true;
    render(app, mountNode);
  }
};
