{layout name="manager/layout" /}

<link rel="stylesheet" href="__STATIC__/js/zTree/metroStyle/metroStyle.css">

<div class="layui-row layui-col-space15">
    <div class="layui-col-xs12 layui-col-md3">
        <div id="echarts-pies" style="background-color:#ffffff;overflow:scroll;padding: 20px">
            <div class="layui-card">
                <div class="layui-card-header">配置分组</div>
                <div class="layui-card-body">
                    <input type="hidden" id="ids-data" name="ids">
                    <ul id="group-tree" data-tree="{$categoryJson ?? ''}" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md9">
        <div id="echarts-records" style="background-color:#ffffff;min-height:600px;">
            <div class="layuimini-container location-index-page">
                <div class="layuimini-main">
                    <fieldset class="table-search-fieldset" style="display: none">
                        <legend>搜索信息</legend>
                        <div style="margin: 10px 10px 10px 10px">
                            <form class="layui-form layui-form-pane" action="">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">标题</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="title" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">描述</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="description" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </fieldset>
                    <div>
                        <table id="table-container" class="layui-table" data-url="/manager/config-item" lay-filter="table-container"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 隐藏列 -->
<!-- 编辑单元格提交url -->
<input type="hidden" id="row-modify" data-url="/manager/config-item/modify">

<!-- 列-状态变更 -->
<script type="text/html" id="row-status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="changeStatus" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<!-- 操作列 -->
<script type="text/html" id="row-operate">
    <a class="layui-btn layui-btn-primary layui-btn-xs" data-href="/manager/config-item/edit.html?id={{d.id}}" data-title="编辑配置项" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-href="/manager/config-item/del.html" lay-event="del">删除</a>
</script>

<!-- toolbar -->
<script type="text/html" id="toolbar-tpl">
    <a class="layui-btn layui-btn-sm layui-btn-sm" data-table-refresh lay-event="refresh"><i class="fa fa-refresh"></i></a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" data-href="/manager/config-item/add.html" data-title="添加配置项" lay-event="add"><i class="fa fa-plus"></i> 添加</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" data-href="/manager/config-item/del.html" lay-event="del"><i class="fa fa-trash-o"></i> 删除</a>
</script>
<script src="__MANAGER__/js/config_item.js?v={:mt_rand()}"></script>
<script src="__STATIC__/js/jquery-3.3.1.js"></script>
<script src="__STATIC__/js/zTree/jquery.ztree.all.min.js"></script>
<script>
    let zTreeObj;
    let setting = {
        check: {
            enable: true,
            nocheckInherit: true,
            chkboxType: { "Y" : "s", "N" : "ps" },
        },
        callback: {
            onCheck: getCheck
        },
        data: {
            simpleData: {
                enable: true,
                idKey: 'id',
                pIdKey: 'pid',
                rootPId: 0
            },
            key: {
                name: 'title',
            }
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    let zNodes = $('#group-tree').data('tree');

    $(document).ready(function(){
        // console.log(zNodes,'dd')
        zTreeObj = $.fn.zTree.init($("#group-tree"), setting, zNodes);
    });

    function getCheck() {
        let nodes = zTreeObj.getCheckedNodes(true);
        let ids = [];
        $.each(nodes, function (index, val) {
            ids.push(val.name);
        })

        $('#ids-data').val(ids);

        layui.use(['table'], function () {
            let table = layui.table;
            //执行搜索重载
            table.reload('table-container', {
                page: {curr: 1}
                , where: {searchParams: {group: ids}}
            }, 'data');
        })
    }
</script>