{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>标题</th>
                <th>分类</th>
                <th>封面</th>
                <th>作者</th>
                <th>状态</th>
                <th>发布时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {volist name="lists" id='vo'}
            <tr>
                <td>{$vo.id}</td>
                <td>{$vo.title}</td>
                <td>{$vo.cate}</td>
                <td>
                    {if condition="$vo.image"}
                    <img src="{$vo.image}" style="max-width: 50px; max-height: 50px;">
                    {/if}
                </td>
                <td>{$vo.author}</td>
                <td>
                    {switch name="vo.status"}
                    {case value="0"}<span style="color:red;">草稿</span>{/case}
                    {case value="1"}<span style="color:orange;">待审核</span>{/case}
                    {case value="2"}<span style="color:green;">已发布</span>{/case}
                    {case value="3"}<span style="color:gray;">隐藏</span>{/case}
                    {/switch}
                </td>
                <td>{$vo.publishdate}</td>
                <td>
                    <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}
        </tbody>
    </table>
</div>

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

    function add() {
        window.location.href = '{:url("article/add")}';
    }

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

    function del(id) {
        layer.confirm('确定要删除该文章吗？', {
            btn: ['确定', '取消']
        }, function () {
            $.post('{:url("article/delete")}', { 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 refresh() {
        window.location.reload();
    }
</script>