<!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 · DragUpload</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./DragUpload.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">DragUpload 拖拽上传</h2>
    <p class="kole-desc">支持点击或拖拽文件上传，显示进度与缩略图，可删除。</p>

    <div class="kole-demo">
      <div class="kole-upload" role="button" tabindex="0" id="upload">
        <div class="kole-upload-drop" role="button" tabindex="0" id="drop">
          <span class="kole-upload-icon">⬆️</span>
          <div class="kole-upload-hint">将文件拖到此处，或 <b>点击选择</b></div>
        </div>
        <input type="file" id="file" multiple style="display:none" />
        <div class="kole-upload-list" role="button" tabindex="0" id="list"></div>
      </div>
    </div>
  </div>

  <script>
    var drop = document.getElementById('drop');
    var input = document.getElementById('file');
    var list = document.getElementById('list');
    var files = [];

    drop.addEventListener('click', function () { input.click(); });
    input.addEventListener('change', function () { addFiles(input.files); input.value = ''; });
    ['dragenter', 'dragover'].forEach(function (ev) {
      drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('is-over'); });
    });
    ['dragleave', 'drop'].forEach(function (ev) {
      drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('is-over'); });
    });
    drop.addEventListener('drop', function (e) { addFiles(e.dataTransfer.files); });

    function addFiles(flist) {
      Array.prototype.forEach.call(flist, function (f) {
        var id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);
        var item = { id: id, name: f.name, progress: 0, done: false, thumb: '' };
        if (/^image\//.test(f.type) && f.size < 2 * 1024 * 1024) {
          var reader = new FileReader();
          reader.onload = function (e) { item.thumb = e.target.result; render(); };
          reader.readAsDataURL(f);
        }
        files.push(item);
        render();
        simulate(item);
      });
    }
    function simulate(item) {
      var timer = setInterval(function () {
        item.progress = Math.min(100, item.progress + Math.random() * 22);
        if (item.progress >= 100) { item.progress = 100; item.done = true; clearInterval(timer); }
        render();
      }, 220);
    }
    function render() {
      list.innerHTML = files.map(function (it) {
        var thumb = it.thumb ? '<img src="' + it.thumb + '">' : '文件';
        return '<div class="kole-upload-item" role="button" tabindex="0">' +
          '<div class="kole-upload-thumb">' + thumb + '</div>' +
          '<div class="kole-upload-meta">' +
            '<div class="kole-upload-name" role="button" tabindex="0">' + it.name + '</div>' +
            '<div class="kole-upload-bar"><i style="width:' + it.progress + '%"></i></div>' +
          '</div>' +
          '<div class="kole-upload-status" role="button" tabindex="0">' + (it.done ? '已完成' : Math.round(it.progress) + '%') + '</div>' +
          '<button class="kole-upload-del" role="button" tabindex="0" data-id="' + it.id + '">×</button>' +
        '</div>';
      }).join('');
    }
    list.addEventListener('click', function (e) {
      var del = e.target.closest('[data-id]');
      if (del) { files = files.filter(function (x) { return x.id !== del.dataset.id; }); render(); }
    });
  </script>
</body>
</html>
