<!doctype html>
<html lang="zh">

<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 media="screen" type="text/css">
        .search div {
            display: inline-block;
            margin-top: 10px;
        }

        .add-edit-road {
            margin-top: 10px;
            margin-right: 10px;
        }

        .add-edit-road div {
            margin-bottom: 20px;
            margin-left: 10px;
        }

        .add-edit-road textarea {
            width: 90%;
            height: 150px;
        }

        select {
            height: 25px;
            min-width: 150px;
        }

        .road-footer {
            width: 83%;
            position: fixed;
            float: left;
            bottom: 10px;
            left: 14%;
            height: 30px;
            border: 1px solid #e7e7e7;
            background-color: white;
            box-sizing: border-box;
        }

        fieldset:last-child {
            margin-bottom: 30px;
        }

        .road-cannel-button,
        .road-save-button {
            display: inline-block;
            border: 1px solid #e7e7e7;
            background: #1b6d85;
            border-radius: 5px;
            font-size: 12px;
            text-align: center;
            width: 100px;
            line-height: 26px;
            font-weight: 700;
        }

        .road-cannel-button:hover,
        .road-save-button:hover {
            cursor: pointer;
            background-color: #e7e7e7;
        }

        #product-name {
            margin-right: 80px;
        }

        .add-road-button {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
<div class="road-record">
    <div class="search">
        <div>
            <span>通道名称</span>
            <input class="road-name-search" placeholder="模糊匹配" type="text" value="">
        </div>
        <div>
            <span>产品名称</span>
            <input class="product-name-search" placeholder="模糊匹配" type="text" value="">
        </div>
        <div>
            <button class="btn btn-default road-search" type="button">搜索</button>
        </div>
    </div>
    <button class="btn btn-default btn-xs glyphicon glyphicon-plus add-road-button" type="button">添加通道</button>
    <div class="menu-table">
        <table>
            <thead class="thead-dark">
            <tr>
                <th>序列号</th>
                <th>通道名称</th>
                <th>交易类型</th>
                <th>产品名称</th>
                <th>成本汇率</th>
                <th>状态</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="road-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>

<div class="add-edit-road">
    <input class="road-uid" type="hidden" value="">
    <fieldset>
        <legend style="width: 75px;">通道基本信息</legend>
        <div>
            <label>
                <span>通道名称：</span>
                <input class="road-name" type="text" value="">
                <span class="star">*</span>
            </label>
            <label>
                <span>通道编码：</span>
                <input class="product-code" type="text" value="">
                <span class="star">*</span>
            </label>
            <label>
                <span>通道类型：</span>
                <select class="transaction-type" value="">
                    <option value="recharge">充值</option>
                    <option value="redeem">兑换</option>
                </select>
                <span class="star">*</span>
            </label>
            <label>
                <span>通道页面：</span>
                <select class="payment-html" value="">
                    <option value="index_apple.html">苹果页面</option>
                    <option value="index_ctrip.html">携程页面</option>
                    <option value="index_jd.html">京东E卡页面</option>
                    <option value="index_wrm_tb.html">沃尔玛页面(淘宝)</option>
                    <option value="index_wrm_xy.html">沃尔玛页面(咸鱼)</option>
                    <option value="index_wrm_qq_group.html">QQ群</option>
                    <option value="index_account_tao-bao.html">天猫游戏页面</option>
                </select>
                <span class="star">*</span>
            </label>
            <label>
                <span>备注：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <input class="road-remark" type="text" value="">
            </label>
        </div>
        <div>
            <span>产品名称: </span>
            <label>
                <select id="product-name">
                    {{/*
                    <option value="WEIXIN">官方微信</option>
                    */}}
                    {{/*
                    <option value="ALIPAY">官方支付宝</option>
                    */}}
                </select>
            </label>
        </div>
    </fieldset>
    <fieldset>
        <legend style="width: 50px;">费用配置</legend>
        <div>
            <span>成本费率：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input class="basic-rate" placeholder="样例：1.2" type="text" value="">
            <span class="star">*</span>
            <span>代付手续费：&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input class="settle-fee" placeholder="单位：元" type="text" value="">
            <span class="star">*</span>
        </div>
    </fieldset>
    <fieldset>
        <legend style="width: 50px;">额度设置</legend>
        <div>
            <span>通道总额度：&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input class="road-total-limit" type="text" value="">
            <span class="star">*</span>
            <span>每天额度：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input class="road-everyday-limit" type="text" value="">
            <span class="star">*</span>
        </div>
        <div>
            <span>单笔金额最小：</span>
            <input class="single-min-limit" type="text" value="">
            <span class="star">*</span>
            <span>单笔金额最大：</span>
            <input class="single-max-limit" type="text" value="">
            <span class="star">*</span>
        </div>
    </fieldset>
    <fieldset>
        <legend style="width: 50px;">时间规则</legend>
        <div>
            <span>开始时间：</span>
            <select id="road-start-hour">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
            </select>
            <span class="star"></span>
            <span>结束时间：</span>
            <select id="road-end-hour">
                <option value="23">23</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
            </select>
        </div>
    </fieldset>
    <fieldset>
        <legend style="width: 110px;">参数配置JSON格式</legend>
        <div>
            <code>
                <textarea class="road-param-json"></textarea>
            </code>
        </div>
    </fieldset>
    <div class="road-footer">
        <span class="road-cannel-button">取消</span>
        <span class="road-save-button">保存</span>
    </div>
</div>

<script>
    $(function () {
        let dataJSON = getRoadCutPagevalues();
        showRoadRecord(dataJSON);
        $(".add-edit-road").hide();
    });

    function showProduct() {
        $.ajax({
            url: "/get/product",
            success: function (res) {
                if (res.Code === 404) {
                    window.parent.location = "/login.html"
                } else if (res.Code === -1) {

                } else {
                    let str = "";
                    for (let key in res.ProductMap) {
                        let v = res.ProductMap[key];
                        str = str + '<option value="' + key + '">' + v + '</option>'
                    }
                    $("#product-name").html(str);
                }
            },
            error: function () {
                alert("系统异常，请稍后再试");
            }
        });
    }

    //点击添加通道按钮，隐藏通道列表页面，展示通道编辑添加页面
    $(".add-road-button").click(function () {
        clearRoadValues();
        showProduct();
        $(".add-edit-road").show();
        $(".road-record").hide();
    });

    function showRoadRecord(dataJSON) {
        $.ajax({
            url: "/get/road",
            data: dataJSON,

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } 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.RoadInfoList.length; i++) {
                        let v = res.RoadInfoList[i];
                        let t = "";
                        if (v.Status === "unactive") {
                            t = "<tr style=\"color: red;\">"
                        } else {
                            t = "<tr>";
                        }
                        let tmp = t + "<th>" + (res.StartIndex + i + 1) + "</th>" +
                        "<th>" + v.RoadName + "</th>" + "<th>" + v.TransactionType + "</th>" + "<th>" + v.ProductName + "</th>" +
                            "<th>" + v.BasicFee + "</th>" + "<th>" + v.Status + "</th>" + "<th>" + v.TotalLimit + "</th>" +
                            "<th>" + v.TodayLimit + "</th>" + "<th>" + v.SingleMinLimit + "-" + v.SingleMaxLimit + "</th>" +
                            "<th>" + v.StarHour + "-" + v.EndHour + "</th>" + "<th>" + v.TotalIncome + "</th>" + "<th>" + v.TodayIncome + "</th>" +
                            "<th>" + v.TotalProfit + "</th>" + "<th>" + v.TodayProfit + "</th>" + "<th>" + v.RequestSuccess + "/" + v.RequestAll + '</th>';
                        tmp = tmp.replace("unactive", "冻结").replace("active", "激活");
                        tmp = tmp + "<th>" + '<div class="btn-group" role="group" aria-label="...">' +
                            '<button type="button" value="' + v.RoadUid + '" class="btn btn-default" onclick="editRoad(this.value);"><span class="glyphicon glyphicon-pencil"></span></button>' +
                            '<button type="button" value="' + v.RoadUid + '" class="btn btn-default" onclick="updateRoadStatus(this.value);">' + "激活|冻结" + '</button>' +
                            '<button type="button" value="' + v.RoadUid + '" class="btn btn-default" onclick="deleteRoad(this.value);"><span class="glyphicon glyphicon-trash"></span></button>' +
                            '</div>' + "</th>" + "</tr>";
                        str = str + tmp;
                    }

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

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

    $(".road-save-button").click(function () {
        let dataJSON = getRoadvalues();
        $.ajax({
            url: "/add/road",
            data: dataJSON,

            success: function (res) {
                if (res.Code === 404) {
                    window.parent.location = "/login.html";
                } else {
                    if (res.Code !== 200) {
                        alert(res.Msg);
                    } else {
                        alert("添加成功");
                        $(".add-edit-road").hide();
                        showRoadRecord(getRoadCutPagevalues());
                        $(".road-record").show();
                    }
                }
            },
        });
    });
    $(".road-cannel-button").click(function () {
        $(".road-record").show();
        $(".add-edit-road").hide();
    });
    $(function () {
        $(".road-record").show();
        $(".add-edit-road").hide();
    });
    //当每页显示数更改后，执行的操作
    $("#display_count").change(function () {
        let dataJSON = getRoadCutPagevalues();
        showRoadRecord(dataJSON);
    });

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

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

        if (dataJSON["jumpPage"].length <= 0) {
            return;
        }
        showRoadRecord(dataJSON);
    });
    $(".road-search").click(function () {
        let dataJSON = getRoadCutPagevalues();
        showRoadRecord(dataJSON);
    });

    function editRoad(roadUid) {
        $(".road-record").hide();
        showProduct();
        $.ajax({
            url: "/get/oneRoad",
            data: {
                "roadUid": roadUid
            },
            success: function (res) {
                if (res.Code === 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code !== 200) {
                    alert("获取单通道信息失败");
                } else {
                    let v = res.RoadInfoList[0];
                    $(".road-uid").val(v.RoadUid);
                    $(".road-name").val(v.RoadName);
                    $(".product-code").val(v.ProductCode);
                    $(".payment-html").val(v.PaymentHtml);
                    $(".transaction-type").val(v.TransactionType)
                    $(".road-name").prop("readonly", "readonly");
                    $(".road-remark").val(v.Remark);
                    $("#product-name").val(v.ProductUid);
                    $("#product-name").attr("disabled", "disabled");
                    $(".basic-rate").val(v.BasicFee);
                    $(".settle-fee").val(v.SettleFee);
                    $(".road-total-limit").val(v.TotalLimit);
                    $(".road-everyday-limit").val(v.TodayLimit);
                    $(".single-min-limit").val(v.SingleMinLimit);
                    $(".single-max-limit").val(v.SingleMaxLimit);
                    $("#road-star-hour").val(v.StarHour);
                    $("#road-end-hour").val(v.EndHour);
                    $(".road-param-json").val(v.Params);
                    $(".road-record").hide();
                    $(".add-edit-road").show();
                }
            }
        });
    }

    function updateRoadStatus(roadUid) {
        $.ajax({
            url: "/update/roadStatus",
            data: {"roadUid": roadUid},
            success: function (res) {
                if (res.Code === 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code !== 200) {
                    alert("状态更新失败");
                } else {
                    alert("更新状态成功")
                    showRoadRecord(getRoadCutPagevalues());
                }
            },
            error: function (res) {
                alert("系统异常，请稍后再试");
            }
        });
    }

    function deleteRoad(roadUid) {
        if (!window.confirm("是否删除该项")) {
            return false;
        }
        let dataJSON = getRoadCutPagevalues();
        dataJSON["roadUid"] = roadUid;
        $.ajax({
            url: "/delete/road",
            data: dataJSON,

            success: function (res) {
                if (res.Code === 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code !== 200) {
                    alert("删除失败")
                } else {
                    alert("删除成功");
                    showRoadRecord(getRoadCutPagevalues());
                }
            },
            error: function (res) {
                alert("系统异常，请稍后再试");
            }
        });
    }

    function getRoadCutPagevalues() {
        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-search").val();
        let roadUid = $(".road-number-search").val();
        let productName = $(".product-name-search").val();
        let productUid = $(".product-number-search").val();
        return dataJSON = {
            "roadName": roadName,
            "roadUid": roadUid,
            "productName": productName,
            "productUid": productUid,
            "displayCount": displayCount,
            "currentPage": currentPage,
            "totalPage": totalPage,
            "jumpPage": jumpPage
        };
    }

    function clearRoadValues() {
        $(".road-uid").val("");
        $(".road-name").val("");
        $(".road-remark").val("");
        $("#product-name").val("");
        $(".basic-rate").val("");
        $(".settle-fee").val("");
        $(".road-total-limit").val("");
        $(".road-everyday-limit").val("");
        $(".single-min-limit").val("");
        $(".single-max-limit").val("");
        $(".road-star-hour").val("");
        $(".road-end-hour").val("");
        $(".road-param-json").val("");
    }

    //判断字符串是不是json串的函数
    function isJSON(str) {
        try {
            // statements
            var obj = JSON.parse(str);
            if (typeof obj == 'object' && obj) {
                return true;
            } else {
                return false;
            }
        } catch (e) {
            // statements
            return false;
        }
    }

    function getRoadvalues() {
        let roadUid = $(".road-uid").val();
        let roadName = $(".road-name").val();
        let roadRemark = $(".road-remark").val();
        let productName = $("#product-name").val();
        let basicRate = $(".basic-rate").val();
        let settleFee = $(".settle-fee").val();
        let roadTotalLimit = $(".road-total-limit").val();
        let roadEverydayLimit = $(".road-everyday-limit").val();
        let singleMinLimit = $(".single-min-limit").val();
        let singleMaxLimit = $(".single-max-limit").val();
        let startHour = $("#road-start-hour").val();
        let endHour = $("#road-end-hour").val();
        let params = $(".road-param-json").val();
        let productCode = $(".product-code").val();
        let paymentHtml = $(".payment-html").val();
        let transactionType = $(".transaction-type").val();

        if (params.length > 0) {
            if (!isJSON(params)) {
                alert("参数配置不是json格式");
                return
            }
        }

        return {
            "roadUid": roadUid,
            "roadName": roadName,
            "roadRemark": roadRemark,
            "productName": productName,
            "basicRate": basicRate,
            "settleFee": settleFee,
            "roadTotalLimit": roadTotalLimit,
            "roadEverydayLimit": roadEverydayLimit,
            "singleMinLimit": singleMinLimit,
            "singleMaxLimit": singleMaxLimit,
            "startHour": startHour,
            "endHour": endHour,
            "params": params,
            "productCode": productCode,
            "paymentHtml": paymentHtml,
            "transactionType": transactionType
        };
    }
</script>
</body>

</html>