<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · MergedCellTable</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./MergedCellTable.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">MergedCellTable 合并单元格表格</h2>
    <p class="kole-desc">按字段纵向合并相同内容单元格，合并后垂直居中，适用于报表 / 统计表。</p>

    <div class="kole-demo">
      <div class="kole-demo__title">部门销售额报表（部门列合并）</div>
      <table class="kole-mergetable" id="mergetable">
        <thead><tr><th>部门</th><th>季度</th><th>销售额(万)</th><th>负责人</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <script>
    var data = [
      { dept: '华东大区', q: 'Q1', sale: 120, owner: '王伟' },
      { dept: '华东大区', q: 'Q2', sale: 135, owner: '王伟' },
      { dept: '华东大区', q: 'Q3', sale: 150, owner: '王伟' },
      { dept: '华南大区', q: 'Q1', sale: 90, owner: '李娜' },
      { dept: '华南大区', q: 'Q2', sale: 110, owner: '李娜' },
      { dept: '华北大区', q: 'Q1', sale: 80, owner: '张强' }
    ];
    var tbody = document.querySelector('#mergetable tbody');

    // 计算连续相同 dept 的 rowspan
    var spans = {};
    var i = 0;
    while (i < data.length) {
      var j = i;
      while (j + 1 < data.length && data[j + 1].dept === data[i].dept) j++;
      spans[data[i].dept] = j - i + 1;
      i = j + 1;
    }

    var html = '';
    data.forEach(function (d, idx) {
      var first = idx === 0 || data[idx - 1].dept !== d.dept;
      html += '<tr>';
      if (first) html += '<td class="kole-merged" rowspan="' + spans[d.dept] + '">' + d.dept + '</td>';
      html += '<td>' + d.q + '</td><td>' + d.sale + '</td><td>' + d.owner + '</td></tr>';
    });
    tbody.innerHTML = html;
  </script>
</body>
</html>
