{include file="public/header" /}
<div class="config-container">
    <div class="config-header" style="display:flex;justify-content: space-between;">
        <div style="display: flex; align-items: center;">
            <span>文章分类</span>
        </div>
        <div>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="add()">
                <i class="layui-icon layui-icon-add-1"></i>添加
            </button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="refresh()">
                <i class="layui-icon layui-icon-refresh"></i>刷新
            </button>
        </div>
    </div>

    <div class="layui-row" style="margin-top: 15px;">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">分类列表</div>
                <div class="layui-card-body">
                    <div id="categoryList"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4"">
            <div class="layui-card">
                <div class="layui-card-header">分类信息</div>
                <div class="layui-card-body">
                    <div id="defaultTip" style="text-align: center; padding: 50px 0; color: #999;">
                        <i class="layui-icon layui-icon-face-surprised" style="font-size: 30px;"></i>
                        <p style="margin-top: 10px;">请选择左侧分类</p>
                    </div>
                    <form class="layui-form" lay-filter="categoryForm" style="display: none;">
                        <input type="hidden" name="id" id="categoryId">
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">父级分类</label>
                            <div class="layui-input-block">
                                <select name="cid" lay-verify="required">
                                    <option value="0">顶级分类</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">封面图片</label>
                            <div class="layui-input-block">
                                <input type="text" name="image" placeholder="请输入图片地址" autocomplete="off"
                                    class="layui-input" id="imageInput">
                                <div class="layui-upload" style="margin-top: 20px;">
                                    <div>
                                        <button type="button" class="layui-btn" id="uploadImage">上传图片</button>
                                        <span style="color: #999; margin-left: 10px;">建议尺寸：250px*140px</span>
                                    </div>
                                    <div class="layui-upload-list">
                                        <img class="layui-upload-img" id="imagePreview" style="margin-top: 10px;">
                                        <i class="layui-icon layui-icon-close delete-image"
                                            style="display: none; position: absolute; top: 0; right: 0; cursor: pointer; color: #FF5722;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input type="number" name="sort" value="0" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="status" value="1" title="正常" checked>
                                <input type="radio" name="status" value="0" title="禁用">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="saveCategory">保存</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                <button type="button" class="layui-btn layui-btn-danger" id="deleteBtn"
                                    style="display: none;">删除</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['layer', 'form', 'util', 'upload'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var util = layui.util;
        var upload = layui.upload;

        // 初始化分类列表
        function initCategoryList() {
            $.ajax({
                url: '/admin/article/articlecate',
                type: 'POST',
                success: function (res) {
                    if (res.code === 0) {
                        var html = '';
                        res.data.forEach(function (item) {
                            html += renderCategory(item);
                        });
                        $('#categoryList').html(html);
                        bindEvents();
                    } else {
                        layer.msg('获取分类数据失败', { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('请求失败，请重试', { icon: 2 });
                }
            });
        }

        // 渲染分类
        function renderCategory(category, level = 0) {
            var html = '<div class="category-item" data-id="' + category.id + '">';
            html += '<div class="category-header">';
            html += '<span class="category-name">' + category.title + '</span>';
            html += '<div class="category-actions">';
            // 只有一级分类才显示添加按钮
            if (level === 0) {
                html += '<i class="layui-icon layui-icon-add-1 add-child" title="添加子分类"></i>';
            }
            html += '</div>';
            html += '</div>';

            if (category.children && category.children.length > 0) {
                html += '<div class="category-children">';
                category.children.forEach(function (child) {
                    html += renderCategory(child, level + 1);
                });
                html += '</div>';
            }

            html += '</div>';
            return html;
        }

        // 绑定事件
        function bindEvents() {
            // 点击分类
            $('.category-name').off('click').on('click', function () {
                var id = $(this).closest('.category-item').data('id');
                loadCategoryInfo(id);
            });

            // 点击添加子分类
            $('.add-child').off('click').on('click', function (e) {
                e.stopPropagation();
                var id = $(this).closest('.category-item').data('id');
                $('#categoryId').val('');
                $('select[name="cid"]').val(id);
                $('#deleteBtn').hide();
                form.render();
            });
        }

        // 加载分类信息
        function loadCategoryInfo(id) {
            $('#defaultTip').hide();
            $('form.layui-form').show();

            $.get('/admin/article/cateedit?id=' + id, function (res) {
                if (res.code === 0) {
                    // 更新父级分类选项
                    var $select = $('select[name="cid"]');
                    $select.empty();
                    $select.append('<option value="0">顶级分类</option>');
                    res.data.parentOptions.forEach(function (item) {
                        $select.append('<option value="' + item.id + '">' + item.name + '</option>');
                    });

                    // 填充表单数据
                    form.val('categoryForm', res.data.info);

                    // 显示图片预览
                    if (res.data.info.image) {
                        $('#imagePreview').attr('src', res.data.info.image);
                        $('.delete-image').show();
                    } else {
                        $('#imagePreview').attr('src', '');
                        $('.delete-image').hide();
                    }

                    // 显示删除按钮
                    $('#deleteBtn').show();

                    // 重新渲染表单
                    form.render();
                }
            });
        }

        // 初始化
        initCategoryList();

        // 默认显示提示信息
        $('#defaultTip').show();
        $('form.layui-form').hide();

        // 监听表单提交
        form.on('submit(saveCategory)', function (data) {
            var url = data.field.id ? '/admin/article/cateedit' : '/admin/article/cateadd';
            $.post(url, data.field, function (res) {
                if (res.code === 0) {
                    layer.msg(res.msg, { icon: 1 });
                    initCategoryList();
                } else {
                    layer.msg(res.msg, { icon: 2 });
                }
            });
            return false;
        });

        // 监听删除按钮点击
        $('#deleteBtn').on('click', function () {
            var id = $('input[name="id"]').val();
            if (!id) return;

            layer.confirm('确定要删除该分类吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post('/admin/article/catedel', { id: id }, function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, { icon: 1 });
                        initCategoryList();
                        // 重置表单
                        form.val('categoryForm', {
                            id: '',
                            name: '',
                            cid: '0',
                            image: '',
                            sort: 0,
                            status: 1
                        });
                        $('#imagePreview').attr('src', '');
                        $('#deleteBtn').hide();
                        form.render();
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                    }
                });
            });
        });

        // 图片上传
        upload.render({
            elem: '#uploadImage',
            url: '/admin/upload/image', // 替换为实际的上传接口
            accept: 'images',
            acceptMime: 'image/*',
            done: function (res) {
                if (res.code === 0) {
                    $('#imageInput').val(res.data.url);
                    $('#imagePreview').attr('src', res.data.url);
                    layer.msg('上传成功');
                } else {
                    layer.msg('上传失败');
                }
            }
        });

        // 监听图片输入框变化
        $('#imageInput').on('input', function () {
            var url = $(this).val();
            if (url) {
                $('#imagePreview').attr('src', url);
                $('.delete-image').show();
            } else {
                $('#imagePreview').attr('src', '');
                $('.delete-image').hide();
            }
        });

        // 监听图片删除按钮点击
        $(document).on('click', '.delete-image', function () {
            $('#imageInput').val('');
            $('#imagePreview').attr('src', '');
            $(this).hide();
        });
    });

    function add() {
        $('#defaultTip').hide();
        $('form.layui-form').show();

        // 重置表单
        layui.form.val('categoryForm', {
            id: '',
            name: '',
            cid: '0',
            image: '',
            sort: 0,
            status: 1
        });
        $('#imagePreview').attr('src', '');
        $('.delete-image').hide();
        $('#deleteBtn').hide();
        layui.form.render();
    }

    function refresh() {
        initCategoryList();
    }
</script>

<style>
    .category-item {
        margin: 5px 0;
    }

    .category-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        background-color: #f8f8f8;
        border-radius: 2px;
        cursor: pointer;
    }

    .category-header:hover {
        background-color: #f2f2f2;
    }

    .category-name {
        flex: 1;
        font-size: 14px;
    }

    .category-actions {
        display: none;
    }

    .category-header:hover .category-actions {
        display: block;
    }

    .category-children {
        margin-left: 20px;
        padding-left: 10px;
        border-left: 1px solid #e6e6e6;
    }

    .add-child {
        color: #1E9FFF;
        font-size: 14px;
        cursor: pointer;
        margin-left: 10px;
    }

    .add-child:hover {
        color: #0C7CD5;
    }

    .layui-upload-list {
        margin-top: 10px;
        position: relative;
        display: inline-block;
    }

    .delete-image {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #FF5722;
        font-size: 20px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        padding: 2px;
    }

    .delete-image:hover {
        color: #FF0000;
    }

    .layui-card {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .layui-col-md4{
        width: 40%;
    }

    .layui-col-md6{
        width: 60%;
    }
</style>