<!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 · TimelineList（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="TimelineList.css" />
  <style>
    body { margin: 0; padding: 24px; background: var(--kole-color-page-bg); }
    .kole-demo-toolbar { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
    .kole-demo-toolbar label { font-size: 13px; color: var(--kole-color-text-body); }
    .kole-demo-toolbar select { border: 1px solid var(--kole-color-border); border-radius: 6px; padding: 4px 8px; }
    .kole-demo-panel { background: var(--kole-color-card-bg); border: 1px solid var(--kole-color-border); border-radius: 8px; padding: 20px; }
  </style>
</head>
<body>
  <div class="kole-demo-toolbar">
    <label>方向：</label>
    <select id="dir">
      <option value="vertical" selected>垂直</option>
      <option value="horizontal">水平</option>
    </select>
  </div>

  <div class="kole-demo-panel">
    <div class="kole-timeline" role="list" id="app"></div>
  </div>

  <script>
    var DATA = [
      { time: '09:00', title: '提交申请', desc: '张三提交了采购单 PR-2024-001。', status: 'done' },
      { time: '10:30', title: '主管审批', desc: '李主管已通过审批。', status: 'done' },
      { time: '14:00', title: '财务复核', desc: '财务正在复核预算。', status: 'active' },
      { time: '—', title: '入库登记', desc: '等待复核完成后登记。', status: 'pending' },
      { time: '—', title: '归档', desc: '复核不通过，已退回。', status: 'error' }
    ];

    function render() {
      var dir = document.getElementById('dir').value;
      var root = document.getElementById('app');
      root.className = 'kole-timeline' + (dir === 'horizontal' ? ' is-horizontal' : '');
      root.innerHTML = DATA.map(function (it) {
        return '' +
          '<div class="kole-timeline-item is-' + it.status + '" role="list">' +
            '<span class="kole-timeline-node" role="list"></span>' +
            '<span class="kole-timeline-line"></span>' +
            '<div class="kole-timeline-content">' +
              '<div class="kole-timeline-time" role="list">' + it.time + '</div>' +
              '<div class="kole-timeline-title">' + it.title + '</div>' +
              '<div class="kole-timeline-desc">' + it.desc + '</div>' +
            '</div>' +
          '</div>';
      }).join('');
    }

    document.getElementById('dir').addEventListener('change', render);
    render();
  </script>
</body>
</html>
