<!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/jquery.min.js"></script>
    <script src="../static/js/filter.js"></script>
    <style>
        .add-bank-card, .bank-card-record {
            overflow-x: hidden;
        }

        fieldset {
            margin-top: 10px;
        }

        legend {
            width: 60px;
        }

        fieldset div {
            margin-bottom: 20px;
        }

        fieldset div span {
            display: inline-block;
            width: 120px;
        }

        #certificate-type {
            height: 30px;
        }

        .bank-card-footer {
            height: 40px;
            width: 100% ；
            background-color: white;
            /* border:  1px solid #e7e7e7; */
            margin-top: 10px;
        }

        .bank-card-footer span {
            display: inline-block;
            text-align: center;
            background-color: #e7e7e7;
            border-radius: 4px;
            height: 40px;
            width: 60px;
            line-height: 40px;
            margin-left: 20px;
        }

        .bank-card-footer span:hover {
            background-color: red;
            cursor: pointer;
        }

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

        .bank-card-search {
            border-bottom: 1px solid #e7e7e7;
            margin-bottom: 10px;
            margin-top: 10px;
            padding-bottom: 10px;
        }

        .account-name-search {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="bank-card-record">
    <div class="row bank-card-search">
        <div class="col-md-4">
            <span>开户名：</span>
            <input class="account-name-search" placeholder="模糊匹配" type="text" value="">
            <button class="btn btn-info bank-card-button">搜索</button>
        </div>
    </div>
    <button class="btn btn-default btn-xs glyphicon glyphicon-plus add-card-button" type="button">添加银行卡</button>
    <div class="menu-table">
        <table>
            <thead class="thead-dark">
            <tr>
                <th>序列号</th>
                <th>商户名称(UID)</th>
                <th>银行名称</th>
                <th>银行编码</th>
                <th>对账卡类型</th>
                <th>开户名</th>
                <th>银行卡号</th>
                <th>证件类型</th>
                <th>身份证号</th>
                <th>手机号</th>
                <th>开户银行地址</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="bank_card_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 class="add-bank-card">
    <fieldset>
        <legend>添加银行卡</legend>
        <div class="row">
            <div class="col-md-4">
                <input class="bank-card-uid" type="hidden" value="">
                <div>
                    <span>商户名称：</span>
                    <select class="user-name" id="select-self-name" name="">
                    </select>
                </div>
                <div>
                    <span>银行编码：</span>
                    <input class="bank-code" type="text" value="">
                </div>
                <div>
                    <span>银行开户名：</span>
                    <input class="account-name" type="text" value="">
                </div>
                <div>
                    <span>证件类型：</span>
                    <select id="certificate-type">
                        <option value="identify-card">身份证&nbsp;</option>
                    </select>
                </div>
                <div>
                    <span>手机号：</span>
                    <input class="phone-code" placeholder="" type="text" value="">
                </div>
            </div>

            <div class="col-md-4">
                <div>
                    <span>银行名称：</span>
                    <input class="bank-name" placeholder="" type="text" value="">
                </div>
                <div>
                    <span>银行账户类型</span>
                    <select id="bank-account-type">
                        <option value="private">对私</option>
                        <option value="public">对公</option>
                    </select>
                </div>
                <div>
                    <span>银行卡账号：</span>
                    <input class="bank-no" placeholder="" type="text">
                </div>
                <div>
                    <span>证件号：</span>
                    <input class="certificate-no" placeholder="" type="text" value="">
                </div>
                <div>
                    <span>开户行详细地址：</span>
                    <input class="bank-address" placeholder="" type="text" value="">
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend style="width: 25px;">操作</legend>
        <div class="bank-card-footer">
            <span class="bank-card-cannel">取消</span>
            <span class="bank-card-save">保存</span>
        </div>
    </fieldset>
</div>

<script>
    function getCutPageval() {
        let operatorName = $(".operator-name").val();
        let displayCount = $("#display_count").val();
        let currentPage = $(".current_page").html();
        let totalPage = $(".total_page").html();
        let jumpPage = $(".jump_page input").val();
        return dataJSON = {
            "operatorName": operatorName,
            "displayCount": displayCount,
            "currentPage": currentPage,
            "totalPage": totalPage,
            "jumpPage": jumpPage
        };
    }

    function editBankCard(uid) {
        $.ajax({
            url: "/get/oneBankCard",
            data: {"uid": uid},

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.BankCardInfoList.length == 0) {
                    alert("编辑失败");
                    return;
                } else {
                    let b = res.BankCardInfoList[0];
                    $(".bank-card-uid").val(b.Uid);
                    $(".user-name").val(b.UserName);
                    $(".bank-code").val(b.BankCode);
                    $(".account-name").val(b.AccountName);
                    $(".phone-code").val(b.PhoneNo);
                    $(".bank-name").val(b.BankName);
                    $(".bank-no").val(b.BankNo);
                    $(".certificate-no").val(b.CertificateNo);
                    $(".bank-address").val(b.BankAddress);
                    $("#bank-account-type option").each(function () {
                        if ($(this).val() == b.BankAccountType) {
                            $(this).attr('selected', true);
                        } else {
                            $(this).removeAttr('selected');
                        }
                    });

                    $(".bank-card-record").hide();
                    $(".add-bank-card").show();
                }
            }
        });
    }

    $(".bank-card-button").click(function () {
        let dataJSON = getCutPageval();
        let accountNameSearch = $(".account-name-search").val();
        dataJSON["accountNameSearch"] = accountNameSearch;
        showBankCradRecord(dataJSON);
    });

    function deleteBankCard(uid) {
        $.ajax({
            url: "/delete/bankCardRecord",
            data: {"uid": uid},

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == 200) {
                    alert("删除成功");
                    showBankCradRecord(getBankCardData());
                }
            },

            error: function () {
                alert("系统异常，请稍后再试");
            }
        });
    }

    function showBankCradRecord(dataJSON) {
        // let dataJSON = getBankCardData();
        $.ajax({
            url: "/get/bankCard",
            data: dataJSON,

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                    return;
                } else {
                    $(".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("");
                    let str = "";
                    for (let i = 0; i < res.BankCardInfoList.length; i++) {
                        let v = res.BankCardInfoList[i];
                        let tmp = "<tr>" + "<th>" + (res.StartIndex + i + 1) + "</th>" +
                            "<th>" + v.UserName + "</th>" + "<th>" + v.BankName + "</th>" + "<th>" + v.BankCode + "</th>" +
                            "<th>" + v.BankAccountType + "</th>" + "<th>" + v.AccountName + "</th>" + "<th>" + v.BankNo + "</th>" +
                            "<th>" + "身份证" + "</th>" + "<th>" + v.CertificateNo + "</th>" + "<th>" + v.PhoneNo + "</th>" +
                            "<th>" + v.BankAddress + "</th>";

                        tmp = tmp + "<th>" + '<div class="btn-group" role="group" aria-label="...">' +
                            '<button type="button" value="' + v.Uid + '" class="btn btn-default" onclick="editBankCard(this.value);"><span class="glyphicon glyphicon-pencil"></span></button>' +
                            '<button type="button" value="' + v.Uid + '" class="btn btn-default" onclick="deleteBankCard(this.value);"><span class="glyphicon glyphicon-trash"></span></button>' +
                            '</div>' + "</th>" + "</tr>";
                        tmp = tmp.replace("private", "对私").replace("public", "对公");
                        str = str + tmp;
                    }

                    $("#bank_card_table_body").html(str);
                }
            },

            error: function () {
                alert("系统异常，请稍后再试");
            }
        });
    }

    $(function () {
        $(".add-bank-card").hide();
        showBankCradRecord(getBankCardData());
        $(".bank-card-record").show();
    });
    $(".bank-card-cannel").click(function (event) {
        /* Act on the event */
        $(".bank-card-record").show();
        $(".add-bank-card").hide();
    });
    $(".add-card-button").click(function () {
        clearBankCardData();
        $(".add-bank-card").show();
        $(".bank-card-record").hide();
    });

    function clearBankCardData() {
        $(".user-name").val("");
        $(".bank-code").val("");
        $(".account-name").val("");
        $(".phone-code").val("");
        $(".bank-name").val("");
        // $("#bank-account-type").val();
        $(".bank-no").val("");
        // $(".identify-card").val("");
        $(".certificate-no").val("");
        $(".bank-address").val("");
        $(".bank-card-uid").html("");
    }

    function getBankCardData() {
        let userName = $(".user-name").val();
        let bankCode = $(".bank-code").val();
        let accountName = $(".account-name").val();
        let certificateType = $("#certificate-type").val();
        let phoneNo = $(".phone-code").val();
        let bankName = $(".bank-name").val();
        let bankAccountType = $("#bank-account-type").val();
        let bankNo = $(".bank-no").val();
        let identifyCard = $(".identify-card").val();
        let certificateNo = $(".certificate-no").val();
        let bankAddress = $(".bank-address").val();
        let uid = $(".bank-card-uid").val();

        return {
            "uid": uid,
            "userName": userName,
            "bankCode": bankCode,
            "accountName": accountName,
            "certificateType": certificateType,
            "phoneNo": phoneNo,
            "bankName": bankName,
            "bankAccountType": bankAccountType,
            "bankNo": bankNo,
            "identifyCard": identifyCard,
            "certificateNo": certificateNo,
            "bankAddress": bankAddress
        };
    }

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

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

        if (dataJSON["currentPage"] == 1) {
            return;
        }
        dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) - 1;
        showBankCradRecord(dataJSON);
    });
    //点击下一页的按钮时
    $(".next_page").click(function () {
        let dataJSON = getCutPageval();

        if (dataJSON["currentPage"] == dataJSON["totalPage"]) {
            return;
        }

        dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) + 1;
        showBankCradRecord(dataJSON);
    });
    //点击跳转那一页的按钮
    $(".jump_page button").click(function () {
        let dataJSON = getCutPageval();

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

    $(".bank-card-save").click(function () {
        let dataJSON = getBankCardData();
        if (dataJSON["userName"].length <= 0) {
            alert("用户名称不能为空");
            return;
        } else if (dataJSON["bankCode"].length <= 0) {
            alert("银行编码不能为空");
            return;
        } else if (dataJSON["accountName"].length <= 0) {
            alert("银行开户名不能为空");
            return;
        } else if (dataJSON["phoneNo"].length <= 0) {
            alert("手机号不能为空");
            return;
        } else if (dataJSON["bankName"].length <= 0) {
            alert("银行名称不能为空");
            return;
        } else if (dataJSON["bankNo"].length <= 0) {
            alert("银行卡账号不能为空");
            return;
        } else if (dataJSON["certificateNo"].length <= 0) {
            alert("身份证号不能为空");
            return;
        } else if (dataJSON["bankAddress"].length <= 0) {
            alert("开户行地址不能为空");
            return;
        }
        $.ajax({
            url: "/add/bankCard",
            data: dataJSON,

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == -1) {
                    alert(res.Msg);
                } else {
                    alert("添加银行卡成功");
                    $(".bank-card-record").show();
                    $(".add-bank-card").hide();
                    showBankCradRecord(getBankCardData());
                }
            }
        });
    });

    function setAccount() {
        $.ajax({
            url: "/get/all/account",
            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else {
                    let str = '<option value="' + "" + '">' + "请选择" + '</option>';
                    for (let i = 0; i < res.AccountList.length; i++) {
                        let account = res.AccountList[i];
                        str = str + '<option value="' + account.AccountUid + '">' + account.AccountName + '</option>';
                    }
                    $("#select-self-name").html(str);
                }
            }
        });
    }

    $(function () {
        setAccount();
    });
</script>
</body>
</html>