import Vue, { DirectiveOptions } from 'vue';
import Loading from './loading.vue';

/**
 * v-mu-loading 加载中
 * loading-text, loading-background
 * @author tanxj
 */
export const muLoading: DirectiveOptions = {
  bind(el: any, binding: any) {
    createLoadElement(el);
    setLoadingShow(el, binding);
  },
  update: function (el: any, binding: any) {
    if (!el.$vm) createLoadElement(el);
    setLoadingShow(el, binding);
  },
  unbind: function (el: any, binding: any) {
    el.$vm = {};
    el.currentStatus = false;
  }
};

/**
 * 创建加载load的节点
 * @param el 添加的节点位置
 */
function createLoadElement(el: any) {
  const LoadingPlugin = Vue.extend(Loading);
  el.$vm = new LoadingPlugin({ el: el });
  el.appendChild(el.$vm.$el);
  const bg = el.getAttribute('loading-background');
  const text = el.getAttribute('loading-text');
  if (bg) el.$vm.styleLoading = { background: bg };
  if (text) el.$vm.text = text;
}

/**
 * 设置加载
 * @param el 添加的节点位置
 * @param bind 绑定的值
 */
function setLoadingShow(el: any, binding: any) {
  el.currentStatus = binding.value;
  if (binding.value) {
    setTimeout(() => {
      if (el.currentStatus) el.$vm.isShow = el.currentStatus;
    }, 50);
  } else {
    el.$vm.isShow = false;
  }
}