{block name="content"}
<div class="iframe-pagination notfooter">
    <fieldset>
        <legend>条件搜索</legend>
        <form action="{:sysuri()}" id="NewsTableSearch" autocomplete="off" class="layui-form layui-form-pane form-search" method="get" onsubmit="return false">

            <!-- {notempty name='marks'} -->
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">文章标签</label>
                <div class="layui-input-inline">
                    <select name="mark" lay-search class="layui-select">
                        <option value=''>-- 文章标签 --</option>
                        {foreach $marks as $mark}{if isset($get.mark) and $mark eq $get.mark}
                        <option selected value="{$mark.name}">{$mark.name}</option>
                        {else}
                        <option value="{$mark.name}">{$mark.name}</option>
                        {/if}{/foreach}
                    </select>
                </div>
            </div>
            <!-- {/notempty} -->

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">文章标题</label>
                <label class="layui-input-inline">
                    <input class="layui-input" name="name" placeholder="请输入文章标题" value="{$get.name|default=''}">
                </label>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">创建时间</label>
                <label class="layui-input-inline">
                    <input class="layui-input" data-date-range name="create_at" placeholder="请选择创建时间" value="{$get.create_at|default=''}">
                </label>
            </div>

            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
            </div>
        </form>
    </fieldset>
    <table id="NewsTable" data-url="{:sysuri()}" data-target-search="#NewsTableSearch"></table>
</div>
{/block}

{block name='script'}
<script>
    $(function () {
        // 初始化表格组件
        $('#NewsTable').layTable({
            even: true, height: 'full',
            sort: {field: 'sort desc,id', type: 'desc'},
            cols: [[
                {field: 'id', title: 'ID', align: 'center', width: 60, sort: true},
                /* {notempty name='marks'} */
                {
                    field: 'mark', title: '文章标签', align: 'left', minWidth: 100, templet: function (d) {
                        return (d.html = ''), d.mark.forEach(function (val) {
                            d.html += '<span class="layui-badge layui-bg-blue">' + val + '</span>';
                        }), d.html;
                    }
                },
                /* {/marks} */
                {field: 'name', title: '文章标题', align: 'left', minWidth: 140},
                {field: 'num_read', title: '阅读数', align: 'center', width: 85, sort: true, style: 'color:blue;font-size:16px'},
                {field: 'status', title: '状态', align: 'center', width: 80, templet: '#StatusSwitchTpl'},
                {field: 'create_at', title: '创建时间', align: 'center', width: 170, sort: true},
                {toolbar: '#toolbar', title: '操作', align: 'center', width: 100}
            ]]
        }).trigger('tool', function (item) {
            window.setItemValue(item.data.id, item.data.name);
            item.tr.parents('div.layui-layer-page').find('a.layui-layer-close').trigger('click');
        });
    });
</script>

<!-- 操作工具条模板 -->
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-sm" lay-event="select">选 择</a>
</script>

<!-- 数据状态切换模板 -->
<script type="text/html" id="StatusSwitchTpl">
    {{d.status ? '<b class="color-green">已激活</b>' : '<b class="color-red">已禁用</b>'}}
</script>

{/block}