import { nextTick } from 'vue';

function injectMaskStyle() {
  if (document.getElementById("full-mask-style")) return;
  const style = document.createElement("style");
  style.id = "full-mask-style";
  style.innerHTML = `
	.loading-next {
		position: fixed;
		inset: 0;
		// z-index: 4000;
		// background: var(--el-color-primary-light-9);
		backdrop-filter: blur(2px);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	`;
  document.head.appendChild(style);
}
const NextLoading = {
  // 创建 loading
  start: () => {
    if (document.querySelector(".full-mask")) return;
    injectMaskStyle();
    const div = document.createElement("div");
    div.setAttribute("class", "loading-next");
    div.innerHTML = `
			<div class="loading-next-box">
				<div class="loading-next-box-warp">
					<div class="loading-next-box-item"></div>
					<div class="loading-next-box-item"></div>
					<div class="loading-next-box-item"></div>
					<div class="loading-next-box-item"></div>
					<div class="loading-next-box-item"></div>
					<div class="loading-next-box-item"></div>
					<div class="loading-next-box-item"></div>
					<div class="loading-next-box-item"></div>
					<div class="loading-next-box-item"></div>
				</div>
			</div>
		`;
    document.body.appendChild(div);
    window.nextLoading = true;
  },
  // 移除 loading
  done: (time = 0) => {
    nextTick(() => {
      setTimeout(() => {
        var _a;
        window.nextLoading = false;
        const el = document.querySelector(".loading-next");
        (_a = el == null ? void 0 : el.parentNode) == null ? void 0 : _a.removeChild(el);
      }, time);
    });
  }
};

export { NextLoading };
