import { nextTick } from 'vue'
// import '@/styles/loading.scss';

export const loading = {
  show: () => {
    const body: Element = document.body
    const div = document.createElement('div')
    div.className = 'block-loading'
    div.innerHTML = `<div id="loading-mask">
            <div class="loading-wrapper">
                <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
            </div>
        </div>
        `
    body.insertBefore(div, body.childNodes[0])
  },
  hide: () => {
    nextTick(() => {
      setTimeout(() => {
        const el = document.querySelector('.block-loading')
        el && el.parentNode?.removeChild(el)
      }, 1000)
    })
  },
}
