<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">

    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/html2canvas.js}"></script>

    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            display: flex;
        }

        .printDiv * {
            box-sizing: border-box;
            text-align: center;
        }

        .content {
            /* 放大整体画布，避免大额数字挤压 */
            width: 240rem;
            height: 320rem;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .hz-table {
            width: 95%;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 2rem;
        }

        .hz-table th,
        .hz-table td {
            border: 1px solid #000;
            text-align: center;
            padding: 0.8rem 0.5rem;
            word-break: break-word;
        }

        .hz-table .title-row th {
            font-size: 6rem;
            border: none;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .hz-table .sub-title-row th {
            font-size: 4rem;
            border: none;
            padding-bottom: 1rem;
        }
    </style>
</head>

<body>
<div id="boxDiv" style="left:8px;right: 8px;bottom:8px;top:8px;position:absolute;">
    <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>
            </form>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="search" id="search" onclick="search()"><i
                    class="layui-icon layui-icon-search"></i>查询
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="printById('tableContent')"><i
                    class="layui-icon layui-icon-print"></i>打印
            </button>
        </div>
    </div>
    <div class="printDiv">
        <div class="content" id="tableContent">
            <table class="hz-table" style="font-size: 5rem;">
                <thead>
                <tr class="title-row">
                    <th colspan="7" th:text="${table_name}">武警宁夏总队医院对账汇总表</th>
                </tr>
                <tr class="sub-title-row">
                    <th colspan="7" class="rqsj">统计时间：</th>
                </tr>
                <tr>
                    <th rowspan="2" style="width:14%;">支付方式</th>
                    <th rowspan="2" style="width:14%;">支付方式</th>
                    <th colspan="2" style="width:30%;">银联商务</th>
                    <th colspan="2" style="width:30%;">医院信息系统<br/>现金金额：<span id="his_cash_money">0.00</span></th>
                    <th rowspan="2" style="width:12%;">差额</th>
                </tr>
                <tr>
                    <th>笔数</th>
                    <th>金额</th>
                    <th>笔数</th>
                    <th>金额</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td rowspan="4">扫码支付</td>
                    <td>微信支付</td>
                    <td id="third_num_1_1"></td>
                    <td id="third_money_1_1"></td>
                    <td rowspan="4" id="his_num_2"></td>
                    <td rowspan="4" id="his_money_2"></td>
                    <td rowspan="4" id="diff_1"></td>
                </tr>
                <tr>
                    <td>刷卡支付</td>
                    <td id="third_num_1_2"></td>
                    <td id="third_money_1_2"></td>
                </tr>
                <tr>
                    <td>支付宝支付</td>
                    <td id="third_num_1_3"></td>
                    <td id="third_money_1_3"></td>
                </tr>
                <tr>
                    <td>其他支付</td>
                    <td id="third_num_1_4"></td>
                    <td id="third_money_1_4"></td>
                </tr>

                <tr>
                    <td colspan="2">支付宝支付</td>
                    <td id="third_num_2"></td>
                    <td id="third_money_2"></td>
                    <td id="his_num_1"></td>
                    <td id="his_money_1"></td>
                    <td id="diff_2"></td>
                </tr>

                <tr>
                    <td colspan="2">微信支付</td>
                    <td id="third_num_3"></td>
                    <td id="third_money_3"></td>
                    <td id="his_num_3"></td>
                    <td id="his_money_3"></td>
                    <td id="diff_3"></td>
                </tr>

                <tr>
                    <td colspan="2">银行卡支付</td>
                    <td id="third_num_4"></td>
                    <td id="third_money_4"></td>
                    <td id="his_num_4"></td>
                    <td id="his_money_4"></td>
                    <td id="diff_4"></td>
                </tr>

                <tr>
                    <td colspan="2">其他</td>
                    <td id="third_num_5"></td>
                    <td id="third_money_5"></td>
                    <td id="his_num_5"></td>
                    <td id="his_money_5"></td>
                    <td id="diff_5"></td>
                </tr>

                <tr>
                    <td colspan="2">现金支付</td>
                    <td id="third_num_cash"></td>
                    <td id="third_money_cash"></td>
                    <td id="his_cash_num_row"></td>
                    <td id="his_cash_money_row"></td>
                    <td id="diff_cash"></td>
                </tr>

                <tr>
                    <td colspan="2">合计</td>
                    <td id="allThirdNum"></td>
                    <td id="allThirdMoney"></td>
                    <td id="allHisNum"></td>
                    <td id="allHisMoney"></td>
                    <td id="allDiff"></td>
                </tr>

                <tr>
                    <td colspan="7" style="text-align:left;">单边账原因：</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script th:inline="javascript">
    //从新指定页面rem
    function getRem() {
        var html = document.getElementsByTagName('html')[0];
        var oWidth = document.body.clientWidth
        html.style.fontSize = oWidth * 3 / 1366 + 'px'
        console.log(html.style.fontSize)
    }

    getRem()
    //添加监听页面大小改动
    window.addEventListener("resize", getRem, false)


    let isClick = [[${isClick}]];
    let layer, laydate, table, tree, form;

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

        //时间控件
        laydate.render({
            elem: '#searchDate'
            , type: 'date'
            , range: '~'
        });

        if (isClick === '1') {
            search();
        }
    });

    function printById(id) {

        html2canvas(document.getElementById(id), {
            allowTaint: true,
            taintTest: false,
            onrendered: function (canvas) {
                canvas.id = "mycanvas";
                //document.body.appendChild(canvas);
                //生成base64图片数据
                var dataUrl = canvas.toDataURL();
                var newImg = document.createElement("img");
                newImg.src = dataUrl;

                /* document.body.appendChild(newImg);  */
                /* window.open(newImg.src); */

                var printWindow = window.open("print_window", "_blank");
                // printWindow.document.write();


                let htmlStr = "<style>html{\n" +
                    "            height: auto;\n" +
                    "        }\n" +
                    "        body{\n" +
                    "            height: auto;\n" +
                    "            display: flex;\n" +
                    "-webkit-print-color-adjust:exact;" +
                    "-moz-print-color-adjust:exact;" +
                    "-ms-print-color-adjust:exact;" +
                    "print-color-adjust:exact;" +
                    "        }\n" +
                    "        .content{\n" +
                    "            width: 740px;\n" +
                    "            height: 1040px;\n" +
                    "            margin:auto;\n" +
                    "            display: flex;\n" +
                    "            justify-content: center;\n" +
                    "            align-items:flex-start;\n" +
                    "            text-align:center;\n" +
                    "        }\n" +
                    "        .hz-table{\n" +
                    "            width: 95%;\n" +
                    "            border-collapse: collapse;\n" +
                    "            table-layout: fixed;\n" +
                    "            margin-top: 12px;\n" +
                    "        }\n" +
                    "        .hz-table th, .hz-table td{\n" +
                    "            border:1px solid #000;\n" +
                    "            text-align:center;\n" +
                    "            padding:8px 4px;\n" +
                    "            word-break: break-word;\n" +
                    "        }\n" +
                    "        .title-row th{font-size:36px;border:none;padding-top:10px;padding-bottom:10px;}\n" +
                    "        .sub-title-row th{font-size:24px;border:none;padding-bottom:10px;}\n" +
                    "        }</style>";


                printWindow.document.write(htmlStr + $(".printDiv").html() + '<script>' +
                    'function getRem(){' +
                    '            var html = document.getElementsByTagName(\'html\')[0];' +
                    '            var oWidth = document.body.clientHeight;' +
                    '            html.style.fontSize = 649 /210 + \'px\';' +
                    '            console.log(html.style.fontSize);' +
                    'setTimeout(printTable,1000);' +
                    '        }' +
                    '        getRem();' +
                    '        window.addEventListener("resize", getRem, false);' +
                    'function printTable(){' +
                    'window.print();' +
                    'window.close();' +
                    '}' +
                    '<\/script>');

                /*printWindow.document.write('<img src="'+dataUrl+'" /><script>' +
                    'let imgObj=document.getElementsByTagName("img")[0];' +
                    'imgObj.onload=function(){' +
                    'window.print();' +
                    'window.close();' +
                    '}' +
                    '<\/script>');*/
                printWindow.focus();
                printWindow.document.close();

            }
        });
    }

    //查询表格数据
    function search() {
        //查询时间
        let date = $("#searchDate").val();
        let param = {};
        if (date !== '') {
            let time = date.split("~");
            let startTime = time[0].trim();
            let endTime = time[1].trim();

            param.startTime = startTime;
            param.endTime = endTime;
        }

        let url = "/paymentStatistics/findSummaryData";
        AjaxPostJson(url, param, function (result) {
            if (result.errCode === '0') {
                let htmlStr = ("统计时间：" + date).replaceAll("-", '/').replaceAll("~", "-");
                $(".rqsj").html(htmlStr);

                let hisMoneyData = result.hisMoneyData;
                let thirdMoneyData = result.thirdMoneyData;
                let hisNumData = result.hisNumData;
                let thirdNumData = result.thirdNumData;

                let allHisMoney = 0;
                let allHisNum = 0;
                let allThirdMoney = 0;
                let allThirdNum = 0;

                //his需要统计 1扫码支付 2银行卡支付 3掌医支付 4现金支付 5其他
                //his需要统计 1银行卡支付 2扫码支付 3掌医支付 4现金支付 5其他
                //三方需要统计 1_1微信支付 1_2支付宝支付 1_3云闪付支付 1_4其他支付 2银行卡支付 3掌医支付 4现金支付 5其他

                let hisCashMoney = Number(hisMoneyData["5"] || 0);
                let hisCashNum = Number(hisNumData["5"] || 0);
                for (let key in hisMoneyData) {
                    if (key !== "5") {
                        allHisMoney = allHisMoney + Number(hisMoneyData[key]);
                    }
                    $("#his_money_" + key).html(formatAmount(hisMoneyData[key]));
                }
                $("#his_cash_money").html(formatAmount(hisCashMoney.toFixed(2)));
                $("#his_cash_num_row").html(hisCashNum);
                $("#his_cash_money_row").html(formatAmount(hisCashMoney.toFixed(2)));

                for (let key in thirdMoneyData) {
                    allThirdMoney = allThirdMoney + Number(thirdMoneyData[key]);
                    $("#third_money_" + key).html(formatAmount(thirdMoneyData[key]));
                }

                for (let key in hisNumData) {
                    if (key !== "5") {
                        allHisNum = allHisNum + Number(hisNumData[key]);
                    }
                    $("#his_num_" + key).html(hisNumData[key]);
                }

                for (let key in thirdNumData) {
                    allThirdNum = allThirdNum + Number(thirdNumData[key]);
                    $("#third_num_" + key).html(thirdNumData[key]);
                }
                $("#third_num_cash").html('0');
                $("#third_money_cash").html(formatAmount('0.00'));

                $("#diff_1").html("");
                $("#diff_2").html("");
                $("#diff_3").html("");
                $("#diff_4").html("");
                $("#diff_5").html("");

                $("#allHisNum").html(allHisNum);
                $("#allHisMoney").html(formatAmount(allHisMoney.toFixed(2)));
                $("#allThirdNum").html(allThirdNum);
                $("#allThirdMoney").html(formatAmount(allThirdMoney.toFixed(2)));

                let allDiff = (allThirdMoney - allHisMoney).toFixed(2);
                $("#allDiff").html(formatAmount(allDiff));
            } else {
                layer.alert(result.errMsg);
            }
        });
    }

    //千分位格式化数字
    function formatAmount(num) {
        if (num) {
            //将num中的$,去掉，将num变成一个纯粹的数据格式字符串
            num = num.toString().replace(/\$|\,/g, '');
            //如果num不是数字，则将num置0，并返回
            if ('' == num || isNaN(num)) {
                return 'Not a Number ! ';
            }
            //如果num是负数，则获取她的符号
            var sign = '';

            if (num.indexOf("-") > -1) {
                sign = "-";
                num = num.substring(1, num.length);
            }

            //如果存在小数点，则获取数字的小数部分
            var cents = num.indexOf(".") > 0 ? num.substr(num.indexOf(".")) : '';
            cents = cents.length > 1 ? cents : '';//注意：这里如果是使用change方法不断的调用，小数是输入不了的
            //获取数字的整数数部分
            num = num.indexOf(".") > 0 ? num.substring(0, (num.indexOf("."))) : num;
            //如果没有小数点，整数部分不能以0开头
            if ('' == cents) {
                if (num.length > 1 && '0' == num.substr(0, 1)) {
                    return 'Not a Number ! ';
                }
            }
            //如果有小数点，且整数的部分的长度大于1，则整数部分不能以0开头
            else {
                if (num.length > 1 && '0' == num.substr(0, 1)) {
                    return 'Not a Number ! ';
                }
            }
            //针对整数部分进行格式化处理，这是此方法的核心，也是稍难理解的一个地方，逆向的来思考或者采用简单的事例来实现就容易多了
            /*
            也可以这样想象，现在有一串数字字符串在你面前，如果让你给他家千分位的逗号的话，你是怎么来思考和操作的?
            字符串长度为0/1/2/3时都不用添加
            字符串长度大于3的时候，从右往左数，有三位字符就加一个逗号，然后继续往前数，直到不到往前数少于三位字符为止
            */
            for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
                num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
            }
            //将数据(符号、整数部分、小数部分)整体组合返回
            return (sign + num + cents);
        }
    }
</script>
</body>
</html>
