<!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">
    <link href="../static/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
          type="text/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>
    <script src="../static/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="../static/lib/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../static/js/basic.js"></script>
    <style>
        .search label {
            font-weight: normal;
            margin-right: 20px;
        }

        select {
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        #total-amount, #total-platform-profit {
            display: inline-block;
            margin-right: 40px;
        }

        .profit {
            font-size: 16px;
            margin-top: 10px;
        }

        table tr {
            height: 28px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="search">
    <label>
        商户名称：
        <select id="select-merchant-name" name=""></select>
    </label>
    <label for="">
        代理名称：
        <select id="select-agent-name" name=""></select>
    </label>
    <label for="">
        上游通道名：
        <select id="search-order-supplier-name" name=""></select>
    </label>
    <label>
        支付类型：
        <select id="pay-type" name="">
            <option value="">请选择</option>
            <option value="CARD_DH">卡密兑换</option>
            <option value="WEIXIN_SCAN">微信扫码</option>
            <option value="WEIXIN_H5">微信H5</option>
            <option value="WEIXIN_SYT">微信收银台</option>
            <option value="ALI_SCAN">支付宝扫码</option>
            <option value="ALI_H5">支付宝H5</option>
            <option value="ALI_SYT">支付宝收银台</option>
            <option value="QQ_SCAN">QQ扫码</option>
            <option value="QQ_H5">QQ-H5</option>
            <option value="QQ_SYT">QQ收银台</option>
            <option value="UNION_SCAN">银联扫码</option>
            <option value="UNION_H5">银联H5</option>
            <option value="UNION_PC_WAP">银联pc-web</option>
            <option value="UNION_SYT">银联收银台</option>
            <option value="UNION_FAST">银联快捷</option>
            <option value="BAIDU_SCAN">百度钱包扫码</option>
            <option value="BAIDU_H5">百度钱包H5</option>
            <option value="BAIDU_SYT">百度钱包收银台</option>
            <option value="JD_SCAN">京东扫码</option>
            <option value="JD_H5">京东H5</option>
            <option value="JD_SYT">京东收银台</option>
        </select>
    </label>
    <label>
        开始时间：
        <input class="start-time" id="start-time" name="" type="text" value="" value="">
    </label>
    <label>
        结束时间：
        <input class="end-time" id="end-time" name="" type="text" value="" value="">
    </label>
    <label for="">
        <input class="btn btn-primary" onclick="search();" type="button" value="搜索">
    </label>

    <label class="profit" for="">
        <span class="color-red">交易总金额：</span>
        <span class="color-red" id="total-amount">00.00</span>
        <span class="disabled"></span>
        <span class="color-red">平台总纯利润：</span>
        <span class="color-red" id="total-platform-profit">00.00</span>
        <span class="disabled"></span>
        <span class="color-red">代理总利润：</span>
        <span class="color-red" id="total-agent-profit">00.00</span>
    </label>
</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>
            <th>平台纯利润</th>
            <th>代理纯利润</th>
        </tr>
        </thead>
        <tbody id="table-body">
        </tbody>
    </table>
</div>

<script>
    function getCutValues() {

        let merchantUid = $("#select-merchant-name").val();
        let agentUid = $("#select-agent-name").val();
        let supplierUid = $("#search-order-supplier-name").val();
        let payType = $("#pay-type").val();
        let startTime = $("#start-time").val();
        let endTime = $("#end-time").val();

        return {

            "merchantUid": merchantUid,
            "agentUid": agentUid,
            "supplierUid": supplierUid,
            "payType": payType,
            "startTime": startTime,
            "endTime": endTime
        };
    }

    function randProfit(res) {
        $("#total-amount").html(res.TotalAmount);
        $("#total-platform-profit").html(res.PlatformTotalProfit);
        $("#total-agent-profit").html(res.AgentTotalProfit);

        let str = "";
        for (let i = 0; i < res.ProfitList.length; i++) {
            let v = res.ProfitList[i];
            let tmp = "<tr>" + "<th>" + (i + 1) + "</th>" +
                "<th>" + v.MerchantName + "</th>" + "<th>" + v.AgentName + "</th>" + "<th>" + v.SupplierName + "</th>" +
                "<th>" + v.PayTypeName + "</th>" + "<th>" + v.OrderAmount + "</th>" + "<th>" + v.OrderCount + "</th>" +
                "<th>" + v.PlatformProfit + "</th>" + "<th>" + v.AgentProfit + "</th>" + "</tr>";
            str = str + tmp;
        }

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

    function search() {
        $.ajax({
            url: "/get/profit",
            data: getCutValues(),
            success: function (res) {
                if (res.Code === 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code === -1) {
                    alert("系统异常，请稍后再试");
                } else {
                    randProfit(res);
                }
            },
        });
    }

    $(function () {
        setMerchant();
        setSupplier();
        setAgent();
        search();
    })
</script>
</body>
</html>