{include file="public/header" /}
<div class="config-container">
    <div class="config-header" style="display:flex;justify-content: space-between;">
        <div>
            <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>

    <table class="layui-table">
        <thead>
            <tr>
                <th width="20">ID</th>
                <th width="120">分类名称</th>
                <th width="120">分类图片</th>
                <th>描述</th>
                <th width="80">排序</th>
                <th width="80">状态</th>
                <th width="180">创建时间</th>
                <th width="240">操作</th>
            </tr>
        </thead>
        <tbody>
            {volist name="lists" id='vo'}
            {if condition="$vo.cid eq 0"}
            <tr>
                <td>{$vo.id}</td>
                <td>{$vo.name}</td>
                <td><img src="{$vo.image}" style="width: 100px;height: auto;"></td>
                <td></td>{$vo.desc}</td>
                <td>{$vo.sort}</td>
                <td>{$vo.status==1?'开启':'<span style="color:red;">禁用</span>'}</td>
                <td>{$vo.create_time}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs"
                        onclick="addchanel({$vo.id})">
                        <i class="layui-icon layui-icon-add-1"></i>添加子栏目
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="edit({$vo.id})">
                        <i class="layui-icon layui-icon-edit"></i>编辑
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="del({$vo.id})">
                        <i class="layui-icon layui-icon-delete"></i>删除
                    </button>
                </td>
            </tr>
            {volist name="lists" id='sub'}
            {if condition="$sub.cid eq $vo.id"}
            <tr>
                <td>{$sub.id}</td>
                <td style="padding-left: 30px;">├─ {$sub.name}</td>
                <td><img src="{$sub.image}" style="width: 100px;height: auto;"></td>
                <td>{$sub.desc}</td>
                <td>{$sub.sort}</td>
                <td>{$sub.status==1?'开启':'<span style="color:red;">禁用</span>'}</td>
                <td>{$sub.create_time}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="edit({$sub.id})">
                        <i class="layui-icon layui-icon-edit"></i>编辑
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="del({$sub.id})">
                        <i class="layui-icon layui-icon-delete"></i>删除
                    </button>
                </td>
            </tr>
            {/if}
            {/volist}
            {/if}
            {/volist}
        </tbody>
    </table>
</div>

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

    function add() {
        layer.open({
            type: 2,
            title: '添加分类',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '600px'],
            content: '{:url("article/cateadd")}'
        });
    }

    function edit(id) {
        layer.open({
            type: 2,
            title: '编辑分类',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '800px'],
            content: '{:url("article/cateedit")}?id=' + id
        });
    }

    function del(id) {
        layer.confirm('确定要删除该分类吗？', {
            btn: ['确定', '取消']
        }, function () {
            $.post('{:url("article/catedel")}', { id: id }, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, { icon: 1 });
                    setTimeout(function () {
                        window.location.reload();
                    }, 1000);
                } else {
                    layer.msg(res.msg, { icon: 2 });
                }
            });
        });
    }

    function addchanel(id) {
        layer.open({
            type: 2,
            title: '添加子栏目',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '600px'],
            content: '{:url("article/cateadd")}?cid=' + id
        });
    }

    function refresh() {
        window.location.reload();
    }
</script>