/**
 * 折叠面板导航指令
 * 用法：v-collapse-nav="navItems"
 * 自动获取 el-collapse 的所有子项信息，生成导航数据
 */
export default {
  mounted(el, binding) {
    const updateNavItems = () => {
      // 使用 nextTick 确保 DOM 完全渲染
      setTimeout(() => {
        // 获取所有 el-collapse-item 元素
        const collapseItems = el.querySelectorAll(".el-collapse-item");

        const navItems = [];

        collapseItems.forEach((item, index) => {
          // 获取标题
          const titleEl = item.querySelector(".el-collapse-item__header");
          const title = titleEl
            ? titleEl.textContent.trim()
            : `项目${index + 1}`;

          // 尝试从多个来源获取 name
          let name = "";

          // 1. 优先从已有的 id 属性获取
          const existingId = item.getAttribute("id");
          if (existingId && existingId.startsWith("collapse-")) {
            name = existingId.replace("collapse-", "");
          } else {
            // 2. 尝试从 data-name 属性获取（Element Plus 可能会将 name 存储在这里）
            const dataName = item.getAttribute("data-name");
            if (dataName) {
              name = dataName;
            } else {
              // 3. 尝试从 name 属性获取
              const nameAttr = item.getAttribute("name");
              if (nameAttr) {
                name = nameAttr;
              } else {
                // 4. 使用标题作为 name
                name = title;
              }
            }

            // 设置 id
            item.setAttribute("id", `collapse-${name}`);
          }

          console.log("Navigation item:", {
            name,
            title,
            id: item.getAttribute("id"),
            allAttrs: Array.from(item.attributes).map(
              (attr) => `${attr.name}="${attr.value}"`,
            ),
          });

          navItems.push({
            name,
            label: title,
            index,
          });
        });

        console.log("All navigation items:", navItems);

        // 更新绑定值
        if (binding.value) {
          if (typeof binding.value === "function") {
            binding.value(navItems);
          } else if (Array.isArray(binding.value)) {
            // 先清空数组，再添加新元素
            binding.value.length = 0;
            navItems.forEach((navItem) => {
              binding.value.push(navItem);
            });
          }
        }
      }, 100);
    };

    // 初始化时更新
    updateNavItems();

    // 使用 MutationObserver 监听 DOM 变化（处理动态内容）
    const observer = new MutationObserver((mutations) => {
      // 只在节点变化时更新，避免无限循环
      const hasRelevantMutation = mutations.some(
        (mutation) =>
          mutation.type === "childList" && mutation.addedNodes.length > 0,
      );
      if (hasRelevantMutation) {
        updateNavItems();
      }
    });

    observer.observe(el, {
      childList: true,
      subtree: false,
    });

    // 保存 observer 到元素上，方便后续清理
    el._collapseNavObserver = observer;
  },

  unmounted(el) {
    // 清理 observer
    if (el._collapseNavObserver) {
      el._collapseNavObserver.disconnect();
      delete el._collapseNavObserver;
    }
  },
};

/**
 * 在 Vue 应用中注册指令的示例：
 * import collapseNav from '@/directives/collapseNav';
 * app.directive('collapse-nav', collapseNav);
 */
