document.addEventListener('DOMContentLoaded', function() {
    // 等待页面完全加载和渲染
    setTimeout(initializeFixedTables, 500);
  });
  
  // 初始化所有固定表格
  function initializeFixedTables() {
    // 查找所有需要固定效果的表格容器
    const tableContainers = document.querySelectorAll('.scrollable-table-container');
    
    if (tableContainers.length === 0) {
      console.warn('未找到.scrollable-table-container元素');
      return;
    }
    
    tableContainers.forEach((container, index) => {
      // 检查是否已初始化
      if (container.dataset.initialized === 'true') {
        return;
      }
      
      // 获取表格
      const table = container.querySelector('table');
      if (!table) {
        console.warn('容器中未找到表格元素', container);
        return;
      }
      
      // 确保表格有正确的结构
      ensureTableStructure(table);
      
      // 应用固定效果
      applyFixedEffects(container, table);
      
      // 标记为已初始化
      container.dataset.initialized = 'true';
      console.log(`表格 ${index + 1} 初始化完成`);
    });
  }
  
  // 确保表格有正确的结构
  function ensureTableStructure(table) {
    // 如果没有thead，尝试从第一行创建
    if (!table.tHead || table.tHead.rows.length === 0) {
      const firstRow = table.rows[0];
      if (firstRow) {
        const thead = document.createElement('thead');
        thead.appendChild(firstRow.cloneNode(true));
        table.insertBefore(thead, table.firstChild);
        firstRow.remove();
      }
    }
    
    // 如果没有tbody，创建它
    if (!table.tBodies || table.tBodies.length === 0) {
      const tbody = document.createElement('tbody');
      while (table.rows.length > 1) { // 假设第一行是表头
        tbody.appendChild(table.rows[1]);
      }
      table.appendChild(tbody);
    }
  }
  
  // 应用固定效果
  function applyFixedEffects(container, table) {
    // 设置表格和列的宽度
    setTableLayout(container, table);
    
    // 添加滚动事件监听器，确保固定效果
    container.addEventListener('scroll', function() {
      // 这个事件监听器确保固定效果在滚动时保持
      // 实际上，CSS的sticky定位应该已经处理了这一点
      // 这里主要是为了确保在某些浏览器中触发重绘
      const thElements = table.querySelectorAll('thead th');
      thElements.forEach(th => {
        th.style.transform = `translateY(${container.scrollTop}px)`;
      });
    });

    // 监听窗口大小变化，重新调整布局
    window.addEventListener('resize', function() {
      setTimeout(() => setTableLayout(container, table), 100);
    });
  }
  
  // 设置表格布局
  function setTableLayout(container, table) {
    // 设置表格宽度
    table.style.width = '100%';
    
    // 设置列宽
    const headerCells = table.tHead.rows[0].cells;
    const containerWidth = container.offsetWidth;
    
    // 首列宽度
    if (headerCells.length > 0) {
      headerCells[0].style.minWidth = '270px';
      headerCells[0].style.width = '270px';
    }
    
    // 其他列平均分配剩余宽度
    const remainingWidth = containerWidth - 270;
    const otherColumnsWidth = Math.max(80, remainingWidth / (headerCells.length - 1));
    
    for (let i = 1; i < headerCells.length; i++) {
      headerCells[i].style.minWidth = `${otherColumnsWidth}px`;
      headerCells[i].style.width = `${otherColumnsWidth}px`;
    }
    
    // 确保表体和表头列宽一致
    if (table.tBodies.length > 0 && table.tBodies[0].rows.length > 0) {
      const bodyCells = table.tBodies[0].rows[0].cells;
      for (let i = 0; i < bodyCells.length; i++) {
        if (i < headerCells.length) {
          bodyCells[i].style.width = headerCells[i].style.width;
          bodyCells[i].style.minWidth = headerCells[i].style.minWidth;
        }
      }
    }
  }
  
  // 如果页面是通过AJAX等方式动态加载的，可以使用这个函数重新初始化
  function reinitializeFixedTables() {
    document.querySelectorAll('.scrollable-table-container').forEach(container => {
      container.dataset.initialized = 'false';
    });
    initializeFixedTables();
  }
  
  // 导出函数到全局作用域，以便在需要时手动调用
  window.reinitializeFixedTables = reinitializeFixedTables;