<!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: 210rem;
            height: 297rem;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .table {
            width: 90%;
            height: 90%;
            border-top: black solid 1px;
            border-left: black solid 1px;
            display: grid;
            grid-template-columns: 15% 15% 7.5% 20% 7.5% 20% 15%;
            grid-template-rows: 8% repeat(11, 4%) 48%;
            grid-template-areas:'a a a a a a a'
                          '. b b b c c .'
                          '. . . . . . .'
                          'd . . . e f g'
                          'd . . . e f g'
                          'd . . . e f g'
                          'd . . . e f g'
                          '. h . . . . .'
                          '. h . . . . .'
                          '. h . . . . .'
                          '. h . . . . .'
                            '. . . . . . .'
                          '. i i i i i i'

        }

        .table div {
            border-right: 1px solid black;
            border-bottom: black solid 1px;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </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">
            <div class="table" style="font-size: 5rem;">
                <div style="grid-area: a;flex-direction:column;">
                    <span style="align-items:center;display: flex;height: 60%;font-size: 6rem;"
                          th:text="${table_name}"></span>
                    <span class="rqsj"
                          style="align-items:center;font-size: 4rem;display: flex;height: 40%;align-self: end;">统计时间：</span>
                </div>
                <div></div>
                <div style="grid-area: b;">银联商务</div>
                <div style="grid-area: c;">医院信息系统</div>
                <div>差额</div>
                <div style="grid-area: d;">扫码支付</div>
                <div></div>
                <div>支付方式</div>
                <div>笔数</div>
                <div style="grid-area: e;" id="his_num_2"></div>
                <div style="grid-area: f;" id="his_money_2"></div>
                <div style="grid-area: g;" id="diff_1"></div>
                <div>金额</div>
                <div>笔数</div>
                <div>金额</div>
                <div></div>
                <div>微信支付</div>
                <div id="third_num_1_1"></div>
                <div id="third_money_1_1"></div>
                <div>刷卡支付</div>
                <div id="third_num_1_2"></div>
                <div id="third_money_1_2"></div>
                <div style="grid-area: h;background:linear-gradient(123deg, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%);"></div>
                <div>支付宝支付</div>
                <div id="third_num_1_3"></div>
                <div id="third_money_1_3"></div>
                <div>其他支付</div>
                <div id="third_num_1_4"></div>
                <div id="third_money_1_4"></div>
                <div>支付宝支付</div>
                <div id="third_num_2"></div>
                <div id="third_money_2"></div>
                <div id="his_num_1"></div>
                <div id="his_money_1"></div>
                <div id="diff_2"></div>
                <div>微信支付</div>
                <div id="third_num_3"></div>
                <div id="third_money_3"></div>
                <div id="his_num_3"></div>
                <div id="his_money_3"></div>
                <div id="diff_3"></div>
                <div>银行卡支付</div>
                <div id="third_num_4"></div>
                <div id="third_money_4"></div>
                <div id="his_num_4"></div>
                <div id="his_money_4"></div>
                <div id="diff_4"></div>
                <div>其他</div>
                <div id="third_num_5"></div>
                <div id="third_money_5"></div>
                <div id="his_num_5"></div>
                <div id="his_money_5"></div>
                <div id="diff_5"></div>
                <div>合计</div>
                <div></div>
                <div id="allThirdNum"></div>
                <div id="allThirdMoney"></div>
                <div id="allHisNum"></div>
                <div id="allHisMoney"></div>
                <div id="allDiff"></div>
                <div>单边账原因</div>
                <div style="grid-area: i;"></div>
            </div>
        </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: 649px;\n" +
                    "            height: 978px;\n" +
                    "            margin:auto;\n" +
                    "            display: flex;\n" +
                    "            justify-content: center;\n" +
                    "            align-items:center;\n" +
                    "            text-align:center;\n" +
                    "        }\n" +
                    "        .table{\n" +
                    "            width: 90%;\n" +
                    "            height: 90%;\n" +
                    "            border-top: black solid 1px;\n" +
                    "            border-left: black solid 1px;\n" +
                    "            display: grid;\n" +
                    "            grid-template-columns: 15% 15% 7.5% 20% 7.5% 20% 15%;\n" +
                    "            grid-template-rows: 8% repeat(11,4%) 48%;\n" +
                    "            grid-template-areas:'a a a a a a a'\n" +
                    "                          '. b b b c c .'\n" +
                    "                          '. . . . . . .'\n" +
                    "                          'd . . . e f g'\n" +
                    "                          'd . . . e f g'\n" +
                    "                          'd . . . e f g'\n" +
                    "                          'd . . . e f g'\n" +
                    "                          '. h . . . . .'\n" +
                    "                          '. h . . . . .'\n" +
                    "                          '. h . . . . .'\n" +
                    "                          '. h . . . . .'\n" +
                    "                          '. . . . . . .'\n" +
                    "                          '. i i i i i i'\n" +
                    "\n" +
                    "        }\n" +
                    "        .table div{\n" +
                    "            border-right: 1px solid black;\n" +
                    "            border-bottom: black solid 1px;\n" +
                    "            height: 100%;\n" +
                    "            width: 100%;\n" +
                    "            display: flex;\n" +
                    "            align-items:center;\n" +
                    "            justify-content:center;\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其他

                for (let key in hisMoneyData) {
                    allHisMoney = allHisMoney + Number(hisMoneyData[key]);
                    $("#his_money_" + key).html(formatAmount(hisMoneyData[key]));
                }

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

                for (let key in hisNumData) {
                    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]);
                }

                //三方扫码支付的金额相加
                let smzfMoney = (Number(thirdMoneyData["1_1"]) + Number(thirdMoneyData["1_2"]) + Number(thirdMoneyData["1_3"]) + Number(thirdMoneyData["1_4"])).toFixed(2);

                for (let i = 1; i <= 5; i++) {
                    if (i === 1) {
                        let money = Math.abs(smzfMoney - Number(hisMoneyData["" + i])).toFixed(2);
                        $("#diff_" + i).html(formatAmount(money));
                    } else {
                        let money = Math.abs(Number(thirdMoneyData["" + i]) - Number(hisMoneyData["" + i])).toFixed(2);
                        $("#diff_" + i).html(formatAmount(money));
                    }
                }

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

                let allDiff = Math.abs(allHisMoney - allThirdMoney).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>