<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>财付通汇款汇总表</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/html2canvas.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <style>
        .tableTitle {height: 20px;margin-top: 10px;margin-bottom: 10px;}
        .tableName {border-left: 3px solid #0000FF;padding-left: 5px;font-size: 16px;font-weight: bold;}
        .selectDate {font-size: 14px;color: rgba(0, 0, 0, 0.65)}
        .printHeader {border:1px solid #000; width: 95%; margin: 10px auto; padding: 10px 0;}
        .printHeader .title {text-align:center; font-size: 22px; font-weight: bold; line-height: 32px;}
        .printHeader .time {padding-left: 12px; font-size: 16px;}
    </style>
    <script th:inline="none">
        let layer, laydate, table;
        layui.use(['table','laydate','layer'], function(){
            table = layui.table; laydate = layui.laydate; layer = layui.layer;
            laydate.render({elem: '#searchDate', type: 'date', range: '~'});
            table.render({
                elem: '#demo', height: 480, title: '财付通汇款汇总表', page: false, id: 'test', even: 'true',
                url: '/paymentStatistics/findTenpaySummary', method: 'get',
                cols: [[
                    {field: 'PAY_NAME', title: '支付方式', align: 'center', width: 180},
                    {field: 'BANK_CNT', title: '银行笔数', align: 'center', width: 120},
                    {field: 'BANK_AMT', title: '银行金额（元）', align: 'center', width: 160, templet: function(d){
                        return d.BANK_AMT ? parseFloat(d.BANK_AMT).toFixed(2) : '0.00';
                    }},
                    {field: 'HIS_CNT', title: 'HIS笔数', align: 'center', width: 120},
                    {field: 'HIS_AMT', title: 'HIS金额（元）', align: 'center', width: 160, templet: function(d){
                        return d.HIS_AMT ? parseFloat(d.HIS_AMT).toFixed(2) : '0.00';
                    }}
                ]],
                parseData: function(res){
                    var rows = [];
                    if(res.code === 0){
                        var bank = res.bankData || [];
                        var his = res.hisData || [];
                        var names = ['微信支付','支付宝支付','刷卡支付','退款','合计'];
                        function find(list,name){
                            for(var i=0;i<list.length;i++){ if(list[i].PAY_NAME===name) return list[i]; }
                            return {PAY_NAME:name, CNT:0, AMT:0};
                        }
                        for(var i=0;i<names.length;i++){
                            var b=find(bank,names[i]);
                            var h=find(his,names[i]);
                            rows.push({
                                PAY_NAME:names[i],
                                BANK_CNT:b.CNT||0,
                                BANK_AMT:b.AMT||0,
                                HIS_CNT:h.CNT||0,
                                HIS_AMT:h.AMT||0
                            });
                        }
                    }
                    return {code: res.code, msg: res.msg || '', count: rows.length, data: rows};
                }
            });
            search();
        });
        function getParams(){
            let param = {}; let date = $('#searchDate').val();
            if(date){ let t = date.split('~'); param.startTime = t[0].trim(); param.endTime = t[1].trim(); }
            return param;
        }
        function search(){
            let param = getParams();
            table.reload('test',{where:param});
            let date = $('#searchDate').val(); if(date){ $('.selectDate').text(date); $('#statRange').text(date); }
        }

        function printById(id){
            var range = $('#statRange').text() || '';
            var rows = (layui.table && layui.table.cache && layui.table.cache['test']) ? layui.table.cache['test'] : [];
            var printWindow = window.open('', '', 'height=800,width=1200');
            var styles = '<style>\n' +
                'table{width:95%;margin:10px auto;border-collapse:collapse;}\n' +
                'th,td{border:1px solid #000;padding:8px;text-align:center;}\n' +
                '.title{font-size:22px;font-weight:bold;line-height:32px;text-align:center;}\n' +
                '.time{font-size:16px;text-align:left;padding-left:12px;}\n' +
                '</style>';
            var html = '<table class="printTable">' +
                '<thead>' +
                '<tr><th class="title" colspan="5">武警宁夏总队医院财付通汇总表</th></tr>' +
                '<tr><th class="time" colspan="5">统计时间：'+ range +'</th></tr>' +
                '<tr>' +
                '<th>支付方式</th><th>银行笔数</th><th>银行金额（元）</th><th>HIS笔数</th><th>HIS金额（元）</th>' +
                '</tr>' +
                '</thead><tbody>';
            function fmt(v){ return v ? parseFloat(v).toFixed(2) : '0.00'; }
            for(var i=0;i<rows.length;i++){
                var r = rows[i] || {};
                html += '<tr>' +
                    '<td>' + (r.PAY_NAME||'') + '</td>' +
                    '<td>' + (r.BANK_CNT||0) + '</td>' +
                    '<td>' + fmt(r.BANK_AMT) + '</td>' +
                    '<td>' + (r.HIS_CNT||0) + '</td>' +
                    '<td>' + fmt(r.HIS_AMT) + '</td>' +
                '</tr>';
            }
            html += '</tbody></table>';
            printWindow.document.write('<html><head><title>打印</title>'+styles+'</head><body>'+html+'<script>window.print();window.close();<\/script></body></html>');
            printWindow.document.close();
        }
    </script>
</head>
<body class="layui-layout-body">
<div style="left:8px;right:8px;bottom:8px;top:8px;position:absolute;overflow-y:auto;">
    <div class="toolbar" id="titleDiv">
        <div style="display:inline-block;">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label">日期选择</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input formWidthTwo" id="searchDate" placeholder=" ~ " th:value="${startTime+' ~ '+endTime}">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="search()"><i class="layui-icon layui-icon-search"></i>查询</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="printById('tableContent')"><i class="layui-icon layui-icon-print"></i>打印</button>
                </div>
            </form>
        </div>
    </div>
    <div class="content">
        <div id="printHeader" class="printHeader">
            <div class="title">武警宁夏总队医院财付通汇总表</div>
            <div class="time">统计时间：<span id="statRange"></span></div>
        </div>
        <div id="tableContent">
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
 </div>
</body>
</html>
