{% extends 'base.html' %}

{% block content %}

<!-- 中部区域布局 -->
<div class="container" style="margin-top: 10px;">
    <div class="row">
        <div class="col-sm-2 col-12" style="padding: 0px 10px; ">
            <div class="col-12 admin-side" style="height: 360px">
                <!-- 为左侧菜单栏添加正确的超链接 -->
                <ul>
                    <li><a href="/admin"><span class="oi oi-image" aria-hidden="true"></span>&nbsp;&nbsp;文章管理</a>
                    </li>
                    <li><a href="/admin/comment"><span class="oi oi-task" aria-hidden="true"></span>&nbsp;&nbsp;评论管理</a>
                    </li>
                    <li><a href="/admin/user"><span class="oi oi-person" aria-hidden="true"></span>&nbsp;&nbsp;用户管理</a>
                    </li>
                    <li><a href="/admin/credit"><span class="oi oi-yen"
                                                      aria-hidden="true"></span>&nbsp;&nbsp;积分管理</a></li>
                    <li><a href="/admin/favorite"><span class="oi oi-heart" aria-hidden="true"></span>&nbsp;&nbsp;收藏管理</a>
                    </li>
                    <li><a href="/admin/recommend"><span class="oi oi-account-login" aria-hidden="true"></span>&nbsp;&nbsp;推荐管理</a>
                    </li>
                    <li><a href="/admin/hide"><span class="oi oi-eye" aria-hidden="true"></span>&nbsp;&nbsp;隐藏管理</a>
                    </li>
                    <li><a href="/admin/check"><span class="oi oi-zoom-in" aria-hidden="true"></span>&nbsp;&nbsp;投稿审核</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-sm-10 col-12" style="padding: 0px 10px">
            <div class="col-12 admin-main">
                <div class="col-12 row"
                     style="padding: 10px;margin: 0px 10px;">
                    <div class="col-3">
                        <!-- 根据article_type字典对象填充分类下拉框 -->
                        <select id="type" class="form-control">
                            <option value="0">所有分类</option>
                            {% for key, value in article_type.items() %}
                            <option value="{{key}}">{{value}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-2">
                        <input type="button" class="btn btn-primary" value="分类搜索" onclick="doSearchByType()"/>
                    </div>
                    <div class="col-2">

                    </div>
                    <div class="col-3">
                        <input type="text" class="form-control" id="keyword"/>
                    </div>
                    <div class="col-2">
                        <input type="button" class="btn btn-primary" value="标题搜索" onclick="doSearchByHeadline()"/>
                    </div>
                </div>

                <div class="col-12" style="padding: 10px;">
                    <table class="table col-12">
                        <thead style="font-weight: bold">
                        <tr>
                            <td width="10%" align="center">编号</td>
                            <td width="44%">标题</td>
                            <td width="8%" align="center">浏览</td>
                            <td width="8%" align="center">评论</td>
                            <td width="30%">操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        {% for article in result %}
                        <tr>
                            <td align="center">{{ article.articleid }}</td>
                            <td><a href="/article/{{ article.articleid }}" target="_blank">{{ article.headline | striptags | truncate(32)}}</a>
                            </td>
                            <td align="center">{{ article.readcount }}</td>
                            <td align="center">{{ article.replycount }}</td>
                            <td>
                                <a href="/edit/{{ article.articleid }}" target="_blank">编辑</a>&nbsp;&nbsp;&nbsp;
                                <a href="#" onclick="switchRecommend(this, {{ article.articleid }})">
                                    {% if article.recommended == 0 %}推荐
                                    {% else %} <font color="red">已推</font> {% endif %}
                                </a>&nbsp;&nbsp;&nbsp;
                                <a href="#" onclick="switchHide(this, {{ article.articleid }})">
                                    {% if article.hidden == 0 %}隐藏
                                    {% else %} <font color="red">已隐</font> {% endif %}
                                </a>&nbsp;&nbsp;&nbsp;
                                <a href="#" onclick="switchCheck(this, {{ article.articleid }})">
                                    {% if article.checked == 1 %}已审
                                    {% else %} <font color="red">待审</font> {% endif %}
                                </a>&nbsp;&nbsp;&nbsp;
                                <a href="#" onclick="deleteArticle(this, {{ article.articleid }})">删除</a>
                                <!-- 新增删除按钮 -->
                            </td>

                        </tr>
                        {% endfor %}

                    </table>

                    <table class="table col-12">
                        <tr>
                            <td valign="middle" align="center">
                                {% if page == 1 %}
                                <a href="/admin/article/1">上一页</a>&nbsp;&nbsp;
                                {% else %}
                                <a href="/admin/article/{{page - 1}}">上一页</a>&nbsp;&nbsp;
                                {% endif %}

                                {% for i in range(total) %}
                                <a href="/admin/article/{{i + 1}}">{{i + 1}}</a>&nbsp;&nbsp;
                                {% endfor %}

                                {% if page == total %}
                                <a href="/admin/article/{{page}}">下一页</a>
                                {% else %}
                                <a href="/admin/article/{{page + 1}}">下一页</a>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function deleteArticle(obj, articleid) {
    // 确认删除
    if (confirm('确定删除该文章吗？')) {
        $.get('/admin/article/delete/' + articleid, function (data) {
            if (data.success) {
                alert('删除成功');
                location.reload();  // 删除成功后刷新页面
            } else {
                alert('删除失败');
            }
        });
    }
}

    // 为了直接展示搜索结果，不需要使用Ajax，而是直接跳转页面即可
    function doSearchByType() {
        var type = $("#type").val();
        location.href = '/admin/type/' + type + '-1';
    }

    function doSearchByHeadline() {
        var keyword = $("#keyword").val();
        location.href = '/admin/search/' + keyword;
    }

    function switchHide(obj, articleid) {
        $.get('/admin/article/hide/' + articleid, function (data) {
            if (data == '1') {
                $(obj).html('<font color="red">已隐</font>');
            } else {
                $(obj).text('隐藏');
            }
        });
    }

    function switchRecommend(obj, articleid) {
        $.get('/admin/article/recommend/' + articleid, function (data) {
            if (data == '1') {
                $(obj).html('<font color="red">已推</font>');
            } else {
                $(obj).text('推荐');
            }
        });
    }

    function switchCheck(obj, articleid) {
        $.get('/admin/article/check/' + articleid, function (data) {
            if (data == '0') {
                $(obj).html('<font color="red">待审</font>');
            } else {
                $(obj).text('已审');
            }
        });
    }
</script>

{% endblock %}