{extend name="base" /}
{block name="title"}附件回收站{/block}
{block name="main"}
<div class="layui-layout layui-layout-admin">
    {include file="public/menu" /}

    <div class="layui-body" style="overflow-y: auto;">
        <div class="royal-content-main">
            <div class="royal-toolbar">
                <div class="layui-btn-group">
                    <a href="{:url('file/index')}" class="layui-btn layui-btn-green">
                        <i class="layui-icon layui-icon-return"></i> 返回文件管理
                    </a>
                    <button class="layui-btn layui-btn-normal" id="btn-batch-restore" style="display: none;">
                        <i class="layui-icon layui-icon-refresh"></i> 批量恢复
                    </button>
                    <button class="layui-btn layui-btn-danger" id="btn-clear-recycle">
                        <i class="layui-icon layui-icon-delete"></i> 清空回收站
                    </button>
                </div>
            </div>
 
            {if empty($fileList)}
            <div class="layui-empty-data">
                <i class="layui-icon layui-icon-face-surprised"></i>
                <div>回收站是空的</div>
                <p>没有找到任何已删除的文件或文件夹</p>
            </div>
            {else}
            <div class="layui-form royal-file-table">
                <table class="layui-table" lay-skin="line">
                    <colgroup>
                        <col width="5%">
                        <col width="35%">
                        <col width="10%">
                        <col width="15%">
                        <col width="20%">
                        <col width="12%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" lay-skin="primary" lay-filter="allSelect" id="select-all">
                            </th>
                            <th>文件名</th>
                            <th class="text-center">大小</th>
                            <th class="text-center">类型</th>
                            <th class="text-center">删除时间</th>
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {volist name="fileList" id="item"}
                        <tr>
                            <td>
                                <input type="checkbox" class="item-checkbox" value="{$item.id}" 
                                    data-id="{$item.id}" lay-skin="primary" lay-filter="itemSelect">
                            </td>
                            <td>
                                <div class="file-item">
                                    {if $item.isDir}
                                    <i class="layui-icon layui-icon-folder file-icon"></i>
                                    <span class="file-name">{$item.name}</span>
                                    {else}
                                    {if $item.isImage}
                                    <div class="file-thumbnail">
                                        <img src="{$item.fileUrl}" alt="{$item.name}" class="thumbnail-img">
                                        <span class="file-name">{$item.name}</span>
                                    </div>
                                    {else}
                                    <div class="file-info">
                                        <i class="layui-icon {$item.icon} file-icon"></i>
                                        <span class="file-name">{$item.name}</span>
                                    </div>
                                    {/if}
                                    {/if}
                                </div>
                            </td>
                            <td class="text-center">{$item.size}</td>
                            <td class="text-center">{$item.type}</td>
                            <td class="text-center">{$item.deletedAt}</td>
                            <td class="text-center">
                                <div class="layui-btn-group">
                                    <button class="layui-btn layui-btn-xs layui-btn-normal restore-btn" data-id="{$item.id}">
                                        <i class="layui-icon layui-icon-refresh"></i> 恢复
                                    </button>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger delete-btn" data-id="{$item.id}">
                                        <i class="layui-icon layui-icon-delete"></i> 销毁
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {/volist}
                    </tbody>
                </table>
            </div>
            {/if}
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
<script>
layui.use(['layer', 'jquery', 'form'], function() {
    const layer = layui.layer;
    const $ = layui.$;
    const form = layui.form;
    
    // 初始化表单
    form.render();
    
    // 显示/隐藏批量恢复按钮
    function toggleBatchRestoreButton() {
        const selectedCount = $('.item-checkbox:checked').length;
        if (selectedCount > 0) {
            $('#btn-batch-restore').show().html(`<i class="layui-icon layui-icon-refresh"></i>恢复选中项(${selectedCount})`);
        } else {
            $('#btn-batch-restore').hide();
        }
    }
    
    // 全选/反选监听
    form.on('checkbox(allSelect)', function(data) {
        $('.item-checkbox').prop('checked', data.elem.checked);
        form.render('checkbox');
        toggleBatchRestoreButton();
    });
    
    // 单项选择监听
    form.on('checkbox(itemSelect)', toggleBatchRestoreButton);
    
    // 批量恢复功能
    $('#btn-batch-restore').on('click', function() {
        const selectedItems = [];
        $('.item-checkbox:checked').each(function() {
            selectedItems.push($(this).data('id'));
        });
        
        if (selectedItems.length === 0) return;
        
        layer.confirm(`确定要恢复选中的 <b>${selectedItems.length}</b> 个文件/文件夹吗？`, {
            title: '批量恢复确认',
            btn: ['确认恢复', '取消'],
            icon: 3,
            skin: 'layui-layer-lan', 
        }, function(index) {
            layer.close(index);
            
            const loading = layer.load(2);
            $.post('{:url("file/restoreBatchFiles")}', {
                ids: selectedItems.join(',')
            }, function(res) {
                layer.close(loading);
                if (res.code === 0) {
                    layer.msg(`成功恢复 ${res.count} 项`, { icon: 1 });
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    layer.msg(res.msg || '操作失败', { icon: 2 });
                }
            }).fail(function() {
                layer.close(loading);
                layer.msg('请求失败，请检查网络', { icon: 2 });
            });
        });
    });
    
    // 单个恢复按钮
    $('.restore-btn').on('click', function() {
        const id = $(this).data('id');
        layer.confirm('确定恢复该文件/文件夹吗？', {
            title: '恢复确认',
            btn: ['确认恢复', '取消'],
            icon: 3,
            skin: 'layui-layer-lan', 
        }, function(index) {
            layer.close(index);
            $.post('{:url("file/restoreFile")}', {
                id: id
            }, function(res) {
                if (res.code === 0) {
                    layer.msg('恢复成功', {icon: 1});
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    layer.msg(res.msg || '恢复失败', {icon: 2});
                }
            });
        });
    });
    
    // 永久删除按钮
    $('.delete-btn').on('click', function() {
        const id = $(this).data('id');
        layer.confirm('确定永久删除该文件/文件夹吗？<br>此操作不可恢复！', {
            title: '永久删除确认',
            btn: ['确认删除', '取消'],
            icon: 3,
            skin: 'layui-layer-red', 
        }, function(index) {
            layer.close(index);
            $.post('{:url("file/permanentDelete")}', {
                id: id
            }, function(res) {
                if (res.code === 0) {
                    layer.msg('永久删除成功', {icon: 1});
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    layer.msg(res.msg || '删除失败', {icon: 2});
                }
            });
        });
    });
    
    // 清空回收站
    $('#btn-clear-recycle').on('click', function() {
        layer.confirm('确定清空回收站吗？<br>此操作不可恢复！', {
            title: '清空回收站确认',
            btn: ['确认清空', '取消'],
            icon: 3,
            skin: 'layui-layer-red', 
        }, function(index) {
            layer.close(index);
            $.post('{:url("file/clearRecycleBin")}', function(res) {
                if (res.code === 0) {
                    layer.msg('回收站已清空', {icon: 1});
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    layer.msg(res.msg || '清空失败', {icon: 2});
                }
            });
        });
    });
});
</script>
<style>
 
    /* 工具栏样式 */
    .royal-toolbar {
        margin-bottom: 15px; 
    }
    
    /* 卡片样式 */
 
    .royal-notice-card .layui-card-header {
        background-color: #f8f8f8;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #eee;
    }
    
    .royal-notice-card .layui-card-body {
        padding: 15px;
        color: #666;
        line-height: 1.6;
    }
    
    /* 文件项样式 */
    .file-item {
        display: flex;
        align-items: center;
    }
    
    .file-icon {
        font-size: 20px;
        margin-right: 10px;
        color: #01AAED;
    }
    
    .file-name {
        word-break: break-all; 
    }
    
    .file-thumbnail {
        display: flex;
        align-items: center;
    }
    
    .thumbnail-img {
        width: 30px;
        max-height: 20px;
        margin-right: 10px; 
        object-fit: cover;
    }
    
    /* 空数据提示 */
    .layui-empty-data {
        text-align: center;
        padding: 60px 0;
        color: #999;
        background: #fff;
        border-radius: 5px;
        margin-top: 15px;
    }
    
    .layui-empty-data i {
        font-size: 48px;
        margin-bottom: 15px;
        color: #c2c2c2;
    }
    
 
    
    .royal-file-table .layui-table {
        margin: 0;
    }
    
    .royal-file-table .layui-table thead {
        background-color: #f8f8f8;
    }
    
    .royal-file-table .layui-table tbody tr:hover {
        background-color: #fafafa;
    }
    
    /* 表格居中 */
    .text-center {
        text-align: center;
    }
 
</style>
{/block}