@extends('manager.layout.master')

@section('head')
    <style>
        /* 拖动排序：整行可拖，不额外占用列 */
        #sortableBody tr { cursor: grab; user-select: none; }
        #sortableBody tr:active { cursor: grabbing; }
        .sortable-ghost { background: #E6F7FF !important; opacity: 0.5; }
        .sortable-chosen { background: #F0F9FF !important; }
        /* 操作列禁止换行 */
        .table-op-col { white-space: nowrap; min-width: 260px; }
        /* 批量操作工具栏 */
        .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; }
    </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-normal" href="{{route('articleCategory')}}">
                <i class="layui-icon layui-icon-senior"></i> 分类管理
            </a>
            <a class="layui-btn btn-add btn-default" onclick="openView('{{route('articleAdd')}}','发布政策资讯','900px','700px')">
                <i class="layui-icon layui-icon-add-1"></i> 发布政策资讯
            </a>
            <a class="layui-btn layui-btn-warm" id="sortSaveBtn" onclick="saveSort()" style="display:none;">
                <i class="layui-icon layui-icon-ok"></i> 保存排序
            </a>
            <a class="layui-btn layui-btn-danger" href="{{route('articleTrash')}}">
                <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="status" lay-search>
                        <option value="">全部状态</option>
                        @foreach(\App\Models\Article::$statusList as $key=>$vo)
                            <option value="{{$key}}" @if($request->status == $key) selected @endif>{{$vo}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="category_id" lay-search>
                        <option value="">全部分类</option>
                        @foreach($categoryTree as $vo)
                            <option value="{{$vo->id}}" @if($request->category_id == $vo->id) selected @endif>{{$vo->name}}</option>
                            @if($vo->children)
                                @foreach($vo->children as $child)
                                    <option value="{{$child->id}}" @if($request->category_id == $child->id) selected @endif>&nbsp;&nbsp;├─ {{$child->name}}</option>
                                @endforeach
                            @endif
                        @endforeach
                    </select>
                </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-normal" onclick="batchHandle(1)">批量启用</a>
            <a class="layui-btn layui-btn-sm layui-btn-warm" onclick="batchHandle(2)">批量禁用</a>
            <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>封面图</th>
                <th>标题</th>
                <th>分类</th>
                <th>发布人</th>
                <th class="hidden-xs">来源</th>
                <th class="hidden-xs">排序</th>
                <th class="hidden-xs">浏览</th>
                <th class="hidden-xs">置顶</th>
                <th class="hidden-xs">推荐</th>
                <th>状态</th>
                <th class="hidden-xs">添加人</th>
                <th class="hidden-xs">添加时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="sortableBody">
            @forelse($list as $vo)
                <tr data-id="{{$vo->id}}">
                    <td>
                        <input type="checkbox" lay-skin="primary" value="{{$vo->id}}" class="batch-check">
                    </td>
                    <td>
                        @if($vo->img && $vo->img->url)
                            <img src="{{$vo->img->url}}" style="width:50px;height:35px;" class="layer-photos-demo">
                        @else
                            <span style="color:#ccc;">无</span>
                        @endif
                    </td>
                    <td>{{$vo->title}}</td>
                    <td>{{$vo->category->name ?? '-'}}</td>
                    <td>{{$vo->author ?: '-'}}</td>
                    <td class="hidden-xs">{{$vo->source ?: '-'}}</td>
                    <td class="hidden-xs sort-value">{{$vo->sort}}</td>
                    <td class="hidden-xs">{{$vo->view_count}}</td>
                    <td class="hidden-xs">
                        @if($vo->is_top == 1)
                            <span class="badge badge-danger">置顶</span>
                        @else
                            <span class="badge badge-muted">否</span>
                        @endif
                    </td>
                    <td class="hidden-xs">
                        @if($vo->is_recommend == 1)
                            <span class="badge badge-success">推荐</span>
                        @else
                            <span class="badge badge-muted">否</span>
                        @endif
                    </td>
                    <td>
                        @if($vo->status == 1)
                            <span class="badge badge-success">正常</span>
                        @else
                            <span class="badge badge-danger">禁用</span>
                        @endif
                    </td>
                    <td class="hidden-xs">{{$vo->manager->username ?? '-'}}</td>
                    <td class="hidden-xs">{{$vo->create_time}}</td>
                    <td class="table-op-col">
                        <div class="btn-group">
                            <a class="layui-btn layui-btn-sm btn-icon btn-icon-edit" title="编辑" onclick="openView('{{route('articleEdit',['id'=>$vo->id])}}','编辑政策资讯','900px','700px')"><i class="layui-icon layui-icon-edit"></i></a>
                            <a class="layui-btn layui-btn-sm btn-icon btn-icon-toggle" title="{{$vo->status==1 ? '禁用' : '启用'}}" onclick="handle('{{route('articleHandle',['id'=>$vo->id])}}','确认{{$vo->status==1 ? '禁用' : '启用'}}该政策资讯？')"><i class="layui-icon {{$vo->status==1 ? 'layui-icon-password' : 'layui-icon-ok-circle'}}"></i></a>
                            <a class="layui-btn layui-btn-sm btn-icon btn-icon-del" title="删除" onclick="del('{{route('articleDel',['id'=>$vo->id])}}')"><i class="layui-icon layui-icon-delete"></i></a>
                            <a class="layui-btn layui-btn-sm btn-icon btn-icon-view" title="预览" onclick="openView('{{route('articlePreview',['id'=>$vo->id])}}','预览政策资讯','900px','700px')"><i class="layui-icon layui-icon-read"></i></a>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="14" style="text-align:center;color:#999;">暂无数据</td></tr>
            @endforelse
        </tbody>
    </table>

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

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        // 启用图片放大（原来用 #idFrom，这里改用 #sortableBody）
        layer.photos({photos: '#sortableBody', anim: 5});

        var sortChanged = false;

        var sortable = Sortable.create(document.getElementById('sortableBody'), {
            animation: 200,
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            filter: '.table-op-col',       // 操作列不触发拖拽
            onMove: function (evt) {
                return evt.related.className.indexOf('table-op-col') === -1;
            },
            onEnd: function () {
                sortChanged = true;
                $('#sortSaveBtn').fadeIn();
            }
        });

        function saveSort() {
            var ids = [];
            $('#sortableBody tr[data-id]').each(function () {
                ids.push($(this).data('id'));
            });

            var index = layer.load(2);
            $.ajax({
                type: 'POST',
                url: '{{route('articleSort')}}',
                data: {ids: ids, _token: '{{csrf_token()}}'},
                dataType: 'json',
                success: function (data) {
                    layer.close(index);
                    if (data.status == 1) {
                        sortChanged = false;
                        $('#sortSaveBtn').fadeOut();
                        // 更新排序值显示
                        $('#sortableBody tr[data-id]').each(function (i) {
                            var total = $('#sortableBody tr[data-id]').length;
                            $(this).find('.sort-value').text(total - i);
                        });
                        layer.msg('排序保存成功', {icon: 1, time: 1500});
                    } else {
                        layer.msg(data.message, {icon: 0, time: 1500});
                    }
                },
                error: function () {
                    layer.close(index);
                    layer.msg('保存失败，请重试', {icon: 0, time: 1500});
                }
            });
        }

        // 离开页面前提示 + 清理父窗口/本窗口的加载遮罩
        $(window).on('beforeunload', function () {
            if (sortChanged) {
                try { window.parent.layer.closeAll('loading'); } catch (e) {}
                layer.closeAll('loading');
                return '排序尚未保存，确定离开吗？';
            }
        });

        // ==================== 批量操作 ====================

        // 更新批量操作栏
        function updateBatchBar() {
            var checked = $('.batch-check').filter(':checked');
            var count = checked.length;
            $('#selectedCount').text(count);
            if (count > 0) {
                $('#batchBar').fadeIn();
            } else {
                $('#batchBar').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 确保 layui 更新完原生 checked 属性后再读取
            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 batchDel() {
            var ids = getSelectedIds();
            if (ids.length === 0) {
                layer.msg('请先选择政策资讯', {icon: 0, time: 1500});
                return;
            }
            layer.confirm('确认删除选中的 ' + ids.length + ' 条政策资讯吗？', {btnAlign: 'c'}, function () {
                var index = layer.load(2);
                $.ajax({
                    type: 'POST',
                    url: '{{route('articleBatchDel')}}',
                    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: 1500}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(data.message, {icon: 0, time: 1500});
                        }
                    },
                    error: function () {
                        layer.close(index);
                        layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                    }
                });
            });
        }

        // 批量启用/禁用
        function batchHandle(status) {
            var ids = getSelectedIds();
            if (ids.length === 0) {
                layer.msg('请先选择政策资讯', {icon: 0, time: 1500});
                return;
            }
            var text = status == 1 ? '启用' : '禁用';
            layer.confirm('确认批量' + text + '选中的 ' + ids.length + ' 条政策资讯吗？', {btnAlign: 'c'}, function () {
                var index = layer.load(2);
                $.ajax({
                    type: 'POST',
                    url: '{{route('articleBatchHandle')}}',
                    data: {ids: ids, status: status, _token: '{{csrf_token()}}'},
                    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: 1500});
                        }
                    },
                    error: function () {
                        layer.close(index);
                        layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                    }
                });
            });
        }

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