{layout name="layout" /}
<div class="layui-card">
    <div class="layui-card-header">我的分类</div>
    <div class="layui-card-body">
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>

<!-- 顶部工具栏 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="createRoot">添加分类</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="expandAll">展开全部</button>
        <button class="layui-btn layui-btn-sm" lay-event="foldAll">折叠全部</button>
    </div>
</script>

<!-- 行操作 -->
<script type="text/html" id="rowTpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="addChild">添加子分类</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<!-- 新增/编辑 表单模板（弹窗内渲染） -->
<script type="text/html" id="dataFormTpl">
    <div style="padding:15px;">
        <form class="layui-form" lay-filter="dataForm">
            <input type="hidden" name="id" value="{{ d.id || '' }}">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="{{ d.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">
                    <textarea name="description" placeholder="请输入分类描述" class="layui-textarea">{{ d.description || '' }}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上级分类</label>
                <div class="layui-input-block">
                    <select name="pid" id="pidSelect"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" value="{{ d.sort || 0 }}" placeholder="数值越小越靠前" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="dataFormSubmit" id="dataFormSubmit">保存</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
                </div>
            </div>
        </form>
    </div>
</script>

<script>
layui.use(['treeTable', 'layer', 'form', 'laytpl', 'http'], function () {
    var treeTable = layui.treeTable;
    var layer = layui.layer;
    var $ = layui.$;
    var form = layui.form;
    var laytpl = layui.laytpl;
    var http = layui.http;

    // 后端注入的扁平树数据
    var treeData = {$treeData|raw};
    var pmap = {};
    treeData.forEach(function (c) { pmap[c.id] = c; });

    // 构建上级分类下拉（编辑时排除自身及其子孙节点，避免形成环）
    function buildPidOptions(selfId) {
        var html = '<option value="0">顶级分类</option>';
        treeData.forEach(function (c) {
            if (selfId && c.id === selfId) return;
            if (selfId) {
                var cur = pmap[c.id];
                while (cur && cur.pid) {
                    if (cur.pid == selfId) return;
                    cur = pmap[cur.pid];
                }
            }
            html += '<option value="' + c.id + '">' + c.title + '</option>';
        });
        return html;
    }

    // 渲染树形表格
    function renderTable() {
        treeTable.render({
            elem: '#dataTable',
            data: treeData,
            tree: {
                customName: { isParent: 'is_parent', name: 'title', id: 'id', pid: 'pid' },
                data: { isSimpleData: true, rootPid: 0 },
                view: { showIcon: false }
            },
            toolbar: '#toolbarTpl',
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                { field: 'title', title: '分类名称', minWidth: 160, fixed: 'left' },
                { field: 'description', title: '描述', minWidth: 160, templet: function (d) { return d.description || '-'; } },
                { field: 'articles_count', title: '文章数', width: 90 },
                { field: 'sort', title: '排序', width: 80, sort: true },
                { title: '操作', width: 230, align: 'center', toolbar: '#rowTpl' }
            ]],
            page: false,
            skin: 'line'
        });
    }
    renderTable();

    // 新增 / 编辑 弹窗
    function openForm(data) {
        data = data || {};
        var formHtml = laytpl($('#dataFormTpl').html()).render(data);
        layer.open({
            title: data.id ? '编辑分类' : (data.pid ? '添加子分类' : '添加分类'),
            content: formHtml,
            anim: 'slideLeft',
            offset: 'r',
            area: ['480px', '98%'],
            shade: 0.1,
            shadeClose: true,
            btn: ['保存', '取消'],
            success: function (layero, index) {
                $('#pidSelect').html(buildPidOptions(data.id));
                if (data.pid) { $('#pidSelect').val(data.pid); }
                form.render('select');
            },
            yes: function (index, layero) {
                layero.contents().find('#dataFormSubmit').trigger('click');
            },
            btn2: function (index) { layer.close(index); }
        });
    }

    // 表单提交：仅绑定一次（layui form 的 submit 为事件委托，弹窗内同 lay-filter 表单均可触发，不会叠加）
    form.on('submit(dataFormSubmit)', function (elem) {
        var field = elem.field;
        var isEdit = !!field.id;
        var url = isEdit
            ? '{:url("blog/member.category/update")}'
            : '{:url("blog/member.category/save")}';
        var postData = $.extend({}, field);
        if (isEdit) { postData.id = field.id; }
        http.post(url, postData).then(function (res) {
            if (res.code === 1) {
                layer.closeAll('dialog');
                layer.msg(res.msg, { icon: 1 });
                setTimeout(function () { location.reload(); }, 600);
            } else {
                layer.msg(res.msg || '操作失败', { icon: 2 });
            }
            },
            error: function () { layer.msg('请求失败，请重试', { icon: 2 }); }
        });
        return false;
    });

    // 顶部工具条
    treeTable.on('toolbar(dataTable)', function (obj) {
        switch (obj.event) {
            case 'createRoot':
                openForm({ pid: 0, sort: 0 });
                break;
            case 'batchDelete':
                var checkData = treeTable.checkStatus('dataTable').data;
                if (!checkData.length) {
                    return layer.msg('请选择要删除的分类');
                }
                var ids = checkData.map(function (item) { return item.id; });
                layer.confirm('确定删除选中的 ' + ids.length + ' 个分类吗？', function (index) {
                    $.post('{:url("blog/member.category/batch")}', { action: 'delete', ids: ids }, function (res) {
                        if (res.code === 1) {
                            layer.msg(res.msg, { icon: 1 }, function () { location.reload(); });
                        } else {
                            layer.msg(res.msg, { icon: 2 });
                        }
                    });
                    layer.close(index);
                });
                break;
            case 'expandAll':
                treeTable.expandAll('#dataTable');
                break;
            case 'foldAll':
                treeTable.foldAll('#dataTable');
                break;
        }
    });

    // 行操作
    treeTable.on('tool(dataTable)', function (obj) {
        var data = obj.data;
        if (obj.event === 'edit') {
            openForm(data);
        } else if (obj.event === 'addChild') {
            openForm({ pid: data.id, sort: 0 });
        } else if (obj.event === 'delete') {
            layer.confirm('确定要删除该分类吗？', function (index) {
                $.post('{:url("blog/member.category/delete")}', { id: data.id }, function (res) {
                    if (res.code === 1) {
                        layer.msg(res.msg, { icon: 1 }, function () { location.reload(); });
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                    }
                });
                layer.close(index);
            });
        }
    });
});
</script>