<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>报表预览</title>
    <link rel="stylesheet" href="/jd_report/static/src/css/datatables.min.css"/>
    <link rel="stylesheet" href="/jd_report/static/src/css/report.css"/>
    <script src="/web/static/lib/jquery/jquery.js" type="text/javascript"></script>
    <script src="/jd_report/static/src/js/datatables.min.js"></script>
    <script src="/jd_report/static/src/js/dataTables.rowsGroup.js"></script>
    <script src="/jd_report/static/src/js/tableexport.js"></script>
    <script src="/jd_report/static/src/js/xlsx.full.min.js"></script>
    <style>
        .header {
            width: 100%;
            height: 100px;
        }

        {{data.css_header}}
    </style>
</head>
<body>
<!--<input id="js">-->
<div id="example">
    <div>
        {{data.html_header}}
    </div>
    <!--<div style="text-align: center">-->
        <!--<h2>报表名称</h2>-->
    <!--</div>-->
    <!--<div style="border: grey 1px solid; padding: 20px; margin-bottom: 20px; background: rgb(242, 248, 254);">-->
        <!--<div style="border: grey 1px solid; padding: 5px; background: rgb(255, 255, 228); margin-bottom: 5px">-->
            <!--<h3 style="margin: 0">报表说明</h3>-->
        <!--</div>-->
        <!--<table id="headerTable" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000"-->
           <!--class="table table-condensed order-content cell-border compact stripe"-->
           <!--style="border-collapse:collapse;width: 100%;">-->
        <!--<thead>-->
        <!--<tr>-->
            <!--<th style="width: 5%; padding: 5px;">-->
                <!--#-->
            <!--</th>-->
            <!--<th style="width: 15%; padding: 5px;">-->
                <!--筛选条件-->
            <!--</th>-->
            <!--<th style="width: 80%; padding: 5px;">-->
                <!--变量值-->
            <!--</th>-->
        <!--</tr>-->
        <!--</thead>-->
        <!--<tbody>-->
        <!--<tr>-->
            <!--<td>1</td>-->
            <!--<td>猪场</td>-->
            <!--<td>呵呵呵场</td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>2</td>-->
            <!--<td>猪场</td>-->
            <!--<td>呵呵呵场</td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>3</td>-->
            <!--<td>猪场</td>-->
            <!--<td>呵呵呵场</td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>4</td>-->
            <!--<td>猪场</td>-->
            <!--<td>呵呵呵场</td>-->
        <!--</tr>-->
        <!--</tbody>-->
    <!--</table>-->
    <!--</div>-->
    <div style="padding: 10px 20px 20px 20px; border: grey 1px solid;background: rgb(240, 240, 240);">
        <div style="float: right;">
            <button>加入订阅</button>
            <button id="print_button">打印</button>
            <button id="refresh_button">刷新</button>
            <button id="close_button">返回</button>
            <button onclick="exportExcel()">导出Excel</button>
        </div>
        <table id="myTable" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000"
           class="table table-condensed order-content cell-border compact stripe"
           style="border-collapse:collapse;">
        <thead>

        {% for header in data.headers %}
        <tr>
            {% for col in header %}
            {% if 'remove' in col.keys() and col['remove']==1 %}
            {% else %}
            <th {% if
            'col_span' in col.keys() %} colspan="{{ col['col_span'] }}" {% endif %}
            {% if 'row_span' in col.keys() %}rowspan="{{ col['row_span'] }}" {% endif %}>
            {{ col['value'] }}
            </th>
            {% endif %}

            {% endfor %}
        </tr>
        {% endfor %}

        </thead>
        <tbody>
        {% for row in data.data %}
        <tr>
            {% for col in row %}
            <td>
                {{ col['value'] or '' }}
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
        </tbody>
        <tfoot>
        <tr>
            {% for col in data.data[0] %}
            <td></td>
            {% endfor %}
        </tr>
        </tfoot>
    </table>
    </div>
</div>
<script>
    function get_height(dataRows) {
        var row = parseFloat(dataRows);
        var h = $(window).height() - 270;
        row = row * 45;
        if (row < h) {
            h = row;
        }
        if (h == 0) {
            h = 50;
        }
        return h;
    }

    $(document).ready(function () {
        // var fixed_column = $('.js').val();
        var fixed_column = {{data.fixed_column}}
        var table = $('#myTable').DataTable({
            // rowsGroup: [{{ data.groups }}],
            paging: false,
            searching: false,
            info: false,
            dom: 'Bfrtip',
            buttons: [],
            ordering: false,
            scrollX: true,
            scrollY: get_height($('#__total').text()),
            fixedColumns: {
                leftColumns: fixed_column
            },
            fixedHeader: true,
            colReorder: false,
            order: [[1, 'asc']],
            columnDefs: [
                {"width": "2%", "targets": 1},
            ],
            language: {
                search: "搜索:"
            },
            "footerCallback": function (tfoot, data, start, end, display) {
                {{data.sum_js}}
            }
        });
    });

    function formatNum(num, n) {
        num = String(num.toFixed(n));
        var re = /(-?\d+)(\d{3})/;
        while (re.test(num)) {
            num = num.replace(re, "$1,$2");
        }
        return num;
    }


    function exportExcel() {
        $("#myTable").tableExport({
            type: "xlsx",
            escape: "false",
            fileName: '{{data.export_filename}}',
            bootstrap: true
        });
    }

    $(function () {
        $('#print_button').click(function () {
            $('button').css('display', 'none');
            window.print();
            $('button').css('display', 'inline');
        })
        $('#refresh_button').click(function () {
            window.location.reload()
        })
        $('#close_button').click(function () {
            window.close();
        })
    })
</script>
</body>
</html>