{extend name="common/layout" /}
{block name="title"}文件管理{/block}
{block name="css"}
<link href="{$static}/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<style>
.file-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--bs-tertiary-bg); }
.file-url-link {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.file-scan-bar {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: .375rem;
  background: #fff8e6;
  border: 1px solid #f0dfa0;
  color: #7a5b00;
  font-size: 13px;
}
.file-scan-bar.is-on { display: flex; }
.file-scan-bar strong { color: #5c4500; }
.file-upload-bar {
  display: none;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: .375rem;
  background: var(--bs-tertiary-bg, #f4f6f9);
  border: 1px solid var(--bs-border-color, #eaeff5);
  font-size: 13px;
}
.file-upload-bar.is-on { display: block; }
.file-upload-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--bs-body-color);
}
.file-upload-bar-head .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.file-upload-bar-head .pct { flex-shrink: 0; font-weight: 600; color: var(--bs-primary); }
.file-upload-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), .12);
  overflow: hidden;
}
.file-upload-track > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--bs-primary);
  transition: width .15s ease;
}
.file-upload-bar.is-cloud .pct { color: var(--bs-warning); }
.file-upload-bar.is-cloud .file-upload-track > i { background: var(--bs-warning); }
</style>
{/block}
{block name="content"}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <div class="row align-items-center g-2">
          <div class="col"><h4 class="card-title mb-0">文件管理</h4></div>
          <div class="col-auto">
            <div class="d-flex flex-wrap gap-2">
              <label class="btn btn-primary btn-sm mb-0" id="btn-upload-label">
                <i class="ri-upload-2-line"></i> <span id="btn-upload-text">上传文件</span>
                <input type="file" id="file-input" style="display:none;" multiple>
              </label>
              <button type="button" class="btn btn-warning btn-sm" id="btn-scan-unused"><i class="ri-search-line"></i> 检测未引用</button>
              <button type="button" class="btn btn-light btn-sm" id="btn-select-unused" style="display:none;">全选当前页</button>
              <button type="button" class="btn btn-danger btn-sm" id="btn-delete-all-unused" style="display:none;">删除全部未引用</button>
              <button type="button" class="btn btn-light btn-sm" id="btn-exit-scan" style="display:none;">显示全部</button>
              <button type="button" class="btn btn-danger btn-sm" id="btn-delete"><i class="ri-delete-bin-line"></i> 删除</button>
              <button type="button" class="btn btn-light btn-sm" id="btn-refresh"><i class="ri-refresh-line"></i> 刷新</button>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <form class="row g-2 admin-toolbar mb-3" id="search-form">
          <div class="col-md-4 col-lg-3">
            <input type="text" class="form-control form-control-sm" name="keyword" placeholder="文件名/路径">
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-primary btn-sm" id="btn-search">搜索</button>
          </div>
        </form>
        <div class="file-upload-bar" id="upload-bar" aria-live="polite">
          <div class="file-upload-bar-head">
            <span class="name" id="upload-name">准备上传…</span>
            <span class="pct" id="upload-pct">0%</span>
          </div>
          <div class="file-upload-track"><i id="upload-track"></i></div>
        </div>
        <div class="file-scan-bar" id="scan-bar">
          <strong>未引用检测</strong>
          <span id="scan-summary">—</span>
        </div>
        <table id="data-table"></table>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script src="{$static}/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="{$static}/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script>
var $table = $('#data-table');
var imgExt = ['jpg','jpeg','png','gif','webp','bmp'];
var scanMode = false;
var unusedIds = [];

function updateScanBar(meta) {
  if (!meta) {
    $('#scan-bar').removeClass('is-on');
    $('#scan-summary').text('—');
    return;
  }
  var timeText = meta.time ? new Date(meta.time * 1000).toLocaleString() : '';
  $('#scan-bar').addClass('is-on');
  $('#scan-summary').text(
    '共 ' + (meta.total || 0) + ' 个附件，已引用 ' + (meta.referenced || 0) + ' 个，未引用 ' + (meta.unused || 0) + ' 个'
    + (timeText ? ' · 检测于 ' + timeText : '')
  );
}

function setScanMode(on) {
  scanMode = !!on;
  $('#btn-select-unused').toggle(scanMode);
  $('#btn-exit-scan').toggle(scanMode);
  $('#btn-delete-all-unused').toggle(scanMode && unusedIds.length > 0);
  if (!scanMode) {
    unusedIds = [];
    updateScanBar(null);
  }
}

$table.bootstrapTable(AdminPage.tableDefaults({
    url: "{:url('/admin/file/list')}",
    queryParams: function (params) {
        var q = AdminPage.queryFromForm('#search-form', params);
        if (scanMode) {
            q.unused_only = 1;
            if (unusedIds.length) {
                q.unused_ids = unusedIds.join(',');
            }
        }
        return q;
    },
    responseHandler: function (res) {
        if (res.scan_meta) {
            if (!scanMode || !unusedIds.length) {
                unusedIds = (res.scan_meta.unused_ids || []).slice();
            }
            updateScanBar(res.scan_meta);
            $('#btn-delete-all-unused').toggle(scanMode && unusedIds.length > 0);
        }
        return { total: res.total || 0, rows: res.rows || [] };
    },
    columns: [
        { checkbox: true },
        { field: 'url', title: '预览', width: 70, formatter: function (v, row) {
            if (imgExt.indexOf((row.ext||'').toLowerCase()) > -1) {
                return '<img class="file-thumb" src="'+v+'" alt="">';
            }
            return '<i class="ri-file-line" style="font-size:1.75rem"></i>';
        }},
        { field: 'name', title: '文件名' },
        { field: 'ext', title: '类型', width: 70 },
        { field: 'size', title: '大小', width: 90, formatter: function (v) {
            if (v < 1024) return v + ' B';
            if (v < 1048576) return (v/1024).toFixed(1) + ' KB';
            return (v/1048576).toFixed(2) + ' MB';
        }},
        { field: 'url', title: '地址', width: 280, class: 'file-url-cell', formatter: function (v) {
            var href = String(v || '');
            var shown = href.length > 48 ? href.slice(0, 48) + '…' : href;
            return '<a class="file-url-link" href="'+href+'" target="_blank" rel="noopener noreferrer" title="'+href.replace(/"/g, '&quot;')+'">'+shown+'</a>';
        }},
        { field: 'create_time', title: '上传时间', width: 160 },
        { field: 'operate', title: '操作', width: 90, formatter: function (v, row) {
            return '<button type="button" class="btn btn-sm btn-danger" onclick="del('+row.id+')">删除</button>';
        }}
    ]
}));
$('#btn-search,#btn-refresh').on('click', function () { $table.bootstrapTable('refresh'); });

var uploading = false;
function formatSize(v) {
  v = Number(v) || 0;
  if (v < 1024) return v + ' B';
  if (v < 1048576) return (v / 1024).toFixed(1) + ' KB';
  return (v / 1048576).toFixed(2) + ' MB';
}
function setUploadUi(on, name, pct, phase) {
  var $bar = $('#upload-bar');
  if (!on) {
    $bar.removeClass('is-on is-cloud');
    $('#btn-upload-label').removeClass('disabled').css('pointer-events', '');
    $('#btn-upload-text').text('上传文件');
    $('#file-input').prop('disabled', false);
    return;
  }
  $bar.addClass('is-on');
  if (phase === 'cloud') $bar.addClass('is-cloud');
  else $bar.removeClass('is-cloud');
  $('#upload-name').text(name || '上传中…');
  var p = Math.max(0, Math.min(100, pct || 0));
  $('#upload-pct').text(phase === 'cloud' ? '云端转存中…' : (p + '%'));
  $('#upload-track').css('width', (phase === 'cloud' ? 100 : p) + '%');
  $('#btn-upload-label').addClass('disabled').css('pointer-events', 'none');
  $('#btn-upload-text').text('上传中');
  $('#file-input').prop('disabled', true);
}
function uploadOne(file, idx, total) {
  return new Promise(function (resolve) {
    var fd = new FormData();
    fd.append('file', file);
    var label = (total > 1 ? ('(' + (idx + 1) + '/' + total + ') ') : '') + (file.name || '未命名');
    setUploadUi(true, label + ' · ' + formatSize(file.size), 0, 'up');

    $.ajax({
      url: "{:url('/admin/file/upload')}",
      type: 'POST',
      data: fd,
      processData: false,
      contentType: false,
      xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
          xhr.upload.addEventListener('progress', function (ev) {
            if (!ev.lengthComputable) return;
            var p = Math.max(1, Math.min(99, Math.round(ev.loaded / ev.total * 100)));
            setUploadUi(true, label + ' · ' + formatSize(file.size), p, 'up');
          });
          xhr.upload.addEventListener('load', function () {
            setUploadUi(true, label + ' · 写入储存…', 100, 'cloud');
          });
        }
        return xhr;
      },
      success: function (res) {
        if (res && res.code === 1) {
          AdminUI.notify((file.name || '文件') + ' 上传成功', 'success');
          resolve(true);
        } else {
          AdminUI.notify((res && res.msg) || '上传失败', 'danger');
          resolve(false);
        }
      },
      error: function (xhr) {
        var msg = '上传失败';
        if (xhr.status === 413) msg = '文件过大，被服务器拒绝';
        else if (xhr.status === 502 || xhr.status === 504) msg = '服务器超时 (' + xhr.status + ')';
        else if (xhr.status >= 500) msg = '服务器错误 (' + xhr.status + ')';
        else if (xhr.responseJSON && xhr.responseJSON.msg) msg = xhr.responseJSON.msg;
        AdminUI.notify(msg, 'danger');
        resolve(false);
      }
    });
  });
}
$('#file-input').on('change', function () {
  var files = Array.prototype.slice.call(this.files || []);
  this.value = '';
  if (!files.length || uploading) return;
  uploading = true;
  var i = 0;
  var ok = 0;
  function next() {
    if (i >= files.length) {
      uploading = false;
      setUploadUi(false);
      if (ok > 0) $table.bootstrapTable('refresh');
      return;
    }
    var cur = i;
    uploadOne(files[cur], cur, files.length).then(function (success) {
      if (success) ok++;
      i++;
      next();
    });
  }
  next();
});
$('#btn-scan-unused').on('click', function () {
    var $btn = $(this).prop('disabled', true);
    $.post("{:url('/admin/file/scan')}", {}, function (res) {
        $btn.prop('disabled', false);
        if (res.code !== 1) {
            AdminUI.result(res);
            return;
        }
        var data = res.data || {};
        unusedIds = (data.unused_ids || []).slice();
        setScanMode(true);
        updateScanBar({
            total: data.total || 0,
            referenced: data.referenced || 0,
            unused: data.unused || 0,
            time: Math.floor(Date.now() / 1000)
        });
        AdminUI.notify('检测完成：发现 ' + (data.unused || 0) + ' 个未引用附件', (data.unused || 0) > 0 ? 'warning' : 'success');
        $('#btn-delete-all-unused').toggle((data.unused || 0) > 0);
        $table.bootstrapTable('refresh', { pageNumber: 1 });
    }, 'json').fail(function (xhr) {
        $btn.prop('disabled', false);
        var msg = '检测失败，请稍后重试';
        if (xhr.responseJSON && xhr.responseJSON.msg) {
            msg = xhr.responseJSON.msg;
        } else if (xhr.status === 403) {
            msg = '没有权限执行检测（需文件管理权限）';
        } else if (xhr.status === 401) {
            msg = '登录已过期，请重新登录';
        } else if (xhr.status === 404) {
            msg = '检测接口不存在，请确认已部署最新 File.php 与 AttachmentReferenceService.php';
        } else if (xhr.status >= 500) {
            msg = '服务器错误（' + xhr.status + '），请查看 runtime/log 日志';
        }
        AdminUI.notify(msg, 'danger');
    });
});
$('#btn-select-unused').on('click', function () {
    if (!unusedIds.length) {
        AdminUI.notify('当前没有未引用文件', 'info');
        return;
    }
    $table.bootstrapTable('uncheckAll');
    $table.bootstrapTable('checkBy', { field: 'id', values: unusedIds });
    AdminUI.notify('已选中当前页中的未引用文件', 'success');
});
$('#btn-delete-all-unused').on('click', function () {
    if (!unusedIds.length) {
        AdminUI.notify('当前没有未引用文件', 'info');
        return;
    }
    AdminUI.confirm('确认删除全部 ' + unusedIds.length + ' 个未引用文件？此操作不可恢复。', function () {
        $.post("{:url('/admin/file/delete')}", { ids: unusedIds }, function (res) {
            AdminUI.result(res);
            if (res.code !== 1) return;
            $.post("{:url('/admin/file/scan')}", {}, function (scanRes) {
                if (scanRes.code === 1 && scanRes.data) {
                    unusedIds = (scanRes.data.unused_ids || []).slice();
                    updateScanBar({
                        total: scanRes.data.total || 0,
                        referenced: scanRes.data.referenced || 0,
                        unused: scanRes.data.unused || 0,
                        time: Math.floor(Date.now() / 1000)
                    });
                    $('#btn-delete-all-unused').toggle(unusedIds.length > 0);
                }
                $table.bootstrapTable('refresh', { pageNumber: 1 });
            }, 'json');
        }, 'json');
    });
});
$('#btn-exit-scan').on('click', function () {
    setScanMode(false);
    $table.bootstrapTable('refresh', { pageNumber: 1 });
});
$('#btn-delete').on('click', function () {
    var rows = $table.bootstrapTable('getSelections');
    if (!rows.length) { AdminUI.notify('请选择文件', 'warning'); return; }
    var tip = scanMode ? '确认删除选中的未引用文件？此操作不可恢复。' : '确认删除？';
    AdminUI.confirm(tip, function () {
        $.post("{:url('/admin/file/delete')}", { ids: rows.map(function (r) { return r.id; }) }, function (res) {
            AdminUI.result(res);
            if (res.code === 1) {
                if (scanMode) {
                    $.post("{:url('/admin/file/scan')}", {}, function (scanRes) {
                        if (scanRes.code === 1 && scanRes.data) {
                            unusedIds = (scanRes.data.unused_ids || []).slice();
                            updateScanBar({
                                total: scanRes.data.total || 0,
                                referenced: scanRes.data.referenced || 0,
                                unused: scanRes.data.unused || 0,
                                time: Math.floor(Date.now() / 1000)
                            });
                        }
                        $table.bootstrapTable('refresh');
                    }, 'json');
                } else {
                    $table.bootstrapTable('refresh');
                }
            }
        }, 'json');
    });
});
function del(id) {
    AdminUI.confirm('确认删除？', function () {
        $.post("{:url('/admin/file/delete')}", { id: id }, function (res) {
            AdminUI.result(res); if (res.code === 1) $table.bootstrapTable('refresh');
        }, 'json');
    });
}
</script>
{/block}