<!DOCTYPE html>
<html>

<head>
    <include file="public@head" title="内容管理" keywords=""/>
</head>

<body class="layui-layout-admin">
<include file="public@header"/>
<include file="public@side"/>
<div class="layui-body">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a href="{:url('admin/index/index')}">主页</a>
        <a>内容管理</a>
        <a href="{:url('index')}"><cite>文章管理</cite></a>
    </div>
    <div class="layui-fluid pdt10">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="listsTable layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类</label>
                        <div class="layui-input-inline">
                            <select name="category" lay-filter="category" id="category">
                                <option value="0">全部</option>
                                <foreach name="categories" item="vo">
                                    <option value="{$vo.id}"
                                    <eq name="Request.param.catID" value="$vo['id']">selected</eq>
                                    > {$vo.tab}{$vo.name}</option>
                                </foreach>
                            </select>
                        </div>
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" id="keyword" value="{$Request.param.keyword}"
                                   class="layui-input" placeholder="请输入关键字...">
                        </div>
                        <button class="layui-btn fr" data-type="reload">搜索</button>
                    </div>
                </div>
                <div class="layui-btn-group fr">
                    <a class="layui-btn layui-btn-normal" href="{:url('add')}">添加文章</a>
                </div>
            </div>
            <div class="layui-card-body">
                <table class="layui-hide table-center" id="lists" lay-filter="lists"></table>

                <script type="text/html" id="categoryTpl">
                    {{d.category.name}}
                </script>

                <script type="text/html" id="statusTpl">
                    <input type="checkbox" lay-skin="switch" {{ d.status==1
                           ? 'checked' : '' }} lay-filter="switch" data-url="{:url('doSwitch')}?id={{d.id}}&field=status" lay-text="√|×">
                    <input type="checkbox" lay-skin="switch" {{ d.is_top==1
                           ? 'checked' : '' }} lay-filter="switch" data-url="{:url('doSwitch')}?id={{d.id}}&field=is_top" lay-text="√|×">
                    <input type="checkbox" lay-skin="switch" {{ d.choice==1
                           ? 'checked' : '' }} lay-filter="switch" data-url="{:url('doSwitch')}?id={{d.id}}&field=choice" lay-text="√|×">
                    <input type="checkbox" lay-skin="switch" {{ d.comment_status==1
                           ? 'checked' : '' }} lay-filter="switch" data-url="{:url('doSwitch')}?id={{d.id}}&field=comment_status" lay-text="√|×">
                </script>

                <script type="text/html" id="barLists">
                    <a class="layui-btn layui-btn-sm" target="_blank" href="/article/{{d.id}}"><i
                            class="layui-icon layui-icon-list"></i>查看</a>
                    <a class="layui-btn layui-btn-sm" href="{:url('edit')}?id={{d.id}}"><i
                            class="layui-icon layui-icon-list"></i>编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="recycle">回收</a>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
                </script>
            </div>
        </div>
    </div>
</div>
<include file="public@scripts"/>
<script>
    var table = layui.table;

    let active = {
        reload: function () {
            table.reload('listsReload', {
                where: {
                    catID: $('#category option:selected').val(),
                    keyword: $('#keyword').val(),
                }
                , page: {
                    curr: 1
                }
            });
        },
    };

    table.render({
        elem: '#lists',
        id: 'listsReload',
        even: true,
        url: "{:url('getArticleList')}",
        cols: [[
            {field: 'id', title: 'ID', align: 'center', width: 60}
            , {field: 'title', title: '标题'}
            , {field: 'category', title: '分类', width: 150, align: 'center', templet: '#categoryTpl'}
            , {field: 'hits', title: '阅读量', width: 100, align: 'center'}
            , {field: 'status', title: '状态 / 置顶 / 推荐 / 评论', align: 'center', templet: '#statusTpl'}
            , {field: 'create_time', title: '创建时间', width: 180, align: 'center'}
            , {title: '操作', align: 'center', toolbar: '#barLists'}
        ]],
        page: true
    });

    form.on('select(category)', function (data) {
        if (data.value) {
            active['reload'].call();
        }
    });

    $('.listsTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    //监听工具条
    table.on('tool(lists)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent === 'recycle') {
            layer.confirm('将【' + data.title + '】加入回收站', function (index) {
                obj.del();
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "{:url('recycle')}?id=" + data.id,
                    async: true
                });
            });
        } else if (layEvent === 'delete') {
            layer.confirm('将删除【' + data.title + '】', function (index) {
                obj.del();
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "{:url('delete')}?id=" + data.id,
                    async: true
                });
            });
        }
    });
</script>
</body>

</html>
