<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html >
<html>
<head>
    <title>管理员列表</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .btn {
            padding: 0px 5px;
            font-size: 12px;
        }

        .tr {
            text-align: center;
        }

        .td {
            height: 37px;
            line-height: 37px
        }

        body {
            max-height: 500px;
        }

        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,
        .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 7px 0;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        @media screen and (min-width: 1200px) and (max-width: 1400px) {
            .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,
            .table > tbody > tr > td, .table > tfoot > tr > td {
                padding: 4px;
                line-height: 1.42857143;
                vertical-align: top;
                border-top: 1px solid #ddd;
            }

            body {
                min-width: 1620px;
                max-height: 500px;
            }
        }

        .form-control {
            height: 24px !important;
            padding: 0 12px !important;
        }
    </style>
</head>
<body class="pd15 bg-white">
<form class="form-inline ml15 header">
    <label class="form-group">用户状态</label>
    <select id="userState" class="form-control">
        <option value="">全部</option>
        <option value="0">注销</option>
        <option value="1">正常</option>
        <option value="2">锁定</option>
        <option value="3">待审核</option>
        <option value="4">休眠</option>
        <option value="5">修改密码</option>
    </select>
    <button id="query" type="button" title="查询" class="btn themeBGColor ml10 height50">
        <i class="glyphicon glyphicon-search"></i>
    </button>
    <div class="form-group  mr5 fr mb3" style="margin-bottom: 3px" id="fliteData">
        <label>筛选数据：</label>
        <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
        <button type="button" id="addUser" class="btn themeBGColor fr  ml5 mt5">
            <i class="glyphicon glyphicon-plus"></i>新增管理员
        </button>
    </div>
</form>
<table id="usertId" class="table table-striped table-bordered dataTable no-footer width100">
    <thead>
    <tr role="row">
        <th class="text-center">名称</th>
        <th class="text-center">登录名</th>
        <th class="text-center">角色</th>
        <th class="text-center">电话</th>
        <th class="text-center">注册时间</th>
        <th class="text-center">登录时间</th>
        <th class="text-center">状态</th>
        <th class="text-center">操作</th>
    </tr>
    </thead>
</table>
<input type="hidden" id="userIndex">
<%--当前会话的用户名--%>
<input type="hidden" id="username" value="${username}">
<input type="hidden" id="token" value="${token}">
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/bootstrap-table.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/locales/bootstrap-table-zh-CN.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/xss/aes.js"></script>
<script src="${ctx}/jspJS/sm2.js"></script>
<script src="${ctx}/jspJS/sm3.js"></script>
<script src="${ctx}/js/plugin/xss/security.js"></script>
<script src="${ctx}/jspJS/confirmIndentity.js"></script>
<script>
    var dataTable = null;
    var i;
    var userState = "";
    var ii;
    var resultData = null;

    $(document).ready(function () {
        load(userState);
    });


    $("#query").click(function () {
        load(userState);
    })

    function load(userState) {
        $.ajax({
            type: "POST",
            url: "/pqs9900/managers/allManagers",
            data: {
                userState: userState
            },
            dataType: 'json',
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                resultData = data.body;
                startQuery();
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }

    function initTable(data) {
        var height = $(window).height() - 155;
        var length = Math.floor(height / 32);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#usertId").DataTable();
        dataTable.clear().draw();
        dataTable = $('#usertId').DataTable({
            order: [],
            columnDefs: [
                {
                    orderable: false,
                    targets: [7]
                }
            ],
            data: data,
            destroy: true,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            lengthMenu: [length],
            columns: [
                {width: "9%", data: 'name'},
                {width: "7%", data: 'loginName'},
                {width: "10%", data: 'roleGPIndex'},
                {width: "9%", data: 'phone'},
                {width: "12%", data: 'registTime'},
                {width: "12%", data: 'lastLoginTime'},
                {
                    width: "5%", data: 'state', render: function (data, type, full, meta) {
                        switch (data) {
                            case 0:
                                return "注销";
                            case 1:
                                return "正常";
                            case 2:
                                return "锁定";
                            case 3:
                                return "待审核";
                            case 4:
                                return "休眠";
                            case 5:
                                return "密码过期";
                        }
                    }
                },
                {
                    width: "14%", data: 'roleGPIndex', render: function (data, type, full, meta) {
                        var extarButton = "";
                        switch (full.state) {
                            case 0:
                                break;
                            case 1:
                                break;
                            case 2:
                                extarButton = "<button type='button' class='btn  btn-primary  mr10' onclick='unLock(\"" + full.userIndex + "\")' ><i class='fa fa-unlock'></i>解锁</button>";
                                break;
                            case 3:
                                break;
                            case 4:
                                extarButton = "<button type='button' class='btn  btn-primary  mr10' onclick='active(\"" + full.userIndex + "\")' ><i class='fa fa-unlock'></i>激活</button>";
                                break;
                            case 5:
                                break;
                        }
                        var modifyPWDButton = "<button type='button' class='btn  btn-primary  mr10' onclick='updateUserPassWordByIndex(\"" + full.userIndex + "\")' ><i class='fa fa-vcard-o'></i>修改密码</button>"
                        var deleteButton = "<button type='button' class='btn  btn-danger  mr10' onclick='deleteUserByIndex(\"" + full.userIndex + "\")' ><i class='fa fa-trash'></i>注销</button>";
                        var buttons = "";
                        if (full.state === 0) {
                            buttons = "";
                        } else {
                            buttons = extarButton + modifyPWDButton + deleteButton;
                        }
                        return buttons;
                    }
                }
            ],
            language: {
                url: '/pqs9900/json/chine.json',
                "sEmptyTable": "没有内容"
            },
            'fnDrawCallback': function (oTable) {
                $("#usertId_info").addClass("fl");
                $("#usertId_paginate").addClass("fr");
                $("#usertId_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                var table = $("#usertId").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
        new $.fn.dataTable.Buttons(dataTable, {
            buttons: [
                {
                    extend: 'csv',//导出格式
                    title: '管理员列表',//导出csv名称
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6],//导出需要的列
                        format: {
                            body: function (data) {//对导出内容的筛选 data 表格内容 rid 行索引 cid 列索引
                                return data;
                            }
                        }
                    }
                }
            ]
        });
        modifyCss(dataTable);
    }

    //添加用户
    $("#addUser").click(function () {
        layer.open({
            type: 2,
            title: '新增管理员',
            shadeClose: true,
            resize: false,
            shade: 0.3,
            area: ['565px', '410px'],
            content: '/pqs9900/managers/addManager', //iframe的url
            scrollbar: false,
            end: function () {
                layer.close();
            }
        });
    });

    //解锁用户
    function unLock(index) {
        var token = $("#token").val();
        $.ajax({
            type: "POST",
            url: "/pqs9900/user/unlockUser",
            dataType: "json",
            data: {
                userIndex: index,
                token: token
            },
            success: function (data) {
                if (data.code === 200) {
                    layer.msg(data.message, {
                        icon: 6,
                        time: 1000
                    }, function () {
                        load(userState);
                    });
                } else {
                    layer.msg(data.message, {
                        icon: 5,
                        time: 1000
                    }, function () {
                        load(userState);
                    });
                }
            }
        });
    }

    $("#userState").change(function () {
        //要触发的事件
        userState = $(this).children('option:selected').val();
    });


    //激活用户
    function active(index) {
        //先进行密码确认
        var token = $("#token").val();
        $.ajax({
            type: "POST",
            url: "/pqs9900/user/activeUser",
            dataType: "json",
            data: {
                userIndex: index,
                token: token
            },
            success: function (data) {
                if (data.code === 200) {
                    layer.msg(data.message, {
                        icon: 6,
                        time: 1000
                    }, function () {
                        load(userState);
                    });
                } else {
                    layer.msg(data.message, {
                        icon: 5,
                        time: 1000
                    }, function () {
                        load(userState);
                    });
                }
            }
        });
    }

    //修改密码
    function updateUserPassWordByIndex(index) {
        //先进行密码确认
        $("#userIndex").val(index);
        layer.open({
            type: 2,
            title: '修改密码',
            shadeClose: true,
            resize: false,
            shade: 0.3,
            area: ['325px', '260px'],
            content: '/pqs9900/managers/updateManagerPassWord', //iframe的url
            scrollbar: false,
            end: function () {
                layer.close();
            }
        });
    }

    //删除用户
    function deleteUserByIndex(index) {
        var userIndex = index;
        var token = $("#token").val();
        var username = $("#username").val();
        confirmIndentity(username, function () {
            $.ajax({
                type: "POST",
                url: "/pqs9900/user/deleteUserByIndex",
                dataType: "json",
                data: {
                    index: userIndex,
                    token: token
                },
                success: function (info) {
                    if (info.code === 500) {
                        //删除用户异常、或者失败
                        layer.msg(info.message, {
                            icon: 5,
                            time: 1000
                        }, function () {
                            load(userState);
                        });
                    } else {
                        //删除用户成功
                        layer.msg(info.message, {
                            icon: 6,
                            time: 1000
                        }, function () {
                            load(userState);
                        });
                    }
                }

            });
            layer.close(index);
        })
    }


    function modifyCss(table) {
        dataTable.buttons().container().css("display", "inline-block");
        dataTable.buttons().container().css("float", "right");
        dataTable.buttons().container().css("top", "4px");
        dataTable.buttons().container().find("a").prepend("<i class='glyphicon glyphicon-share'></i>");
        dataTable.buttons().container().appendTo('.header');
        dataTable.buttons().container().after($("#fliteData")[0]);
    }


    //搜索表中的数据
    function searchResult(value) {
        dataTable.search(value).draw();
    }


    //特殊处理，表头紧缩问题--start
    var it = null;

    function startQuery() {
        //实时刷新时间单位为毫秒
        it = setInterval('refreshQuery()', 100);

    }

    /* 刷新查询 */
    function refreshQuery() {
        var width = $("#usertId").width();
        if (width > 100) {
            initTable(resultData);
            window.clearInterval(it)
        }
    }

    //特殊处理，表头紧缩问题--end
</script>
</body>
</html>
