{extend name="admin/layout" /}

{block name="content"}
<div class="card mb-4">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col">
                <h5 class="mb-0">文章审核 ({:intval($total)})</h5>
            </div>
            <div class="col-auto">
                <div class="btn-group btn-group-sm">
                    <a href="?status=pending" class="btn {$status == 'pending' ? 'btn-primary' : 'btn-outline-primary'}">待审核</a>
                    <a href="?status=approved" class="btn {$status == 'approved' ? 'btn-primary' : 'btn-outline-primary'}">已通过</a>
                    {notempty name="draftsEnabled"}
                    <a href="?status=draft" class="btn {$status == 'draft' ? 'btn-primary' : 'btn-outline-primary'}">草稿</a>
                    {/notempty}
                    <a href="?status=rejected" class="btn {$status == 'rejected' ? 'btn-primary' : 'btn-outline-primary'}">已拒绝</a>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>作者</th>
                        <th>内容</th>
                        <th>类型</th>
                        <th>状态</th>
                        <th>发布时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name="articles" id="a"}
                    <tr>
                        <td>{:intval($a['id'])}</td>
                        <td>{:getUserDisplayName($a['ptpuser'] ?? '')}</td>
                        <td style="min-width:260px;">{:strCut(strip_tags($a['ptptext'] ?? ''), 70)}</td>
                        <td><span class="badge bg-light text-dark">{$a.ptplx|default='only'}</span></td>
                        <td>
                            {if condition="isFlag($a['ptpaud'] ?? 0) === 0"}
                            <span class="badge bg-warning">待审核</span>
                            {elseif condition="isFlag($a['ptpaud'] ?? 0) === 1"}
                            <span class="badge bg-success">已通过</span>
                            {elseif condition="isFlag($a['ptpaud'] ?? 0) === -2"}
                            <span class="badge bg-secondary">草稿</span>
                            {else}
                            <span class="badge bg-danger">已拒绝</span>
                            {/if}
                        </td>
                        <td>{$a.ptptime|default=''}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" type="button" data-article="{:admin_json_attr($a)}" onclick="editArticle(this)">编辑</button>
                                {if condition="isFlag($a['ptpaud'] ?? 0) !== 1"}
                                <button class="btn btn-outline-success" onclick="auditArticle('{$a.cid}', 'approve')">通过</button>
                                {/if}
                                {if condition="isFlag($a['ptpaud'] ?? 0) !== -1"}
                                <button class="btn btn-outline-warning" onclick="auditArticle('{$a.cid}', 'reject')">拒绝</button>
                                {/if}
                                <button class="btn btn-outline-danger" onclick="auditArticle('{$a.cid}', 'delete')">删除</button>
                                <a href="/view/{$a.cid}" target="_blank" class="btn btn-outline-info">查看</a>
                            </div>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
        </div>

        {php}$totalPages = (int)ceil($total / $pageSize);{/php}
        {if condition="$totalPages > 1"}
        <nav>
            <ul class="pagination justify-content-center">
                {if condition="$page > 1"}
                <li class="page-item"><a class="page-link" href="?page={$page-1}&status={$status}">上一页</a></li>
                {/if}
                {php}$pageWindow = \app\service\AdminListService::pageWindow($page, $totalPages);{/php}
                {volist name="pageWindow" id="i"}
                <li class="page-item {$i == $page ? 'active' : ''}">
                    <a class="page-link" href="?page={$i}&status={$status}">{$i}</a>
                </li>
                {/volist}
                {if condition="$page < $totalPages"}
                <li class="page-item"><a class="page-link" href="?page={$page+1}&status={$status}">下一页</a></li>
                {/if}
            </ul>
        </nav>
        {/if}
    </div>
</div>

<style>
    #articleEditModal .modal-dialog {
        max-width: 1180px;
    }

    #articleEditModal .modal-content {
        border: 0;
        border-radius: 8px;
        box-shadow: 0 18px 45px rgba(24, 39, 75, 0.24);
        overflow: hidden;
    }

    #articleEditModal .modal-header {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #edf0f5;
        padding: 20px 24px 16px;
    }

    #articleEditModal .modal-title {
        color: #1f2d3d;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.35;
    }

    #articleEditModal .close {
        background: #f3f5f8;
        border-radius: 50%;
        color: #586574;
        height: 34px;
        line-height: 34px;
        margin: 0;
        opacity: 1;
        padding: 0;
        text-align: center;
        width: 34px;
    }

    #articleEditModal .modal-body {
        background: #f6f8fb;
        max-height: calc(100vh - 185px);
        padding: 22px 24px 8px;
    }

    #articleEditModal .row.g-3 {
        background: #fff;
        border: 1px solid #e8edf3;
        border-radius: 8px;
        margin: 0;
        padding: 18px 12px 2px;
    }

    #articleEditModal .row.g-3 > [class*="col-"] {
        margin-bottom: 16px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #articleEditModal .article-fields {
        background: #f9fbfe;
        border: 1px dashed #d8e0eb;
        border-radius: 8px;
        padding: 14px 12px 0;
    }

    #articleEditModal .article-fields .row.g-3 {
        background: transparent;
        border: 0;
        padding: 0;
    }

    #articleEditModal .form-label {
        color: #536170;
        display: block;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 7px;
    }

    #articleEditModal .form-control,
    #articleEditModal .form-select {
        border-color: #dce3ec;
        border-radius: 6px;
        color: #233142;
        min-height: 40px;
    }

    #articleEditModal textarea.form-control {
        line-height: 1.65;
        resize: vertical;
    }

    #articleEditModal #articleText {
        min-height: 330px;
    }

    #articleEditModal #articleImages {
        min-height: 96px;
    }

    #articleEditModal .form-control:focus,
    #articleEditModal .form-select:focus {
        border-color: #4f7cff;
        box-shadow: 0 0 0 0.16rem rgba(79, 124, 255, 0.14);
    }

    #articleEditModal .form-control-color {
        min-height: 40px;
        padding: 4px;
        width: 100%;
    }

    #articleEditModal .modal-footer {
        background: #fff;
        border-top: 1px solid #edf0f5;
        padding: 14px 24px;
    }

    #articleEditModal .modal-footer .btn {
        border-radius: 6px;
        min-width: 88px;
    }

    @media (max-width: 767.98px) {
        #articleEditModal .modal-dialog {
            margin: 8px;
        }

        #articleEditModal .modal-header,
        #articleEditModal .modal-body,
        #articleEditModal .modal-footer {
            padding-left: 16px;
            padding-right: 16px;
        }

        #articleEditModal #articleText {
            min-height: 240px;
        }
    }
</style>

<div class="modal fade" id="articleEditModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <form id="articleEditForm">
                <div class="modal-header">
                    <h5 class="modal-title">编辑文章</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="cid" id="articleCid">
                    <input type="hidden" name="action" value="edit">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">类型</label>
                            <select class="form-select" name="ptplx" id="articleType">
                                <option value="only">纯文字</option>
                                <option value="img">图片</option>
                                <option value="video">视频</option>
                                <option value="music">音乐</option>
                                <option value="article">长文章</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">审核状态</label>
                            <select class="form-select" name="ptpaud" id="articleStatus">
                                <option value="1">已通过</option>
                                <option value="0">待审核</option>
                                {notempty name="draftsEnabled"}
                                <option value="-2">草稿</option>
                                {/notempty}
                                <option value="-1">已拒绝</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">位置</label>
                            <input type="text" class="form-control" name="ptpdw" id="articleLocation">
                        </div>
                        <!-- 长文章专属字段 -->
                        <div class="col-12 article-fields" style="display:none;">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">文章标题</label>
                                    <input type="text" class="form-control" name="article_title" id="articleTitle" placeholder="长文章标题">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">封面图</label>
                                    <input type="text" class="form-control" name="article_cover" id="articleCover" placeholder="封面图片URL">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">封面色调</label>
                                    <input type="color" class="form-control form-control-color" name="cover_color" id="articleCoverColor" value="#4A90D9">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">发布时间</label>
                            <input type="text" class="form-control" name="ptptime" id="articlePublishTime">
                        </div>
                        {notempty name="tagsEnabled"}
                        <div class="col-md-6">
                            <label class="form-label">标签/话题</label>
                            <input type="text" class="form-control" name="tags" id="articleTags" placeholder="多个标签用逗号分隔">
                        </div>
                        {/notempty}
                        <div class="col-12">
                            <label class="form-label">内容</label>
                            <textarea class="form-control" name="ptptext" id="articleText" rows="14"></textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">图片列表</label>
                            <textarea class="form-control" name="ptpimag" id="articleImages" rows="3" placeholder="多张图片使用 (+@+) 分隔"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">视频</label>
                            <input type="text" class="form-control" name="ptpvideo" id="articleVideo" placeholder="视频地址|封面地址">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">音乐</label>
                            <input type="text" class="form-control" name="ptpmusic" id="articleMusic" placeholder="音乐地址|歌名|作者|封面">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">广告</label>
                            <select class="form-select" name="ptpgg" id="articleAd">
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label">广告链接</label>
                            <input type="text" class="form-control" name="ptpggurl" id="articleAdUrl">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">可见性</label>
                            <select class="form-select" name="ptpys" id="articlePrivacy">
                                <option value="1">公开</option>
                                <option value="0">隐藏</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">评论</label>
                            <select class="form-select" name="commauth" id="articleComment">
                                <option value="1">允许</option>
                                <option value="0">关闭</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="extraJs"}
<script>
function setValue(id, value) {
    var el = document.getElementById(id);
    if (el) el.value = value == null ? '' : value;
}

function editArticle(button) {
    var article = JSON.parse(button.getAttribute('data-article') || '{}');
    setValue('articleCid', article.cid);
    setValue('articleType', article.ptplx || 'only');
    setValue('articleStatus', article.ptpaud == null ? '1' : article.ptpaud);
    setValue('articleLocation', article.ptpdw);
    setValue('articlePublishTime', article.ptptime);
    setValue('articleTags', article.tags);
    setValue('articleText', article.ptptext);
    setValue('articleImages', article.ptpimag);
    setValue('articleVideo', article.ptpvideo);
    setValue('articleMusic', article.ptpmusic);
    setValue('articleAd', article.ptpgg || '0');
    setValue('articleAdUrl', article.ptpggurl);
    setValue('articlePrivacy', article.ptpys == null ? '1' : article.ptpys);
    setValue('articleComment', article.commauth == null ? '1' : article.commauth);

    // 长文章字段
    setValue('articleTitle', article.article_title);
    setValue('articleCover', article.article_cover);
    var cc = document.getElementById('articleCoverColor');
    if (cc) cc.value = article.cover_color || '#4A90D9';

    toggleArticleFields(article.ptplx || 'only');
    $('#articleEditModal').modal('show');
}

// 根据类型显示/隐藏长文章字段
$('#articleType').on('change', function() {
    toggleArticleFields($(this).val());
});

function toggleArticleFields(type) {
    if (type === 'article') {
        $('.article-fields').show();
    } else {
        $('.article-fields').hide();
    }
}

document.getElementById('articleEditForm').addEventListener('submit', function(e) {
    e.preventDefault();
    ajaxRequest('/admin/audites/audit', $(this).serialize(), function() {
        location.reload();
    });
});

function auditArticle(cid, action) {
    var msg = {
        approve: '确定要通过该文章吗？',
        reject: '确定要拒绝该文章吗？',
        delete: '确定要删除该文章吗？'
    };

    confirmAction(msg[action], function() {
        ajaxRequest('/admin/audites/audit', {
            cid: cid,
            action: action
        }, function() {
            location.reload();
        });
    });
}
</script>
{/block}