import Vue from 'vue';

/**
 * 自动恢复加载状态的指令
 * 用法: v-loading-recovery="{ loading: 'loadingProp', recovery: ['method1', 'method2'] }"
 */
export const loadingRecoveryDirective = {
  // 当绑定元素插入到 DOM 中时
  inserted(el, binding, vnode) {
    const component = vnode.context;
    const { loading, recovery } = binding.value || {};
    
    if (!loading || !recovery || !Array.isArray(recovery)) return;
    
    // 为组件添加加载状态恢复的逻辑
    const handleNetworkRecovery = () => {
      // 当网络恢复时，自动设置loading为false
      if (component[loading]) {
        component[loading] = false;
      }
    };
    
    // 保存到元素上，以便后续清理
    el._loadingRecovery = handleNetworkRecovery;
    window.addEventListener('network-retry-complete', handleNetworkRecovery);
    
    console.log(`[LoadingRecovery] 添加加载状态恢复: ${loading}`);
  },
  
  // 当指令与元素解绑时
  unbind(el) {
    // 清理事件监听
    if (el._loadingRecovery) {
      window.removeEventListener('network-retry-complete', el._loadingRecovery);
      delete el._loadingRecovery;
    }
  }
};

// 注册全局指令
Vue.directive('loading-recovery', loadingRecoveryDirective);