/**
 * 折叠面板导航指令
 * 用法：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);
 */
