<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理后台</title>
    <link href="../static/css/basic.css" rel="stylesheet" type="text/css">
    <script src="../static/js/filter.js"></script>
    <style>
        #create-agent span {
            display: inline-block;
            width: 100px;
        }

        #create-agent div {
            margin-bottom: 15px;
        }

        .add-agnet-button {
            margin-bottom: 10px;
        }

        #agent-name-error, #agent-phone-error, #agent-login-password-error, #agent-vertify-password-error {
            display: inline-block;
            color: red;
            margin-left: 10px;
        }

        #reset-agent-password span {
            display: inline-block;
            width: 100px;
        }

        #reset-agent-password div {
            margin-bottom: 10px;
        }

        #agent-login-password-error-reset, #agent-vertify-password-error-reset {
            color: red;
        }
    </style>
</head>
<body>
<div class="agent-record">
    <div class="search">
        <div>
            代理名称：
            <input id="agent-name-search" placeholder="模糊匹配" type="text" value="">
        </div>
        <div>
            <button class="btn btn-default" id="agent-search" type="button">搜索</button>
        </div>
    </div>
    <button class="btn btn-default btn-xs glyphicon glyphicon-plus add-agnet-button" type="button">创建代理</button>
    <!-- 创建代理的模态框 -->
    <div aria-labelledby="myModalLabel" class="modal fade" data-backdrop="static" data-keyboard="false" id="create-agent"
         role="dialog" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">创建代理商</h4>
                </div>
                <div class="modal-body modal-body-agent">
                    <div>
                        <span>代理商名称：</span>
                        <input id="agent-name-modal" type="text">
                        <span id="agent-name-error"></span>
                    </div>
                    <div>
                        <span>注册手机号：</span>
                        <input id="agent-phone-modal" type="text">
                        <span id="agent-phone-error"></span>
                    </div>
                    <div>
                        <span>账号登录密码：</span>
                        <input id="agent-login-password-modal" type="password">
                        <span id="agent-login-password-error"></span>
                    </div>
                    <div>
                        <span>确认密码：</span>
                        <input id="agent-vertify-password-modal" type="password">
                        <span id="agent-vertify-password-error"></span>
                    </div>

                    <div>
                        <span>代理商状态：</span>
                        <select id="agent-status">
                            <option value="active">激活</option>
                            <option value="unactive">冻结</option>
                            }
                        </select>
                    </div>
                    <div>
                        <span>备注：</span>
                        <textarea id="agent-remark"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default cancel-agent" data-dismiss="modal" type="button">取消</button>
                    <button class="btn btn-primary save-agent" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="menu-table">
        <table>
            <thead class="thead-dark">
            <tr>
                <th>序列号</th>
                <th>状态</th>
                <th>代理编号</th>
                <th>代理名称</th>
                <th>登录账号</th>
                <th>重置密码</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="agent-table-body">
            </tbody>
        </table>
    </div>
    <!-- 分页插件 -->
    <div class="cut_page">
        <li>
            每页显示
            <select id="display_count">
                <option value="4">4</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </li>

        <li class="current_total_page">第<span class="current_page">0</span>/<span class="total_page">0</span>页</li>
        <li class="pre_page">上一页</li>
        <li class="next_page">下一页</li>
        <li class="jump_page">跳转 <input name="jump_page" type="text" value="">
            <button class="btn btn-default" type="button">Go</button>
        </li>
    </div>
</div>

<!-- 充值密码 -->
<div aria-labelledby="myModalLabel" class="modal fade" data-backdrop="static" data-keyboard="false" id="reset-agent-password"
     role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">重置密码</h4>
            </div>
            <div class="modal-body modal-body-agent">
                <input hidden="true" id="agent-uid-reset" type="text" value="">
                <div>
                    <span>新密码：</span>
                    <input id="agent-login-password-reset" type="password">
                    <span id="agent-login-password-error-reset"></span>
                </div>
                <div>
                    <span>确认新密码：</span>
                    <input id="agent-vertify-password-reset" type="password">
                    <span id="agent-vertify-password-error-reset"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default cancel-agent-reset" data-dismiss="modal" type="button">放弃</button>
                <button class="btn btn-primary save-agent-reset" type="button">重置</button>
            </div>
        </div>
    </div>
</div>

<!-- 操作代理商 -->
<div aria-labelledby="myModalLabel" class="modal fade" data-backdrop="static" data-keyboard="false" id="operator-agent"
     role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">代理商操作</h4>
            </div>
            <div class="modal-body modal-body-agent">
                <input hidden="true" id="agent-uid-operator" type="text" value="">
                <div>
                    <span>操作类型：</span>
                    <select id="agent-opertor">
                        <option value="plus-amount">加款</option>
                        <option value="sub-amount">减款</option>
                        <option value="freeze-amount">冻结</option>
                        <option value="unfreeze-amount">解冻</option>
                    </select>
                </div>
                <div>
                    <span>操作金额：</span>
                    <input id="agent-opertor-amount" type="password">
                </div>
                <div>
                    <span>操作结果：</span>
                    <span></span>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default cancel-agent-reset" data-dismiss="modal" type="button">放弃</button>
                <button class="btn btn-primary save-agent-reset" type="button">重置</button>
            </div>
        </div>
    </div>
</div>

<script>
    function getAgentModalContent() {
        let agentName = $("#agent-name-modal").val();
        let agentPhone = $("#agent-phone-modal").val();
        let agentLoginPassword = $("#agent-login-password-modal").val();
        let agentVertifyPassword = $("#agent-vertify-password-modal").val();
        let agentRemark = $("#agent-remark").val();
        let status = $("#agent-status").val();

        return {
            "agentName": agentName,
            "agentPhone": agentPhone,
            "agentLoginPassword": agentLoginPassword,
            "agentVertifyPassword": agentVertifyPassword,
            "agentRemark": agentRemark,
            "status": status
        };
    }

    function getAgentCutPageValues() {
        let displayCount = $("#display_count").val();
        let currentPage = $(".current_page").html();
        let totalPage = $(".total_page").html();
        let jumpPage = $(".jump_page input").val();
        let agentName = $("#agent-name-search").val();

        return {
            "displayCount": displayCount,
            "currentPage": currentPage,
            "totalPage": totalPage,
            "jumpPage": jumpPage,
            "agentName": agentName
        };
    }

    function clearAgentModalContent() {
        $("#agent-name-modal").val("");
        $("#agent-phone-modal").val("");
        $("#agent-login-password-modal").val("");
        $("#agent-vertify-password-modal").val("");
        $("#agent-remark").val("");
    }

    function clearAgentModalError() {
        $("#agent-name-error").html("");
        $("#agent-phone-error").html("");
        $("#agent-login-password-error").html("");
        $("#agent-vertify-password-error").html("");
    }

    function clearAgentCutPageValues(res) {
        $(".current_page").html(res.CurrentPage);
        $(".total_page").html(res.TotalPage);
        $("#display_count option").each(function () {
            if ($(this).text() == res.DisplayCount) {
                $(this).attr('selected', true);
            }
        });
        $(".jump_page input").val("");
    }

    function showAgentList(res) {
        clearAgentCutPageValues(res);
        let str = "";
        for (let i = 0; i < res.AgentList.length; i++) {
            let v = res.AgentList[i];
            let tmp = "";
            if (v.Status == "unactive") {
                tmp = "<tr style='color: red;'>";
            } else {
                tmp = "<tr>";
            }

            tmp = tmp + "<th>" + (res.StartIndex + i + 1) + "</th>" + "<th>" + v.Status + "</th>" + "<th>" + v.AgentUid + "</th>" +
                "<th>" + v.AgentName + "</th>" + "<th>" + v.AgentPhone + "</th>";

            tmp = tmp + "<th>" + '<button type="button" value="' + v.AgentUid + '" class="btn btn-default" onclick="resetPassword(this.value);">' +
                '<span class="glyphicon glyphicon-edit"></span></button>' + "</th>";

            tmp = tmp.replace("unactive", "冻结").replace("active", "激活");

            tmp = tmp + "<th>" + '<div class="btn-group" role="group" aria-label="...">' +
                '<button type="button" value="' + v.AgentUid + '" class="btn btn-default" onclick="updateAgentStatus(this.value);">' + "激活|冻结" + '</button>' +
                '<button type="button" value="' + v.AgentUid + '" class="btn btn-default" onclick="deleteAgent(this.value);"><span class="glyphicon glyphicon-trash"></span></button>' +
                '</div>' + "</th>" + "</tr>";
            str = str + tmp;
        }

        $("#agent-table-body").html(str);
    }

    function resetPassword(agentUid) {
        $("#agent-uid-reset").val(agentUid);
        $("#agent-login-password-reset").val("");
        $("#agent-vertify-password-reset").val("");
        $("#agent-login-password-error-reset").html("");
        $("#agent-vertify-password-error-reset").html("");
        $("#reset-agent-password").modal();
    }

    function updateAgentStatus(agentUid) {
        $.ajax({
            url: "/update/agent/status",
            data: {
                "agentUid": agentUid
            },

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == -1) {
                    alert("处理失败");
                } else {
                    ajaxAgentList(getAgentCutPageValues());
                    alert("操作成功")
                }
            }
        });
    }

    function deleteAgent(agentUid) {
        if (!window.confirm("确定删除该代理商吗？")) {
            return;
        }
        $.ajax({
            url: "/delete/agent",
            data: {
                "agentUid": agentUid
            },
            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == -1) {
                    alert(res.Msg);
                } else {
                    alert("删除成功");
                    ajaxAgentList(getAgentCutPageValues());
                }
            },
            error: function (res) {
                alert("系统异常，请稍后再试");
            }
        });
    }

    function ajaxAgentList(dataJSON) {
        $.ajax({
            url: "/get/agent",
            data: dataJSON,

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == -1) {
                    alert("获取代理数据失败");
                } else {
                    showAgentList(res);
                }
            }
        });
    }

    //当每页显示数更改后，执行的操作
    $("#display_count").change(function () {
        let dataJSON = getAgentCutPageValues();
        ajaxAgentList(dataJSON);
    });

    //点击上一页的按钮
    $(".pre_page").click(function () {
        let dataJSON = getAgentCutPageValues();

        if (dataJSON["currentPage"] == 1) {
            return;
        }
        dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) - 1;
        ajaxAgentList(dataJSON);
    });
    //点击下一页的按钮时
    $(".next_page").click(function () {
        let dataJSON = getAgentCutPageValues();
        if (dataJSON["currentPage"] == dataJSON["totalPage"]) {
            return;
        }
        dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) + 1;
        ajaxAgentList(dataJSON);
    });
    //点击跳转那一页的按钮
    $(".jump_page button").click(function () {
        let dataJSON = getAgentCutPageValues();

        if (dataJSON["jumpPage"].length <= 0) {
            return;
        }
        ajaxAgentList(dataJSON);
    });

    $(".save-agent-reset").click(function () {
        let agentUid = $("#agent-uid-reset").val();
        let newPassword = $("#agent-login-password-reset").val();
        let newVertifyPassword = $("#agent-vertify-password-reset").val();
        $("#agent-login-password-error-reset").html("");
        $("#agent-vertify-password-error-reset").html("");
        $.ajax({
            url: "/reset/agent/password",
            data: {
                "agentUid": agentUid,
                "newPassword": newPassword,
                "newVertifyPassword": newVertifyPassword
            },

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == -2) {
                    alert("充值代理商密码遇到错误");
                } else if (res.Code == -1) {
                    $(res.Key).html(res.Msg);
                } else {
                    alert("重置代理商密码成功");
                    $(".cancel-agent-reset").trigger('click');
                }
            },
            error: function (res) {
                alert("系统异常，请稍后再试");
            }
        });
    });

    $(".save-agent").click(function () {
        clearAgentModalError();
        let dataJSON = getAgentModalContent();
        $.ajax({
            url: "/add/agent",
            data: dataJSON,

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == -1) {
                    $(res.Key).html(res.Msg);
                } else {
                    alert("添加成功");
                    $(".cancel-agent").trigger('click');
                    ajaxAgentList(getAgentCutPageValues());
                }
            },
            error: function (res) {
                alert("系统异常，请稍后再试");
            }
        });
    });

    $(".add-agnet-button").click(function () {
        clearAgentModalContent();
        clearAgentModalError();
        $("#create-agent").modal();
    });

    $(".cancel-agent").click(function () {
        clearAgentModalError();
        clearAgentModalContent();
    });
    $(function () {
        ajaxAgentList(getAgentCutPageValues());
    });
</script>
</body>
</html>