{include file="app/manage/view/index/emlog_nav"}

<h1 class="page-title">
    <i class="fas fa-sync-alt"></i>
    缓存管理
    <span class="badge badge-info ml-2">全站缓存占用：{$allSize}</span>
</h1>

<div class="alert alert-secondary">
    <i class="fas fa-info-circle mr-1"></i> 可单独清理某一类缓存，或点击右上角「一键全站清理」一次性清空所有缓存（模板/数据库/数据/API接口/全站静态）。<br>
    <span class="text-muted">「API接口缓存」缓存了大牌/风云榜/品牌商品等外部接口返回，清理后可立即拉取最新数据（搜索、转链、商品详情等实时接口不缓存）。</span>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-list-alt"></i> 缓存类型</h5>
        <button class="btn btn-sm btn-danger" onclick="cacheClear('all')">
            <i class="fas fa-broom mr-1"></i> 一键全站清理
        </button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="thead-light">
                    <tr>
                        <th>缓存类型</th>
                        <th>文件数</th>
                        <th>占用空间</th>
                        <th class="text-right">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $cacheList as $c}
                    <tr>
                        <td>{$c['name']}</td>
                        <td>{$c['count']}</td>
                        <td>{$c['size']}</td>
                        <td class="text-right">
                            <button class="btn btn-sm btn-outline-primary" onclick="cacheClear('{$c['key']}')">
                                <i class="fas fa-trash-alt mr-1"></i> 清理
                            </button>
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

{include file="app/manage/view/index/emlog_footer"}

<script>
function cacheClear(type) {
    var tip = type === 'all' ? '确定要一键清理全站缓存吗？' : '确定要清理该缓存吗？';
    if (!confirm(tip)) return;
    var btn = event ? event.target : null;
    if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 清理中...'; }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'index.php?r=manage/cache/clear&type=' + type, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== 4) return;
        if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fas fa-trash-alt mr-1"></i> 清理'; }
        if (xhr.status !== 200) { showToast('请求失败，请重试', 'danger'); return; }
        try {
            var res = JSON.parse(xhr.responseText);
            if (res && res.status === 'y') {
                showToast(res.info, 'success');
                setTimeout(function(){ location.reload(); }, 900);
            } else {
                showToast((res && res.info) ? res.info : '清理失败', 'danger');
            }
        } catch(e) {
            showToast('清理失败', 'danger');
        }
    };
    xhr.send();
}

function showToast(message, type = 'success') {
    var toast = document.createElement('div');
    toast.className = 'toast align-items-center text-white bg-' + type + ' border-0 position-fixed show';
    toast.setAttribute('role', 'alert');
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 250px; opacity: 1; transition: opacity .3s ease;';
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} mr-2"></i>
                ${message}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="this.parentElement.parentElement.remove()"></button>
        </div>
    `;
    document.body.appendChild(toast);
    setTimeout(function() {
        toast.style.opacity = '0';
        setTimeout(function() { if(toast.parentNode) toast.parentNode.removeChild(toast); }, 350);
    }, 3000);
}
</script>