<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <jsp:include page="../../common.jsp" />
    <style type="text/css">
        .layui-table th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="row animated fadeInRight" style="margin: 0;">
    <div class="wrapper wrapper-content mt5 right-content ml5 mr5">
        <div class="toolbar-panel bdd">
            <div class="toolbar-box">
                <div class="toolbar-head clearfix lgraybg pt5 pb10 pl10 bdbd">
                    <!-- 顶部按钮 -->
                    <div class="tools fr">
                        <a href="javascript:void(0);" class="collapse dblock f14 dgray mr5">
                            <i class="fa-2x fa fa-angle-double-up"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!--搜索条件 -->
            <div class="toolbar-body">
                <form class="layui-form" action="" style="margin-top: 10px" lay-filter="formCondition">
                    <div class="row pt10 pb10 whitebg ml0 mr0">
                        <span class="dlblock w100 textr">订单号：</span>
                        <span class="bdc pt6 pb6 pl6 pr5 w180 dlblock">
                        <input type="text" id="orderNumber" placeholder="请输入订单号">
                    </span>
                        <span class="dlblock w100 textr">商户名称：</span>
                        <span class="bdc pt6 pb6 pl6 pr5 w180 dlblock">
                        <input type="text" id="alias" placeholder="请输入商户名称">
                    </span>
                        <span class="dlblock w100 textr">分润人ID：</span>
                        <span class="bdc pt6 pb6 pl6 pr5 w180 dlblock">
                        <input type="text" id="userId" placeholder="请输分润人ID">
                    </span>
                    </div>
                </form>
                <div class="box-flex fw600 pb20 mt20 f18" style="justify-content:space-around;">
                    <div>交易总额：<span id="five" style="color:#ff5e5f;"></span>元</div>
                    <div>分润总额：<span id="three" style="color:#ff5e5f;"></span>元</div>
                </div>

            </div>
        </div>
    </div>

    <!-- 表单数据 -->
    <table class="layui-hide" id="table" lay-filter="table"></table>
<%--    <!-- 表单数据 -->--%>
<%--    <div class="mb20 mt10">--%>
<%--        <div class="whitebg pl10 pr10">--%>
<%--            <table class="layui-table">--%>
<%--                <thead>--%>
<%--                <tr>--%>
<%--                    <th class="textc">--%>
<%--                        <div class="checker" id="allCheck">--%>
<%--                            <span class=""><input type="checkbox" value="" ></span>--%>
<%--                        </div>--%>
<%--                    </th>--%>
<%--                    <th class="textc">序号</th>--%>
<%--                    <th class="textc noExl">用户ID</th>--%>
<%--                    <th class="textc ">订单号</th>--%>
<%--                    <th class="textc ">商户名称</th>--%>
<%--                    <th class="textc ">订单金额</th>--%>
<%--                    <th class="textc ">商户费率</th>--%>
<%--                    <th class="textc ">分润总金额</th>--%>
<%--                    <th class="textc ">直推/手机号</th>--%>
<%--                    <th class="textc ">直推分润</th>--%>
<%--                    <th class="textc ">间推/手机号</th>--%>
<%--                    <th class="textc ">间推分润</th>--%>
<%--                    <th class="textc ">二级间推/手机号</th>--%>
<%--                    <th class="textc ">二级间推分润</th>--%>
<%--                    <th class="textc ">代理分润</th>--%>
<%--                    <th class="textc ">升级/手机号</th>--%>
<%--                    <th class="textc ">升级分润</th>--%>
<%--                </tr>--%>
<%--                </thead>--%>
<%--                <!-- 数据体 -->--%>
<%--                <tbody id="data_content">--%>
<%--                </tbody>--%>
<%--            </table>--%>

<%--            <!-- footer -->--%>
<%--            <div class="clearfix mb10 pb20">--%>
<%--                <div class="layui-tab-item fr">--%>
<%--                    <span class="dlblock vm">当前第<span class="now" id="currPage"></span>页 , </span>--%>
<%--                    <span class="dlblock vm">共<span class="count" id="pageCount"></span>页 </span>--%>
<%--                    <div class="pagination dlblock vm" id="pagination"></div>--%>
<%--                    <span class="dlblock vm ml10">总记录数<span class="now" id="totalCount"></span>条</span>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
</div>

<script id="toolBar" type="text/html">
    <a class="layui-btn layui-btn-sm" lay-event="search">
        <i class="layui-icon layui-icon-search"></i>查询
    </a>
</script>
</body>
<%--<script>
    layui.use(['table', 'layer'], function(){
        var table = layui.table;
        var layer = layui.layer;
    });
</script>--%>
<script>
    var layer;
    var form;
    var table;
    var laydate;
    var dropdown;

    layui.use(['table', 'layer', 'form'], function() {
        layer = layui.layer;
        form = layui.form;
        table = layui.table;

        table.render({
            elem: '#table'
            , id: 'table'
            , url: ctx + '/merchantOrder/profit/page2' //数据接口
            , autoSort: false
            , where: form.val("formCondition")
            , response: {
                statusCode: 200
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.pageData.total, //解析数据长度
                    "data": res.data.pageData.records //解析数据列表
                };
            }
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , even: true
            , title: '推广员列表'
            , page: true //开启分页
            , toolbar: '#toolBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['filter']
            , cols: [[
                {type: 'checkbox', minWidth: 40, rowspan: 2}
                , {field: 'userId', title: '用户id', width: 110, align: "left"}
                , {field: 'orderNumber', title: '订单号', minWidth: 86, align: "left"}
                , {field: 'merchantName', title: '商户名', minWidth: 86, align: "left"}
                , {field: 'consumeFee', title: '订单金额', minWidth: 86, align: "left", templet: function(d) {
                        return d.consumeFee.toFixed(2);
                    }}
                , {title: '商户费率', align: "left", width: 86, templet: function(d) {
                        return (d.mercRate/100)+'%';
                    }}
                , {field: 'shareMoney', title: '分润总金额', minWidth: 86, templet: function(d) {
                        return d.shareMoney.toFixed(4);
                    }}
                , {title: '直推/手机号', align: "left", minWidth: 176, templet: function(d) {
                        return (d.oneName +' / '+ d.onePhone);
                    }}
                , {title: '直推分润', minWidth: 86, align: 'left', templet: function(d) {
                        return (d.oneFee.toFixed(4) === '0.0000'  ? '' : d.oneFee.toFixed(4));
                    }}
                , {title: '间推/手机号', minWidth: 176, align: 'left', templet: function(d) {
                        return (d.twoName + ' / ' + d.twoPhone);
                    }}
                , {title: '间推分润', minWidth: 86, align: 'left', templet: function(d) {
                        return (d.twoFee.toFixed(4) === '0.0000'  ? '' : d.twoFee.toFixed(4));
                    }}
                , {title: '二级间推/手机号', minWidth: 176, align: 'left', templet: function(d) {
                        return (d.threeName + ' / ' + d.threePhone);
                    }}
                , {title: '二级间推分润', minWidth: 86, align: 'left', templet: function(d) {
                        return (d.threeFee.toFixed(4) === '0.0000' ? '' : d.threeFee.toFixed(4));
                    }}
                , {title: '代理分润', minWidth: 86, align: 'left', templet: function(d) {
                        return (d.toAgentFeeCount.toFixed(4) === '0.0000' ? '' : d.toAgentFeeCount.toFixed(4));
                    }}
                , {title: '升级/手机号', minWidth: 176, align: 'left', templet: function(d) {
                        return (d.toUpName + ' / ' + d.toUpName);
                    }}
                , {title: '升级分润', minWidth: 86, align: 'left', templet: function(d) {
                        return (d.toUpFee.toFixed(4) === '0.0000' ? '' : d.toUpFee.toFixed(4));
                    }}
            ]]
            , done: function (res, curr, count) {
                console.log(res);
                $("#five").html(res.transAmountCount);
                $("#three").html(res.shareAmountCount);
            }
        });

        table.on('toolbar(table)', function (obj) {
            switch (obj.event) {
                case 'search':
                    queryData();
                    break;
            }
        });
    });

    //查询
    function queryData() {
        table.reload('table', {
            page: {
                curr: 1
            }
            , where: form.val("formCondition")
        });
    }

    var pageIndex=1;
    $(document).ready(function(){
        //调用查询
        pageIndex = StringUtil.getQueryString('pageIndex');
        if(pageIndex==undefined||pageIndex==null){
            pageIndex=1;
        }
        // queryProfitOrderList(pageIndex);
        //绑定hover操作
        $(document).on('mouseenter','.listOperaters',function(){
            $(this).children(".ops_itemDiv").show();
            var width=15;
            $(this).children('div').find('li').each(function(){
                //获取li宽度
                width+=$(this).width();
            });
            $(this).children('div').width(width);
        })
        $(document).on('mouseleave','.listOperaters',function(){
            $(this).children(".ops_itemDiv").hide();
        });


        //行选中事件
        $("#allCheck").find("span").click(function() {
            $(this).toggleClass('checked');
            if($(this).hasClass('checked')){
                //所有列选中
                $(".checker").find("span").each(function () {
                    $(this).addClass("checked");
                })
            }else{
                //所有列取消选中
                $(".checker").find("span").each(function () {
                    $(this).removeClass("checked");
                })
            }
        });

        //单个选中
        $(document).on('click','.checkeBox span',function() {
            $(this).toggleClass('checked');
            //设置头部事件
            var length=$('.checkeBox span').length;
            var count=0;
            $(".checkeBox").find("span").each(function () {
                if($(this).hasClass("checked")){
                    count++;
                }
            })
            //全选
            if(count==length){
                $("#allCheck").find("span").addClass('checked');
            }else{
                $("#allCheck").find("span").removeClass('checked');
            }
        })
        //左右div高度相等
        var left_content_height = $(".right-content").height();
        $(".left-content").height(left_content_height+35);
        var sub_left_height=$(".res-menu").height(left_content_height-60);
    });

    //查询
    function queryProfitOrderList(index){
        if(typeof(index)=='undefined'){
            index=1;
        }
        var url= ctx +'/merchantOrder/profit/page';
        $.ajax({
            url:url,
            type:"post",
            dataType:"json",
            data:{
                "currPage":index,
                "orderNumber":$("#orderNumber").val(),
                "alias":$("#alias").val(),
                "userId":$("#userId").val(),
            },
            success:function(result){
                var presentPage = result.currPage;
                //渲染数据
                $('#data_content').empty();
                $.each(result.orderProfitList,function(i){
                    var index = (presentPage-1)*12+i+1;
                    var orderProfit=result.orderProfitList[i];
                    var data='';
                    data+='<tr class="odd">';
                    data+='<td class="textc">';
                    data+='		 <div class="checker checkeBox">';
                    data+='		 <span class="" "><input type="checkbox"  value=""></span>';
                    data+='		</div>';
                    data+='</td>';
                    data+='<td class="textc">'+index+'</td>';
                    data+='<td class="textc">'+orderProfit.userId+'</td>';
                    data+='<td class="textc">'+orderProfit.orderNumber+'</td>';
                    data+='<td class="textc">'+orderProfit.merchantName+'</td>';
                    data+='<td class="textc">'+orderProfit.consumeFee.toFixed(2)+'</td>';
                    data+='<td class="textc">'+(orderProfit.mercRate/100)+'%</td>';
                    data+='<td class="textc">'+orderProfit.shareMoney.toFixed(4)+'</td>';

                    data+='<td class="textc">'+(orderProfit.oneName +'<br/>'+ orderProfit.onePhone)+'</td>';
                    data+='<td class="textc">'+(orderProfit.oneFee.toFixed(4) === '0.0000'  ? '' : orderProfit.oneFee.toFixed(4))+'</td>';

                    data += '<td class="textc">' + (orderProfit.twoName + '<br/>' + orderProfit.twoPhone) + '</td>';
                    data += '<td class="textc">' + (orderProfit.twoFee.toFixed(4) === '0.0000' ? '' : orderProfit.twoFee.toFixed(4)) + '</td>';
                    data += '<td class="textc">' + (orderProfit.threeName + '<br/>' + orderProfit.threePhone) + '</td>';
                    data += '<td class="textc">' + (orderProfit.threeFee.toFixed(4) === '0.0000' ? '' : orderProfit.threeFee.toFixed(4)) + '</td>';
                    data += '<td class="textc">' + (orderProfit.toAgentFeeCount.toFixed(4) === '0.0000' ? '' : orderProfit.toAgentFeeCount.toFixed(4)) + '</td>';
                    data += '<td class="textc">' + (orderProfit.toUpName + '<br/>' + orderProfit.toUpName) + '</td>';
                    data += '<td class="textc">' + (orderProfit.toUpFee.toFixed(4) === '0.0000' ? '' : orderProfit.toUpFee.toFixed(4)) + '</td>';
                    data+='</tr>';
                    $('#data_content').append(data);
                });
                //分页
                if(result.shareAmountCount != null){
                    $("#five").html(result.transAmountCount);
                }
                if(result.transAmountCount != null){
                    $("#three").html(result.shareAmountCount);
                }
                $('#pageCount').html(result.pageCount);
                $('#currPage').html(result.currPage);
                $('#totalCount').html(result.count);
                //设置分页
                pageIndex=result.currPage;
                $('#pagination').pagination({
                    pageCount: result.pageCount,
                    jump: true,
                    coping: true,
                    jump: true,
                    homePage: '首页',
                    endPage: '末页',
                    prevContent: '上页',
                    nextContent: '下页',
                    current:result.currPage,
                    callback:function(api){
                        pageIndex=api.getCurrent();
                        queryProfitOrderList(api.getCurrent());
                    }
                });
            }
        });
        //表头列不选中
        $("#allCheck").find("span").removeClass('checked');
    }
    function hidePictureWindow(){
        $('#picture').empty();
        $('#pictureWindow').hide();
    }

    function dateFtt(fmt,date)
    { //author: meizz
        var o = {
            "M+" : date.getMonth()+1,                 //月份
            "d+" : date.getDate(),                    //日
            "h+" : date.getHours(),                   //小时
            "m+" : date.getMinutes(),                 //分
            "s+" : date.getSeconds(),                 //秒
            "q+" : Math.floor((date.getMonth()+3)/3), //季度
            "S"  : date.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt))
            fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
        for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }
</script>

</html>

