<!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 · RangeQuickPicker</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./RangeQuickPicker.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">RangeQuickPicker 日期范围快捷选择</h2>
    <p class="kole-desc">内置快捷选项（今天、近7天、本月等），也支持自定义起止日期。</p>

    <div class="kole-demo">
      <div class="kole-demo__title">报表时间筛选</div>
      <div class="kole-range" id="range">
        <div class="kole-range-trigger" role="button" tabindex="0" aria-haspopup="listbox" aria-expanded="false" id="trigger">
          <span id="label" class="kole-range-placeholder" role="button" tabindex="0">请选择时间范围</span>
        </div>
        <div class="kole-range-pop" id="pop" style="display:none">
          <div class="kole-range-presets" id="presets"></div>
          <div class="kole-range-custom">
            <input type="date" id="start" />
            <span class="kole-range-tilde">~</span>
            <input type="date" id="end" />
          </div>
          <div class="kole-range-actions">
            <button class="kole-range-cancel" id="cancel">取消</button>
            <button class="kole-range-ok" id="ok">确定</button>
          </div>
        </div>
      </div>
      <p class="kole-code-tip" id="out"></p>
    </div>
  </div>

  <script>
    var PRESETS = [
      { label: '今天', days: 0 },
      { label: '昨天', days: -1, len: 1 },
      { label: '近7天', days: -6 },
      { label: '近30天', days: -29 },
      { label: '本月', month: 'this' },
      { label: '上月', month: 'last' },
      { label: '本年', year: 'this' }
    ];
    function fmt(d) {
      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
    }
    function presetRange(p) {
      var end = new Date(); end.setHours(0, 0, 0, 0);
      var start = new Date(end);
      if (p.year === 'this') { start = new Date(end.getFullYear(), 0, 1); }
      else if (p.month === 'this') { start = new Date(end.getFullYear(), end.getMonth(), 1); }
      else if (p.month === 'last') { start = new Date(end.getFullYear(), end.getMonth() - 1, 1); var e = new Date(end.getFullYear(), end.getMonth(), 1); end = new Date(e - 1); }
      else { start.setDate(end.getDate() + (p.days || 0)); }
      if (p.days === -1 && !p.len) { start = new Date(end); }
      if (p.days === -1 && p.len) { start = new Date(end); start.setDate(end.getDate() - (p.len - 1)); }
      return { start: fmt(start), end: fmt(end) };
    }

    var range = document.getElementById('range');
    var trigger = document.getElementById('trigger');
    var pop = document.getElementById('pop');
    var label = document.getElementById('label');
    var out = document.getElementById('out');
    var cur = { start: '', end: '' };

    var presetsEl = document.getElementById('presets');
    PRESETS.forEach(function (p, i) {
      var b = document.createElement('button');
      b.className = 'kole-range-preset'; b.textContent = p.label;
      b.onclick = function () {
        var r = presetRange(p);
        cur = r; document.getElementById('start').value = r.start; document.getElementById('end').value = r.end;
        Array.prototype.forEach.call(presetsEl.children, function (c) { c.classList.remove('is-active'); });
        b.classList.add('is-active');
      };
      presetsEl.appendChild(b);
    });

    function refresh() {
      if (cur.start && cur.end) {
        label.innerHTML = cur.start + ' <span class="kole-range-sep">~</span> ' + cur.end;
        label.classList.remove('kole-range-placeholder');
        out.textContent = '已选范围：' + cur.start + ' 至 ' + cur.end;
      }
    }
    trigger.onclick = function (e) {
      e.stopPropagation();
      pop.style.display = pop.style.display === 'none' ? 'block' : 'none';
      trigger.classList.toggle('is-focus', pop.style.display === 'block');
    };
    document.getElementById('ok').onclick = function () {
      cur.start = document.getElementById('start').value;
      cur.end = document.getElementById('end').value;
      pop.style.display = 'none'; trigger.classList.remove('is-focus');
      Array.prototype.forEach.call(presetsEl.children, function (c) { c.classList.remove('is-active'); });
      refresh();
    };
    document.getElementById('cancel').onclick = function () { pop.style.display = 'none'; trigger.classList.remove('is-focus'); };
    document.addEventListener('click', function (e) { if (!range.contains(e.target)) { pop.style.display = 'none'; trigger.classList.remove('is-focus'); } });
  </script>
</body>
</html>
