// src/directives/delayRender.js
/**
 * 延迟渲染自定义指令（修复版）
 * @param {Number} binding.value - 延迟时间(ms)，默认2000ms
 * 核心：延迟期间清空DOM，到期后恢复原始HTML，兼容Vue虚拟DOM
 */
export default {
  mounted(el, binding) {
    // 1. 校验延迟时间，默认2秒
    const delay = Number.isFinite(Number(binding.value))
      ? Number(binding.value)
      : 2000;

    // 2. 保存原始HTML内容（字符串形式，兼容Vue虚拟DOM，不会丢失）
    el._originalHTML = el.innerHTML;

    // 3. 清空DOM，实现“不渲染”（可选：添加加载占位符）
    el.innerHTML = ""; // 纯清空，无占位符
    // 可选：添加加载占位符（提升体验）
    // el.innerHTML = '<div style="padding: 20px; color: #999;">正在加载...</div>';

    // 4. 延迟后恢复原始内容，触发渲染
    el._delayRenderTimer = setTimeout(() => {
      // 关键：恢复保存的原始HTML
      if (el._originalHTML) {
        el.innerHTML = el._originalHTML;
        // 清理临时变量，减少内存占用
        delete el._originalHTML;
      }
    }, delay);
  },

  // 组件卸载时强制清理，防止内存泄漏+残留问题
  unmounted(el) {
    // 清理定时器
    if (el._delayRenderTimer) {
      clearTimeout(el._delayRenderTimer);
      delete el._delayRenderTimer;
    }
    // 清理保存的原始HTML
    if (el._originalHTML) {
      delete el._originalHTML;
    }
  },

  // 可选：指令更新时重新处理（比如延迟时间动态变化）
  updated(el, binding) {
    // 先清理旧定时器
    if (el._delayRenderTimer) {
      clearTimeout(el._delayRenderTimer);
    }
    // 重新执行挂载逻辑
    const delay = Number.isFinite(Number(binding.value))
      ? Number(binding.value)
      : 2000;
    el._originalHTML = el.innerHTML;
    el.innerHTML = "";
    el._delayRenderTimer = setTimeout(() => {
      el.innerHTML = el._originalHTML;
      delete el._originalHTML;
    }, delay);
  },
};
