@extends('manager.layout.master')

@section('head')
    <style>
        .file-thumb { width: 60px; height: 45px; object-fit: cover; border-radius: 3px; cursor: pointer; border: 1px solid #eee; }
        .file-icon-cell { width: 60px; text-align: center; }
        .file-icon-cell i { font-size: 36px; color: #999; }
        .file-name-link { color: #333; cursor: pointer; }
        .file-name-link:hover { color: #1E9FFF; }
        .file-size-badge { display: inline-block; padding: 2px 8px; background: #f2f2f2; border-radius: 2px; font-size: 12px; color: #666; }
        .ref-tag { display: inline-block; padding: 1px 6px; background: #E6F7FF; color: #1890FF; border-radius: 2px; font-size: 12px; margin-right: 4px; }
        .no-ref-tag { display: inline-block; padding: 1px 6px; background: #FFF7E6; color: #FA8C16; border-radius: 2px; font-size: 12px; }
        .clean-btn { margin-left: 10px; }
        /* 操作列 */
        .table-op-col { white-space: nowrap; min-width: 160px; }
    </style>
@endsection

@section('body')
    <blockquote class="layui-elem-quote">
        文件管理 &nbsp;&nbsp;
        <small style="color:#999;">管理所有上传的文件，包括图片、文档等。可删除废弃文件释放空间。</small>
    </blockquote>

    {{-- 工具栏 --}}
    <div class="my-btn-box">
        <span class="fl">
            <a class="layui-btn layui-btn-danger" id="batchDelBtn" onclick="batchDel()" style="display:none;">
                <i class="layui-icon">&#xe640;</i>批量删除
            </a>
            <a class="layui-btn layui-btn-warm" id="batchCleanBtn" onclick="cleanFiles()">
                <i class="layui-icon">&#xe640;</i>清理废弃文件
            </a>
            <a class="layui-btn layui-btn-normal" id="pageReload" title="刷新">
                <i class="layui-icon layui-icon-refresh-1"></i> 刷新
            </a>
        </span>
        <span class="fr">
            <form class="layui-form layui-form-pane" action="" method="get">
                <span class="layui-form-label">搜索条件：</span>
                <div class="layui-input-inline">
                    <input type="text" name="keyword" value="{{$request->keyword}}" autocomplete="off" placeholder="文件名搜索" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <select name="type" lay-search>
                        <option value="">全部类型</option>
                        <option value="image" @if($request->type == 'image') selected @endif>图片</option>
                        <option value="document" @if($request->type == 'document') selected @endif>文档</option>
                        <option value="other" @if($request->type == 'other') selected @endif>其他</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="create_time" value="{{$request->create_time}}" autocomplete="off" placeholder="上传日期范围" class="layui-input" id="createTimeRange">
                </div>
                <button type="submit" class="layui-btn mgl-20">
                    <i class="layui-icon">&#xe615;</i> 查询
                </button>
            </form>
        </span>
    </div>

    {{-- 批量操作栏 --}}
    <div class="batch-bar" id="batchBar">
        <span>已选择 <strong class="selected-count" id="selectedCount">0</strong> 个文件</span>
        <span style="margin-left:20px;">
            <a class="layui-btn layui-btn-sm layui-btn-danger" onclick="batchDel()">批量删除</a>
            <a class="layui-btn layui-btn-sm" onclick="clearBatch()">取消选择</a>
        </span>
    </div>

    {{-- 表格 --}}
    <table class="layui-table" lay-skin="line">
        <thead>
            <tr>
                <th width="40">
                    <input type="checkbox" id="batchCheckAll" lay-skin="primary" title="">
                </th>
                <th width="70">预览</th>
                <th>文件名</th>
                <th width="90">文件大小</th>
                <th width="80">宽度</th>
                <th width="80">高度</th>
                <th width="120">关联业务</th>
                <th width="160">上传时间</th>
                <th width="180">操作</th>
            </tr>
        </thead>
        <tbody>
            @forelse($list as $vo)
                @php
                    $ext = strtolower(pathinfo($vo->file_name, PATHINFO_EXTENSION));
                    $isImage = in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'ico', 'webp']);

                    // 检查关联业务
                    $refs = [];
                    $configCount = \App\Models\Config::where('value', $vo->id)->count();
                    if ($configCount > 0) $refs[] = ['text' => '配置×'.$configCount, 'color' => '#722ED1', 'bg' => '#F9F0FF'];
                @endphp
                <tr>
                    <td>
                        <input type="checkbox" lay-skin="primary" value="{{$vo->id}}" class="batch-check">
                    </td>
                    <td>
                        @if($isImage)
                            <img src="{{$vo->url}}" class="file-thumb" onclick="ylImg('{{$vo->url}}', '{{$vo->file_name}}')" title="点击预览">
                        @else
                            <div class="file-icon-cell">
                                <i class="layui-icon">&#xe65b;</i>
                            </div>
                        @endif
                    </td>
                    <td>
                        <a class="file-name-link" href="{{$vo->url}}" target="_blank" title="{{$vo->file_name}}">
                            {{$vo->file_name}}
                        </a>
                    </td>
                    <td>
                        <span class="file-size-badge">{{$vo->file_size ? number_format($vo->file_size / 1024, 1) . ' KB' : '-'}}</span>
                    </td>
                    <td>{{$vo->width ?: '-'}}</td>
                    <td>{{$vo->height ?: '-'}}</td>
                    <td>
                        @if(count($refs) > 0)
                            @foreach($refs as $ref)
                                <span class="ref-tag" style="color:{{$ref['color']}};background:{{$ref['bg']}};">{{$ref['text']}}</span>
                            @endforeach
                        @else
                            <span class="no-ref-tag">未关联</span>
                        @endif
                    </td>
                    <td>{{$vo->create_time}}</td>
                    <td class="table-op-col">
                        <div class="btn-group">
                            @if($isImage)
                                <a class="layui-btn layui-btn-sm btn-icon btn-icon-view" title="预览" onclick="ylImg('{{$vo->url}}', '{{$vo->file_name}}')"><i class="layui-icon layui-icon-search"></i></a>
                            @else
                                <a class="layui-btn layui-btn-sm btn-icon btn-icon-view" title="查看" href="{{$vo->url}}" target="_blank"><i class="layui-icon layui-icon-link"></i></a>
                            @endif
                            @if(count($refs) > 0)
                                <a class="layui-btn layui-btn-sm btn-icon" style="background:#F3F4F6;color:#9CA3AF;cursor:not-allowed;" title="文件被业务引用，请先解除关联"><i class="layui-icon layui-icon-delete"></i></a>
                            @else
                                <a class="layui-btn layui-btn-sm btn-icon btn-icon-del" title="删除" onclick="delFile('{{route('fileManagerDel',['id'=>$vo->id])}}', '{{$vo->file_name}}')"><i class="layui-icon layui-icon-delete"></i></a>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="9" style="text-align:center;color:#999;">暂无文件</td></tr>
            @endforelse
        </tbody>
    </table>

    @include('manager.include.pageBtn')
@stop

@section('js')
    <script>
        // 日期范围选择器
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#createTimeRange',
                range: ' ~ ',
                format: 'yyyy-MM-dd'
            });
        });

        // 批量操作栏样式
        $('<style>')
            .text('.batch-bar { display: none; padding: 8px 15px; background: #FFF3E0; border: 1px solid #FFB74D; border-radius: 3px; margin-bottom: 10px; } .batch-bar .selected-count { color: #E65100; font-weight: bold; }')
            .appendTo('head');

        // 更新批量操作栏
        function updateBatchBar() {
            var checked = $('.batch-check').filter(':checked');
            var count = checked.length;
            $('#selectedCount').text(count);
            if (count > 0) {
                $('#batchBar').fadeIn();
                $('#batchDelBtn').fadeIn();
            } else {
                $('#batchBar').fadeOut();
                $('#batchDelBtn').fadeOut();
            }
        }

        // 全选/反选
        $('#batchCheckAll').on('click', function () {
            var checked = this.checked;
            $('.batch-check').each(function () {
                this.checked = checked;
            });
            layui.form.render('checkbox');
            updateBatchBar();
        });

        // 单个复选框变化
        $(document).on('click', '.batch-check', function () {
            setTimeout(function () {
                var $all = $('.batch-check');
                var $checked = $all.filter(':checked');
                $('#batchCheckAll').prop('checked', $all.length === $checked.length && $all.length > 0);
                layui.form.render('checkbox');
                updateBatchBar();
            }, 0);
        });

        // 获取选中的 ID 数组
        function getSelectedIds() {
            var ids = [];
            $('.batch-check:checked').each(function () {
                ids.push($(this).val());
            });
            return ids;
        }

        // 取消选择
        function clearBatch() {
            $('#batchCheckAll').prop('checked', false);
            $('.batch-check').prop('checked', false);
            layui.form.render('checkbox');
            updateBatchBar();
        }

        // 单个删除
        function delFile(url, fileName) {
            layer.confirm('确认删除文件【' + fileName + '】？<br><span style="color:#999;font-size:12px;">将同时删除物理文件，不可恢复</span>', {btnAlign: 'c'}, function () {
                var index = layer.load(2);
                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.status == 1) {
                            layer.msg(data.message, {icon: 1, time: 1500}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(data.message, {icon: 0, time: 2000});
                        }
                    },
                    error: function () {
                        layer.close(index);
                        layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                    }
                });
            });
        }

        // 批量删除
        function batchDel() {
            var ids = getSelectedIds();
            if (ids.length === 0) {
                layer.msg('请先选择文件', {icon: 0, time: 1500});
                return;
            }
            layer.confirm('确认删除选中的 ' + ids.length + ' 个文件？<br><span style="color:#999;font-size:12px;">将同时删除物理文件，不可恢复。被业务引用的文件将自动跳过。</span>', {btnAlign: 'c'}, function () {
                var index = layer.load(2);
                $.ajax({
                    type: 'POST',
                    url: '{{route('fileManagerBatchDel')}}',
                    data: {ids: ids, _token: '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.status == 1) {
                            layer.msg(data.message, {icon: 1, time: 2000}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(data.message, {icon: 0, time: 2000});
                        }
                    },
                    error: function () {
                        layer.close(index);
                        layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                    }
                });
            });
        }

        // 清理废弃文件
        function cleanFiles() {
            layer.confirm(
                '确认清理所有未被任何业务引用的废弃文件？<br><span style="color:#FF5722;font-size:12px;">此操作不可恢复，将删除物理文件及数据库记录。</span>',
                {btnAlign: 'c'},
                function () {
                    var index = layer.load(2);
                    $.ajax({
                        type: 'POST',
                        url: '{{route('fileManagerClean')}}',
                        data: {_token: '{{csrf_token()}}'},
                        dataType: 'json',
                        success: function (data) {
                            layer.close(index);
                            if (data.status == 1) {
                                layer.msg(data.message, {icon: 1, time: 2500}, function () {
                                    location.reload();
                                });
                            } else {
                                layer.msg(data.message, {icon: 0, time: 2000});
                            }
                        },
                        error: function () {
                            layer.close(index);
                            layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                        }
                    });
                }
            );
        }
    </script>
@stop