{% 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="42%">姓名</td>
                                <td width="12%" align="center">昵称</td>
                                <td width="12%" align="center">积分</td>
                                <td width="12%" align="center">角色</td>
                                <td width="12%">操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in result %}
                            <tr>
                                <td align="center">{{ user.userid }}</td>
                                <td>{{ user.username }}</td>
                                <td align="center">{{ user.nickname }}</td>
                                <td align="center">{{ user.credit }}</td>
                                <td align="center">
                                    <a href="#" onclick="switchUserRole(this, {{ user.userid }})">
                                        {% if user.role == 'admin' %}
                                            管理员
                                        {% else %}
                                            <font color="red">用户</font>
                                        {% endif %}
                                    </a>&nbsp;&nbsp;&nbsp;
                                </td>
                                <td>
                                    <a href="#" onclick="deleteUser(this, {{ user.userid }})">删除</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </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 deleteUser(obj, userid) {
        if (confirm('确定删除该用户吗？')) {
            $.get('/admin/user/delete/' + userid, function (data) {
                if (data.success) {
                    alert('删除成功');
                    location.reload();  // 删除成功后刷新页面
                } else {
                    alert('删除失败');
                }
            });
        }
    }

    // 分类搜索
    function doSearchByType() {
        var type = $("#type").val();
        location.href = '/admin/type/' + encodeURIComponent(type) + '-1';
    }

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

    // 切换用户角色
    function switchUserRole(obj, userid) {
        $.get('/admin/user/role/' + userid, function (data) {
            if (data == 'admin') {
                $(obj).html('<font color="red">管理员</font>');
            } else {
                $(obj).text('用户');
            }
        });
    }
</script>

{% endblock %}