{layout name="manager/layout" /}
<link rel="stylesheet" href="__STATIC__/js/zTree/metroStyle/metroStyle.css">
<style>
    .ztree * {
        padding: 0;
        margin: 0;
        /*font-size: 14px;*/
        /*font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;*/
        font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
    }
</style>
<div class="layui-row layui-col-space12">
    {if $categoryId == 0}
    <div class="layui-col-xs12 layui-col-md2">
        <div id="echarts-pies" style="background-color:#ffffff;overflow:scroll;padding: 5px">
            <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="category-tree" data-auth="{$categoryJson ?? ''}" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
    {/if}
    <div class="layui-col-xs12 {if $categoryId == 0} layui-col-md10 {else /} layui-col-md12 {/if}">
        <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="published_at" autocomplete="off" class="layui-input" id="publish-date">
                                        </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/archives?category_id={$categoryId ?? 0}&diary_id={$diaryId ?? 0}" lay-filter="table-container"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


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

<!-- 列-是否推荐 -->
<script type="text/html" id="row-recommend">
    <input type="checkbox" name="recommend" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="changeRecommend" {{ d.recommend == 1 ? 'checked' : '' }}>
</script>

<!-- 列-是否置顶 -->
<script type="text/html" id="row-top">
    <input type="checkbox" name="top" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="changeTop" {{ d.top == 1 ? 'checked' : '' }}>
</script>

<!-- 列-是否热门 -->
<script type="text/html" id="row-hot">
    <input type="checkbox" name="hot" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="changeHot" {{ d.hot == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="row-img">
    {{# if (d.src.length > 0) { }}
    <img src="{{ d.src }}" style="width: 100px;height: 100px;" alt="">
    {{# } }}
</script>

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

<!-- toolbar -->
<script type="text/html" id="toolbar-tpl">
    <a class="layui-btn layui-btn-primary 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/archives/add.html?category_id={$categoryId ?? 0}&diary_id={$diaryId ?? 0}" data-title="添加内容" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" data-href="/manager/archives/del.html" lay-event="del">删除</a>
</script>
<script src="__MANAGER__/js/archives.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 src="__STATIC__/js/clipboard.min.js"></script>
<script>
    let zTreeObj;
    let setting = {
        check: {
            enable: true,
            nocheckInherit: true,
            chkboxType: { "Y" : "s", "N" : "ps" },
        },
        callback: {
            onClick: switchCheck,
            onCheck: getCheck
        },
        data: {
            simpleData: {
                enable: true,
                idKey: 'id',
                pIdKey: 'pid',
                rootPId: 0
            },
            key: {
                name: 'title',
            }
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    let zNodes = $('#category-tree').data('auth');

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

    //点击时 勾选与取消勾选切换
    function switchCheck() {
        let nodes = zTreeObj.getSelectedNodes();
        for (let i=0, l=nodes.length; i < l; i++) {
            if (nodes[i].checked) {
                zTreeObj.checkNode(nodes[i], false, true);
            } else {
                zTreeObj.checkNode(nodes[i], true, true);
            }
        }

        getCheck();
    }

    // 勾选｜取消勾选 事件
    function getCheck() {
        let nodes = zTreeObj.getCheckedNodes(true);
        let ids = [];
        $.each(nodes, function (index, val) {
            ids.push(val.id);
        })

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

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