<%@ page contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<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>
        .count-data{
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 18px;
        }
        .count-item{
            padding: 15px 60px;
            border-radius: 5px;
            box-shadow: 0px 0px 5px 1px #f1f1f1;
            border-top: 1px solid #e5e5e5;
        }
        .red{
            color: red;
        }
        .layui-form-item .layui-input-inline ,.layui-select-title{
            width: 182px;
        }
</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 pl10 bdbd">
                    <!-- 顶部按钮 -->
                    <div class="fl">
                        查询条件
                    </div>
                    <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" id="form1" action="" style="margin-top: 10px;">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">收益用户</label>
                            <div class="layui-input-block">
                                <input type="text" name="rewardUserId" id="rewardUserId" placeholder="收益用户ID"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">付款用户</label>
                            <div class="layui-input-block">
                                <input type="text" name="userId" id="userId" placeholder="付款用户ID"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商户名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="merchantName" id="merchantName" placeholder="商户名称"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="orderNumber" id="orderNumber" placeholder="订单号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">区域名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="areaName" id="areaName" placeholder="区域名称"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-block">
                                <select class="layui-select" name="type">
                                    <option value="">请选择</option>
                                    <option value="01">设备下单</option>
                                    <option class="02">设备退款</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">开始日期</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="开始日期" id="date1" readonly name="startTime" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">结束日期</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="结束日期" id="date2" readonly name="endTime" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="toolbar-panel count-data mr5 ml5 mt5">
        <div class="count-item">收入：<span class="red">￥<span id="orderAmtCount"></span></span>元</div>
        <div class="count-item">退款：<span class="red">￥<span id="refundAmtCount"></span></span>元</div>
        <div class="count-item">实收：<span class="red">￥<span id="actualAmtCount"></span></span>元</div>
        <div class="count-item">支出：<span class="red">￥<span id="actualExpendAmtCount"></span></span>元</div>
        <div class="count-item">结余：<span class="red">￥<span id="residueAmtCount"></span></span>元</div>
    </div>
    <div class="mb50 mt10">
        <div class="whitebg pl10 pr10">
            <table class="layui-hide" id="openAccountRecord" lay-filter="openAccountRecord"></table>
        </div>
    </div>
</div>
<script type="text/html" id="leftBar">
    <a class="layui-btn layui-btn-sm" lay-event="search">
        <i class="layui-icon layui-icon-search"></i>查询
    </a>
</script>

<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="refund">
        <i class="layui-icon layui-icon-release"></i>退款
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
</script>

<script>
    layui.use(['table', 'layer','laydate'], function () {
        var table = layui.table;
        var layer = layui.layer;
        let laydate = layui.laydate;
        laydate.render({
            elem: '#date1',//指定元素
            type: 'date',
            format: 'yyyy-MM-dd',
            value: new Date(),
            btns: ['now','confirm']
        });
        laydate.render({
            elem: '#date2', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd',
            value: new Date(),
            btns: ['now','confirm']
        });
        var params = serialize($('#form1'));
        initData(params);
        var tableIns = table.render({
            elem: '#openAccountRecord'
            , url: '${ctx}/openAccountRecord/page'
            , id: 'openAccountRecord'
            , response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , countName: 'count' //数据总数的字段名称，默认：count
                , dataName: 'data' //默数据列表的字段名称，认：data
                , statusCode: 200
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            , toolbar: '#leftBar' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter']
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '开户奖明细'
            , cols: [[
                {type: 'checkbox', fixed: 'left', hidden: true}
                ,{field: 'numbers', title: '序号', fixed: 'left', unresize: true, width: 80, type: 'numbers'}
                ,{field:'rewardUserId', title:'收益用户'}
                ,{field:'userId', title:'付款用户'}
                ,{field:'merchantName', title:'商户名称'}
                ,{field:'orderNumber', title:'订单号'}
                ,{field:'orderAmt', title:'订单金额',templet:function (d){
                    return d.orderAmt.toFixed(2);
                }}
                ,{field:'areaName', title:'区域名称'}
                ,{field:'goodName', title:'商品名称'}
                , {field: 'type', title: '类型',templet:function (d){
                        if(d.type === "01"){
                            return "<span style='color: green'>设备下单</span>";
                        }else{
                            return "<span style='color: red'>设备退款</span>";
                        }
                    }}
                ,{field:'rewardAmt', title:'开户奖',templet:function (d){
                        if(parseFloat(d.rewardAmt) > 0){
                            return "<span style='color: green'>+ "+d.rewardAmt.toFixed(2)+"</span>";
                        }else{
                            return "<span style='color: red'>"+d.rewardAmt.toFixed(2)+"</span>";
                        }
                }}
                , {field: 'status', title: '状态',templet:function (d){
                        if(d.status === "01"){
                            return "<span style='color: green'>正常</span>";
                        }else{
                            return "<span style='color: red'>禁用</span>";
                        }
                    }}
                , {
                    field: 'createTime',
                    title: '时间',
                    templet: "<div>{{layui.util.toDateString(d.createTime,'yyyy-MM-dd HH:mm')}}</div>"
                }
                , {fixed: 'right', title: '操作', width: 160, toolbar: '#toolBar'}
            ]]
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , page: true
        });
        table.on('tool(openAccountRecord)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除么?', {icon: 3}, function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    del(data);
                    //向服务端发送删除指令
                });
            }else if(layEvent === 'refund'){
                layer.confirm('确定标记退款,标记后会扣除该用户的开户奖?', {icon: 3,title:"提示"}, function (index) {
                    layer.close(index);
                    refund(data);
                    //向服务端发送删除指令
                });
            }
        });

        //监听头工具栏事件
        table.on('toolbar(openAccountRecord)', function (obj) {
            switch (obj.event) {
                case 'add':
                    // 添加
                    toAdd();
                    break;
                case 'search':
                    var params = serialize($('#form1'));
                    table.reload('openAccountRecord', {
                        where: params
                        , page: {
                            size: 10
                            , current: 1
                        }
                    });
                    initData(params)
                    break;
            }
        });
        function refund(obj) {
            $.ajax({
                url: '${ctx}/openAccountRecord/refund/' + obj.orderNumber,
                method: 'get',
                dataType: 'JSON',
                success: function (res) {
                    layer.msg(res.message, {
                        icon: res.code == 200 ? 1: 2
                    });
                    if(res.code == 200){
                        tableIns.reload();
                    }
                }
            })
        }
        function toAdd(obj) {
            var url = '${ctx}/openAccountRecord/detail';
            var title = "新增";
            if (obj != undefined) {
                url = "${ctx}/openAccountRecord/detail/" + obj.id;
                title = "编辑"
            }
            var index = layer.open({
                type: 2
                , shade: 0.5
                , title: title
                , maxmin: true
                , content: url
                , area: ['600px', '550px']
                , end: function () {

                }
            });
        }

        function del(obj) {
            $.ajax({
                url: '${ctx}/openAccountRecord/del/' + obj.id,
                method: 'DELETE',
                dataType: 'JSON',
                contentType: "application/json",
                success: function (res) {
                    layer.msg(res.message, {
                        icon: res.code == 200 ? 1: 2
                    });
                }
            })
        }

        /**
         * 初始化统计数据
         * @param data
         */
        function initData(data){
            let params = {};
            for (var key in data) {
                params[key] = data[key]
            }
            let url = ctx + "/openAccountRecord/countData";
            $.ajax({
                url:url,
                type:'get',
                data:params,
                success:function(res){
                    if(res.code == 200){
                        $("#orderAmtCount").html(res.data.orderAmtCount.toFixed(2));
                        $("#refundAmtCount").html(res.data.refundAmtCount.toFixed(2));
                        $("#actualAmtCount").html((res.data.orderAmtCount - res.data.refundAmtCount).toFixed(2));
                        $("#actualExpendAmtCount").html(res.data.actualExpendAmtCount.toFixed(2));
                        $("#residueAmtCount").html((res.data.orderAmtCount - res.data.refundAmtCount - res.data.actualExpendAmtCount).toFixed(2));
                    }
                }
            })
        }
    });
</script>
</body>
</html>
