import Vue from 'vue'
import loading from './loading.vue'

// loading組件作為參數(shù)傳入
const loadingConstructor = Vue.extend(loading)

const loadingDirective = Vue => {
  Vue.directive('custLoading', {
    /**
     * binding:
     * 1.可傳單個參數(shù)，為布爾值；
     * 2.也可用json傳多個參數(shù){ loading, tip, background }
     *  2.1 loading { boolean } 是否開啟遮罩
     *  2.2 tip { string } 提示文字
     *  2.3 background { string } 加載背景顏色
     * */
    // update: 參數(shù)變化時觸發(fā)
    update: function (el, binding, vnode) {
      const value = binding.value
      let backup = {}
      // 判斷參數(shù)類型，將參數(shù)都轉(zhuǎn)換為對象，方便后續(xù)統(tǒng)一處理
      typeof value === 'boolean' ? (backup.loading = value) : (backup = value || {})
      // 取出所有的參數(shù)
      const { loading, tip, background } = backup
      // 根據(jù)loading參數(shù)判斷開啟或者關(guān)閉加載效果，開啟和關(guān)閉函數(shù)后續(xù)會講到
      loading ? createLoading(el, tip, background) : close(el?.customLoadingInstance?.$el)
    },
    // unbid: 指令卸載時觸發(fā)
    unbind: function (el, binding) {
      const { loading } = binding.value || {}
      // 如果還在展示加載特效，則關(guān)閉
      loading && close(el?.customLoadingInstance?.$el)
    }
  })
}
export default loadingDirective

const createLoading = (target, tip= '加載中,請稍候...', background) => {
  // 判斷是否允許開啟加載特效
  if (Vue.prototype.$isServer || target?.customLoadingInstance) return
  const mainEL = document.querySelector('#main')
  // 判斷展示加載效果的元素是否存在
  const parentNode = target || mainEL || document.body
  // 判斷父級是否存在定位，沒有則添加定位
  const position = getComputedStyle(parentNode)?.position
  (!position || position === 'static') && (parentNode.style.position = 'relative')
  // 創(chuàng)建loading實例
  const instance = new loadingConstructor({
    el: document.createElement('div'),
    data: { background, tip, parentNodeWidth: parentNode.clientWidth, isShow: true }
  })
  // 注意：loading實例是一個Vue組件對象，真正的DOM放在實例的$el屬性上
  parentNode.appendChild(instance.$el)
  parentNode.customLoadingInstance = instance
  
  return instance
}

const close = (target) => {
  if (!target) return
  // 添加逐漸消失的class
  target.className += ' custom-loading-disappear'
  // 獲取loading實例
  const instance = target?.parentNode?.customLoadingInstance
  //  設(shè)定消失時間。
  instance?.$data?.dur && (instance.$data.dur = 0.8)
  // 設(shè)定定時器，用于在加載效果消失時，刪除加載效果的`DOM`元素。
  let timer = setTimeout(() => {
    if (target && target.parentNode) {
      // 將customLoadingInstance 屬性置為null，才不會干擾下一次開啟
      target.parentNode.customLoadingInstance = null
      // 將加載效果的DOM元素移除
      target.parentNode.removeChild(target)
    }
    clearTimeout(timer)
    timer = null
  }, 1100)
}