import { createLoading } from '/@/components/Loading';

import type { Directive, App } from 'vue';



const loadingDirective: Directive = {

  mounted(el, binding) {

    const tip = el.getAttribute('loading-tip');

    const background = el.getAttribute('loading-background');

    const size = el.getAttribute('loading-size');

    const fullscreen = !!binding.modifiers.fullscreen;

    const instance = createLoading(

      {

        tip,

        background,

        size: size || 'large',

        loading: !!binding.value,

        absolute: !fullscreen,

      },

      fullscreen ? document.body : el

    );

    el.instance = instance;

  },

  updated(el, binding) {

    const instance = el.instance;

    if (!instance) return;

    instance.setTip(el.getAttribute('loading-tip'));

    if (binding.oldValue !== binding.value) {

      if (binding.oldValue !== binding.value) {

        instance.setLoading?.(binding.value && !instance.loading);

      }

    }

  },

  unmounted(el) {

    el?.instance?.close();

  },

};



export function setupLoadingDirective(app: App) {

  app.directive('loading', loadingDirective);

}



export default loadingDirective;