{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">
            <!-- 当前路径存储 -->
            <input type="hidden" id="current-path" value="{$currentPath}">

            <!-- 工具栏 -->
            <div class="royal-toolbar">
                <div class="layui-btn-group">
                    <!-- 返回上级 -->
                    {if $parentPath}
                    <a href="{:url('file/index', ['path' => $parentPath])}" class="layui-btn layui-btn-primary">
                        <i class="layui-icon layui-icon-left"></i>返回上级
                    </a>
                    {/if}

                    <!-- 新建文件夹 -->
                    <button class="layui-btn" id="btn-create-folder">
                        <i class="layui-icon layui-icon-add-folder"></i>新建文件夹
                    </button>

                    <!-- 上传文件 -->
                    <button class="layui-btn layui-btn-normal" id="btn-upload">
                        <i class="layui-icon layui-icon-upload"></i>上传文件
                    </button>

                    <!-- 批量删除按钮 -->
                    <button class="layui-btn layui-btn-danger" id="btn-delete-batch" style="display: none;">
                        <i class="layui-icon layui-icon-delete"></i>批量删除
                    </button>

                    <!-- 回收站 -->
                    <a href="{:url('file/recycle')}" class="layui-btn layui-btn-warm" style="float: right;">
                        <i class="layui-icon layui-icon-delete"></i>回收站
                    </a>
                </div>
            </div>

            <!-- 文件列表表格 -->
            <div class="royal-file-table">
                {if empty($fileList)}
                <div class="layui-empty-data">
                    <i class="layui-icon layui-icon-file-open"></i>
                    <div>当前目录为空</div>
                    <p>可以上传文件或创建新文件夹</p>
                </div>
                {else}
                <div class="layui-form">
                    <table class="layui-table" lay-skin="line">
                        <colgroup>
                            <col width="5%">
                            <col width="400">
                            <col width="120">
                            <col width="180">
                            <col width="120">
                            <col width="80">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="select-all" lay-skin="primary" lay-filter="allSelect">
                                </th>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>修改时间</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {volist name="fileList" id="file"}
                            <tr data-full-path="{$file.fullPath}">
                                <td>
                                    <input type="checkbox" class="file-checkbox" data-name="{$file.name}" 
                                        data-path="{$file.path}" data-type="{$file.type}" 
                                        lay-skin="primary" lay-filter="itemSelect">
                                </td>
                                <td>
                                    {if $file.isDir}
                                    <div class="file-item">
                                        <i class="layui-icon {$file.icon}" style="color: #01AAED; font-size: 20px;margin-right: 5px;"></i>
                                        <a href="{:url('file/index', ['path' => urlencode($file.relativePath)])}">
                                            {$file.name}
                                        </a>
                                    </div>
                                    {else}
                                    <!-- 图片文件显示缩略图 -->
                                    {if $file.isImage}
                                    <div class="file-thumbnail">
                                        <a href="javascript:void(0);" class="file-preview" data-url="{$file.preview}">
                                            <img src="{$file.fileUrl}" alt="{$file.name}" class="thumbnail-img">
                                        </a>
                                        <div class="file-name">
                                            {if $file.preview}
                                            <a href="javascript:void(0);" class="file-preview" data-url="{$file.preview}">
                                                {$file.name}
                                            </a>
                                            {else}
                                            <span>{$file.name}</span>
                                            {/if}
                                        </div>
                                    </div>
                                    {else}
                                    <div class="file-item">
                                        <i class="layui-icon {$file.icon}" style="color: #666; font-size: 24px; margin-right: 10px;"></i>
                                        <div class="file-name">
                                            {if $file.preview}
                                            <a href="javascript:void(0);" class="file-preview" data-url="{$file.preview}">
                                                {$file.name}
                                            </a>
                                            {else}
                                            <span>{$file.name}</span>
                                            {/if}
                                        </div>
                                    </div>
                                    {/if}
                                    {/if}
                                </td>
                                <td>{$file.size}</td>
                                <td>{$file.mtime}</td>
                                <td>{$file.type}</td>
                                <td>
                                    <div class="layui-btn-group">
                                        <button class="layui-btn layui-btn-xs rename-btn" data-path="{$file.path}"
                                            data-name="{$file.name}">
                                            重命名
                                        </button>
                                        <button class="layui-btn layui-btn-xs layui-btn-danger delete-btn"
                                            data-path="{$file.path}" data-name="{$file.name}">
                                            删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {/volist}
                        </tbody>
                    </table>
                </div>
                {/if}
            </div>
        </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 toggleBatchDeleteButton() {
            const selectedCount = $('.file-checkbox:checked').length;
            if (selectedCount > 0) {
                $('#btn-delete-batch').show();
                $('#btn-delete-batch').html(`<i class="layui-icon layui-icon-delete"></i>删除选中项(${selectedCount})`);
            } else {
                $('#btn-delete-batch').hide();
            }
        }

        // 全选/反选监听
        form.on('checkbox(allSelect)', function(data){
            $('.file-checkbox').prop('checked', data.elem.checked);
            form.render('checkbox');
            toggleBatchDeleteButton();
        });

        // 单项选择监听
        form.on('checkbox(itemSelect)', toggleBatchDeleteButton);

        // 批量删除 
        $('#btn-delete-batch').on('click', function () {
            const selectedPaths = [];
            $('.file-checkbox:checked').each(function () {
                // 获取当前行的完整路径
                const fullPath = $(this).closest('tr').data('full-path');
                selectedPaths.push(fullPath);
            });

            if (selectedPaths.length === 0) return;
            
            layer.confirm(`确定删除选中的 ${selectedPaths.length} 个文件？`, {
                skin: 'layui-layer-red',
                btn: ['确认删除', '取消'],
                icon: 3,
                area: ['420px', 'auto']
            }, function (index) {
                layer.close(index);
                
                const loading = layer.load(2);
                $.post('{:url("file/deleteBatchFiles")}', {
                    paths: selectedPaths.join(',')  // 发送完整路径
                }, function (res) {
                    layer.close(loading);
                    if (res.code === 0) {
                        layer.msg(`已删除 ${res.count} 个文件`, { icon: 1 });
                        setTimeout(() => location.reload(), 1500);
                    } else {
                        layer.msg(res.msg || '删除失败', { icon: 2 });
                    }
                }).fail(function() {
                    layer.close(loading);
                    layer.msg('请求失败，请检查网络', { icon: 2 });
                });
            });
        });
   
// 优化版重命名函数（美化输入框）
function renameFile(path, name) {
    layer.open({
        type: 1,
        title: '重命名文件',
        content: '<div style="padding:20px;">' +
                 '<input type="text" id="new-file-name" value="' + name + '" ' +
                 'class="layui-input royal-rename-input" placeholder="请输入新名称">' +
                 '</div>',
        area: ['360px', '200px'],
        skin: 'layui-layer-lan',
        btn: ['确定', '取消'],
        success: function(layero, index) {
            // 自动聚焦并全选文本
            $('#new-file-name').focus().select();
        },
        yes: function(index, layero) {
            const value = $('#new-file-name').val().trim();
            
            // 基本验证
            if (!value || value === name) {
                layer.msg('新名称不能为空或与原名相同', {icon: 2});
                return;
            }
            
            // 显示加载状态
            const loading = layer.load(1);
            
            // 发送请求
            $.post('{:url("file/rename")}', {
                path: path,
                oldName: name,
                newName: value
            }, function(res) {
                layer.close(loading);
                
                if (res.code === 0) {
                    layer.msg('重命名成功', {icon: 1});
                    setTimeout(() => window.location.reload(), 1000);
                    layer.close(index);
                } else {
                    layer.msg(res.msg || '操作失败', {icon: 2});
                }
            }).fail(() => {
                layer.close(loading);
                layer.msg('请求失败，请检查网络', {icon: 2});
            });
        }
    });
}

 
// 删除文件/文件夹
        function deleteFile(path, name, type) {
            const isFolder = type === '文件夹';
            const tips = isFolder ?
                `<p style="color:#ff5722;">警告：文件夹及其所有内容将被删除</p>
             <p>删除后可以在回收站恢复</p>` :
                '<p>删除后可以在回收站恢复</p>';

            layer.confirm(tips, {
                title: `删除${isFolder ? '文件夹' : '文件'} "${name}"?`,
                btn: ['确认删除', '取消'],
                icon: 3,
                skin: 'layui-layer-red',
                area: ['420px', 'auto']
            }, function (index) {
                layer.close(index);

                const loading = layer.load(2);
                $.post('{:url("file/deleteFile")}', {
                    path: path,
                    name: name
                }, function (res) {
                    layer.close(loading);
                    if (res.code === 0) {
                        layer.msg('删除成功', { icon: 1 });
                        setTimeout(() => window.location.reload(), 1000);
                    } else {
                        layer.msg(res.msg || '操作失败', { icon: 2 });
                    }
                });
            });
        }

        // 新建文件夹（美化版弹窗）
        function createFolder() {
            layer.open({
                type: 1,
                title: '<i class="layui-icon layui-icon-add-folder"></i> 新建文件夹',
                content: '<div style="padding:20px;">' +
                    '<input type="text" id="folder-name" placeholder="请输入文件夹名称" class="layui-input">' +
                    '</div>',
                area: ['360px', '200px'],
                skin: 'layui-layer-lan',
                btn: ['创建', '取消'],
                success: function (layero, index) {
                    // 自动聚焦输入框
                    $('#folder-name').focus();
                },
                yes: function (index, layero) {
                    const value = $('#folder-name').val().trim();

                    if (!value) {
                        layer.msg('文件夹名称不能为空', { icon: 2 });
                        return;
                    }

                    if (value.includes('/') || value.includes('\\') ||
                        value.includes(':') || value.includes('*') ||
                        value.includes('?') || value.includes('"') ||
                        value.includes('<') || value.includes('>') ||
                        value.includes('|')) {
                        layer.msg('文件夹名称不能包含特殊字符', { icon: 2 });
                        return;
                    }

                    const loading = layer.load(1);
                    $.post('{:url("file/createFolder")}', {
                        path: '{$currentPath}',
                        name: value
                    }, function (res) {
                        layer.close(loading);
                        if (res.code === 0) {
                            layer.msg('文件夹创建成功', { icon: 1 });
                            setTimeout(() => window.location.reload(), 1000);
                            layer.close(index);
                        } else {
                            layer.msg(res.msg || '操作失败', { icon: 2 });
                        }
                    });
                }
            });
        }

        // 文件上传（添加了上传格式提示）
        function uploadFile() {
            // 显示上传提示
            layer.alert('<p>支持上传以下文件：</p>' +
                '<div style="padding:10px;">' +
                '  <p>图片：jpg, jpeg, png, gif, bmp, webp</p>' +
                '  <p>文档：pdf, doc, docx, xls, xlsx, ppt, pptx, txt</p>' +
                '  <p>压缩包：zip, rar, 7z, tar</p>' +
                '</div>' +
                '<p style="color:#ff5722;">单个文件大小不能超过100MB</p>', {
                title: '上传文件格式要求',
                icon: 0,
                skin: 'layui-layer-lan', 
                btn: ['选择文件', '取消'],
                yes: function (index) {
                    layer.close(index);

                    const fileInput = $('<input type="file" multiple style="display: none;">');
                    $('body').append(fileInput);

                    fileInput.on('change', function () {
                        if (!this.files.length) return;

                        // 检查文件大小
                        let tooLarge = false;
                        const maxSize = 100 * 1024 * 1024; // 100MB
                        for (let i = 0; i < this.files.length; i++) {
                            if (this.files[i].size > maxSize) {
                                tooLarge = true;
                                break;
                            }
                        }

                        if (tooLarge) {
                            layer.msg('单个文件大小不能超过100MB', { icon: 2 });
                            return;
                        }

                        const formData = new FormData();
                        for (let i = 0; i < this.files.length; i++) {
                            formData.append('file[]', this.files[i]);
                        }

                        const loading = layer.load(2);
                        $.ajax({
                            url: '{:url("file/upload")}' + '?path=' + encodeURIComponent('{$currentPath}'),
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (res) {
                                layer.close(loading);
                                if (res.code === 0) {
                                    layer.msg('上传成功', { icon: 1 });
                                    setTimeout(() => window.location.reload(), 1000);
                                } else {
                                    layer.msg(res.msg || '上传失败', { icon: 2 });
                                }
                            },
                            error: function () {
                                layer.close(loading);
                                layer.msg('上传失败，请重试', { icon: 2 });
                            }
                        });
                    });

                    fileInput.click();
                }
            });
        }

        // 文件预览（支持图片放大）
        function previewFile(url) {
            // 图片文件使用大图预览
            layer.open({
                type: 1,
                title: '图片预览',
                area: ['50%', 'auto'],
                maxmin: true,
                content: '<div style="text-align:center;padding:20px;">' +
                    '  <img src="' + url + '" style="max-width:100%;max-height:100%;">' +
                    '</div>'
            });
        }

        // 初始化
        $(function () {
            // 绑定重命名事件
            $('.rename-btn').on('click', function () {
                const path = $(this).data('path');
                const name = $(this).data('name');
                renameFile(path, name);
            });

            // 绑定删除事件
            $('.delete-btn').on('click', function () {
                const path = $(this).data('path');
                const name = $(this).data('name');
                const type = $(this).closest('tr').find('.file-checkbox').data('type');
                deleteFile(path, name, type);
            });

            // 绑定预览事件
            $('.preview-btn, .file-preview').on('click', function () {
                const url = $(this).data('url');
                previewFile(url);
            });

            // 新建文件夹按钮
            $('#btn-create-folder').on('click', createFolder);

            // 上传文件按钮
            $('#btn-upload').on('click', uploadFile);
        });

        // 样式
        const style = document.createElement('style');
        style.innerHTML = `
 
        .royal-toolbar {
            margin-bottom: 15px; 
        }
        
        .layui-empty-data {
            text-align: center;
            padding: 80px 0;
            color: #999;
        }
        
        .layui-empty-data i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #c2c2c2;
        }
        
        .royal-toolbar .layui-btn {
            margin-right: 10px;
        }
        
        .file-item {
            display: flex;
            align-items: center;
        }
        
        .file-thumbnail {
            display: flex;
            align-items: center;
        }
        
        .thumbnail-img {
            width: 30px;
            max-height: 20px;
            margin-right: 10px; 
            object-fit: cover;
        }
        
        .file-name {
            word-break: break-all;
        }
        
        .royal-file-table .layui-table {
            border-radius: 5px;
            overflow: hidden; 
        }
        
        .royal-file-table .layui-table thead {
            background-color: #f8f8f8;
        }
        
        .royal-file-table .layui-table tbody tr:hover {
            background-color: #fafafa;
        }
    `;
        document.head.appendChild(style);
    });
</script>
{/block}