<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <link href="../static/css/basic.css" rel="stylesheet" type="text/css">
    <link src="../static/lib/bootstrap/css/bootstrap.min.css">
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/js/filter.js"></script>
    <style>
        .panel-body label {
            font-weight: normal;
            margin-right: 20px;
        }

        .margin-bottom {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">审核处理</h3>
    </div>
    <div class="panel-body">
        <div class="margin-bottom">
            <label for="">
                <input checked name="confirm" type="radio" value="payfor_road">通道打款
            </label>
            <label for="">
                <input name="confirm" type="radio" value="payfor_refuse">拒绝打款
            </label>
            <label for="">
                <input name="confirm" type="radio" value="payfor_hand">手动打款
            </label>
            <label for="">
                备注：<input id="remark" type="text" value=""><span class="color-red">   *必须</span>
            </label>
            <input class="btn btn-success" onclick="yes();" type="button" value="确定">
        </div>
        <div class="margin-bottom" id="road">
            <label for="">
                请选择打款通道：
                <input id="road-name" type="text" value=""><span class="color-red">  *必须</span>
                <input class="btn btn-info" id="road-search" type="button" value="搜索">
            </label>
            <label for="">
                <input id="balance" type="text" value="">
                <button class="btn btn-primary" onclick="getBalance();" type="button">显示余额
            </label>

        </div>
    </div>
</div>
{{/*展示通道列表*/}}
<div class="road-list">
    <div class="menu-table table-responsive">
        <table>
            <thead class="thead-dark">
            <tr>
                <th>序列号</th>
                <th>通道名称</th>
                <th>通道uid</th>
                <th>上游名称</th>
                <th>状态</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="table-body">
            </tbody>
        </table>
    </div>
    <!-- 分页插件 -->
    <div class="cut_page">
        <li>
            每页显示
            <select id="display_count">
                <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>

<script>
    $("input[name='confirm']").change(function () {
        let confirmType = $("input[name='confirm']:checked").val();
        if (confirmType != "allow") {
            $("#road").hide();
            $(".road-list").hide();
        } else if (confirmType == "allow") {
            $("#road").show();
            ajaxRoadList(getCutPageValues());
            $(".road-list").show();
        }
    });

    function getCutPageValues() {
        let displayCount = $("#display_count").val();
        let currentPage = $(".current_page").html();
        let totalPage = $(".total_page").html();
        let jumpPage = $(".jump_page input").val();
        let roadName = $("#road-name").val();
        return {
            "displayCount": displayCount,
            "currentPage": currentPage,
            "totalPage": totalPage,
            "jumpPage": jumpPage,
            "roadName": roadName
        };
    }

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

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

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

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

    function setCutPageValues(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 randRoadList(res) {
        setCutPageValues(res);
        let str = "";
        for (let i = 0; i < res.RoadInfoList.length; i++) {
            let v = res.RoadInfoList[i];
            let tmp = "<tr>" + "<th>" + (res.StartIndex + i + 1) + "</th>" +
                "<th>" + v.RoadName + "</th>" + "<th>" + v.RoadUid + "</th>" + "<th>" + v.ProductName + "</th>" +
                "<th>" + v.Status + "</th>" + "<th>" + new Date(v.CreateTime).toLocaleString() + "</th>";

            tmp = tmp.replace("unactive", "不可用").replace("active", "正常");
            tmp = tmp + '<th>' + '<button type="button" value="' + v.RoadName + '" class="btn btn-default" onclick="save(this.value);">' + "确定" + '</button>' + '</th></tr>';

            str = str + tmp;
            $("#table-body").html(str);
        }
    }

    function ajaxRoadList(dataJSON) {
        $.ajax({
            url: "/get/road",
            data: dataJSON,
            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else {
                    randRoadList(res);
                }
            },
            error: function () {
                alert("系统异常,请稍后再试")
            }
        });
    }

    function getBalance() {
        let roadName = $("#road-name").val();
        $.ajax({
            url: "/get/balance",
            data: {
                "roadName": roadName
            },
            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else {
                    $("#balance").val(res.Balance);
                }
            },
            error: function () {
                alert("查询异常");
            }
        });
    }

    function yes() {
        let roadName = $("#road-name").val();
        let remark = $("#remark").val();
        let bankOrderId = $("#main-bank-order-id").val();
        let confirmType = $("input[name='confirm']:checked").val();
        if (remark.length == 0) {
            alert("备注不能为空")
            return
        }
        $.ajax({
            url: "/choose/payfor/road",
            data: {
                "roadName": roadName,
                "bankOrderId": bankOrderId,
                "remark": remark,
                "confirmType": confirmType
            },
            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == -1) {
                    alert(res.Msg);
                } else {
                    alert("下发已经受理");
                    loadMainContent("/payfor_record.html");
                }
            },
            error: function () {
                alert("系统异常,请稍后再试")
            }
        });
    }

    function save(roadName) {
        $("#road-name").val(roadName);
    }

    //搜索列表
    $("#road-search").click(function () {
        let dataJSON = getCutPageValues();
        ajaxRoadList(dataJSON);
    });
    $(function () {
        let dataJSON = getCutPageValues();
        ajaxRoadList(dataJSON)
    });
</script>
</body>
</html>