{% extends "shop/base.html" %}
{% load static %}

{%  block ext_css %}
    <link rel="stylesheet" href="{% static 'dist/css/common.css' %}">
{%  endblock %}

{% block content %}
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div>
                    <div class="row">
                        <div class="col-sm-12">
                            <h1 class="m-0">
                                用户模块                    <small>列表</small>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 search-collapse">
                        <form id="search_form" method="get">
                            {% csrf_token %}
                            <div class="select-list">
                                <ul>
                                    <li>
                                        <label>分类： </label>
                                        <select id="search_level" name="level">
                                            <option value="">所有</option>
                                            <option value="1" {% if level == '1' %} selected="selected" {% endif %}>寂寞卡会员</option>
                                            <option value="1" {% if level == '2' %} selected="selected" {% endif %}>钻石卡会员</option>
                                            <option value="1" {% if level == '3' %} selected="selected" {% endif %}>金卡会员</option>
                                            <option value="1" {% if level == '4' %} selected="selected" {% endif %}>银卡会员</option>
                                        </select>
                                    </li>
                                    <li>
                                        <label>名称：  </label>
                                        <input type="text" id="search_truename" name="truename" value="{{ truename }}">
                                    </li>
                                    <li>
                                        <label>状态：  </label>
                                        <select id="search_status" name="status">
                                            <option value="">所有</option>
                                            <option value="0" {% if status == 0 %} selected="selected" {% endif %}>正常</option>
                                            <option value="0" {% if status == 1 %} selected="selected" {% endif %}>异常</option>
                                        </select>
                                    </li>
                                    <li>
                                        <input type="submit" value="查询" class="btn">
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-12 select-table table-striped">
                        <div class="btn-group-sm" id="toolbar" role="group">
                            <a class="btn btn-success" href="/member/add/">
                                <i class="fa fa-plug"></i>新增
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="col-sm-12 main">
            <br>
            <div class="panel panel-primary">
                <div class="panel-body">
                    <table class="table table-bordered table-condensed table-striped table-hover">
                        <thead>
                            <tr>
                                <th>账号</th>
                                <th>真实姓名</th>
                                <th>性别</th>
                                <th>生日</th>
                                <th>email</th>
                                <th>手机</th>
                                <th>添加时间</th>
                                <th>用户头像</th>
                                <th>功能操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for u in users %}
                                <tr>
                                    <td>{{ u.username }}</td>
                                    <td>{{ u.truename }}</td>
                                    <td>{{ u.sex }}</td>
                                    <td>{{ u.birthday }}</td>
                                    <td>{{ u.email }}</td>
                                    <td>{{ u.mobile }}</td>
                                    <td>{{ u.add_time }}</td>
                                    <td width="5%"><img src="/media/{{ u.user_img }}" width="100px" height="100px" alt="" ></td>
                                    <td width="20%">
                                        <a class="btn btn-primary single" href="#">
                                            <i class="fa fa-edit"></i> 修改
                                        </a>
                                        <a class="btn btn-danger" href="javascript:void(0)" onclick="showDeleteModal(this)">删除</a>
                                        <input type="hidden" id="id_hidden" value="{{ u.id }}">
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7">无相关记录！</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <nav aria-label="Contacts Page Navigation">
            <ul class="pagination justify-content-center m-2">
                {% if users.has_previous %}
                <li class="page-item">
                    <a class="page-like" href="/user/index/?page={{ users.previous_page_number }}&level={{ level }}&username={{ username }}@status={{ status }}">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}
                {% for pg in users.paginator.page_range %}
                    {% if users.number == pg %}
                        <li class="page-item active">
                            <a class="page-link" href="">{{ pg }}</a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="/user/index/?page={{ pg }}&level={{ level }}&username={{ username }}&status={{ status }}">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if users.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="/user/index/?page={{ users.next_page_number }}&level={{ level }}&username={{ username }}&status={{ status }}">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {#    删除信息     #}
    <div class="modal fade" id="delModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="float: left">提示信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="info">您确认要删除当前数据吗？</p>
                    <input type="hidden" id="del_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a id="delButton" class="btn btn-success" data-dismiss="modal">确认</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showDeleteModal(obj){
            {# 获取所有列 #}
            var $tds = $(obj).parent().children();
            {# 获取隐藏id #}
            var delete_id = $($tds[2]).val();
            console.log(delete_id)
            $("#del_id").val(delete_id);
            $("#delModal").modal({
                backdrop: 'static',
                keyboard: false
            });
        };

        $(function () {
            $("#delButton").click(function (){
                var id = $("#del_id").val();
                $.ajax({
                    url: "/user/del" + id + "/",
                    type: "GET",
                    success: function (result) {
                        if (result.code == "200"){
                            $("#delModal").modal('hide');
                            window.location.href = "/user/index"
                        }
                    }
                })
            });
        });
    </script>
{% endblock %}