<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>成本审计汇总表</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css">
        .heads_tr td {
            font-size: 11pt;
            font-weight: 700;
            line-height: 26px;
        }

        body {
            font-family: font-family: Micosoft YaHei, simsun, WenQuanYi MicoHei;
        }

        .btn {
            margin-top: 15px;
        }

        .print_button {
            height: 40px;
            background: #369 none repeat scroll 0 0;
            border: 2px solid #efefef;
            border-radius: 5px;
            width: 100px;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div id="vue">

    <div id="print">
        <table cellspacing="0" cellpadding="0" width="990" align="center">
            <tbody>
            <tr>
                <td colspan="4">
                    <table cellspacing="0" cellpadding="0" width="900" align="center">
                        <tbody>
                        <tr>
                            <td>
                                <h2 class="orderTitle1">
                                    <center>街坊项目拆迁成本统计表</center>
                                </h2>
                            </td>
                            <td>
                                <span style="float:right"><h2 class="orderTitle1"></h2></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
        <table cellspacing="0" cellpadding="0" width="900" align="center">
            <tbody>
            <tr>
                <td width="79" align="right" valign="top"></td>
                <td width="185" valign="top"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td align="right" valign="top"></td>
                <td valign="top"></td>
                <td align="right" valign="top"> 单位：㎡、元、套</td>
            </tr>
            </tbody>
        </table>

        <table id="page_one" border="1" cellspacing="0" cellpadding="0" width="990" align="center"
               class="t1" style="font-size:14px; margin-top:15px;min-height:600px">
            <tbody>
            <tr class="heads_tr">
                @for($i=1;$i<12;$i++)
                    <td width="90" align="center">{{ $i }}</td>
                @endfor
            </tr>
            <tr class="heads_tr">
                @foreach($th as $value)
                    <td width="90" align="center">{{ $value }}</td>
                @endforeach
            </tr>

            <template v-for="value of list">
                <tr>
                    <td width="100" align="center">@{{ value.num }}</td>
                    <td width="100" align="center">@{{ value.bzc_name }}</td>
                    <td width="100" align="center">@{{ value.bzc_addr }}</td>
                    <td width="100" align="center">@{{ value.bzc_cardid }}</td>
                    <td width="100" align="center">@{{ value.bzc_tel }}</td>
                    <td width="100" align="center">@{{ value.youzheng_area }}</td>
                    <td width="100" align="center">@{{ value.wuzheng_area }}</td>
                    <td width="100" align="center">@{{ value.fangbu }}</td>
                    <td width="100" align="center"></td>

                    <td width="100" align="center">@{{ value.tingyuan | isNaN + value.kongyuan | isNaN }}</td>

                    <td width="100" align="center">@{{ value.zhuangxiu }}</td>
                </tr>
            </template>

            </tbody>
        </table>


        <table id="page_two" border="1" cellspacing="0" cellpadding="0" width="990" align="center" class="t1"
               style="font-size:14px; margin-top: 97px;min-height: 700px;">
            <tbody>
            <tr class="heads_tr">
                @for($k=12;$k<23;$k++)
                    <td width="90" align="center">{{ $k }}</td>
                @endfor
            </tr>
            <tr class="heads_tr">
                @foreach($th1 as $value)
                    <td width="90" align="center">{{$value}}</td>
                @endforeach
            </tr>
            <template v-for="value of list">
                <tr>
                    <td width="100" align="center">@{{ value.gouzhu}}</td>
                    <td width="100" align="center">@{{ value.tingchan | isNaN + value.tingye | isNaN }}</td>
                    <td width="100" align="center">@{{ value.linshibu |isNaN + value.anzhi | isNaN }}</td>
                    <td width="100" align="center">@{{ value.banqianbu |isNaN + value.anzhi | isNaN}}</td>
                    <td width="100" align="center">@{{ value.dibu }}</td>
                    <td width="100" align="center">@{{ value.quanj }}</td>
                    <td width="100" align="center">@{{ value.chaj }}</td>
                    <td width="100" align="center">@{{ value.chaichuje }}</td>
                    <td width="100" align="center">@{{ value.canbu |isNaN+ value.other| isNaN}} </td>
                    <td width="100"
                        align="center">@{{ value.total_money | isNaN + value.total | isNaN + value.zongj | isNaN + value.yuqij | isNaN+ value.chaiqian | isNaN}}</td>
                    <td width="100" align="center">@{{ value.hours }}</td>
                </tr>
            </template>

            </tbody>
        </table>


        <table id="page_three" border="1" cellspacing="0" cellpadding="0" width="990" align="center" class="t1"
               style="font-size:14px; margin-top: 97px;min-height: 700px;">
            <tbody>
            <tr class="heads_tr">
                @for($j=23;$j<32;$j++)
                    <td width="90" align="center">{{ $j }}</td>
                @endfor
            </tr>
            <tr class="heads_tr">
                @foreach($th2 as $value)
                    <td width="90" align="center">{{ $value }}</td>
                @endforeach
            </tr>

            <template v-for="value of list">

                <tr>
                    <td width="100" align="center">@{{ value.huiqian_area }}</td>
                    <td width="100" align="center">@{{ value.huiqian_home_area }}</td>
                    <td width="100" align="center">@{{ value.huiqian_shang_area }}</td>
                    <td width="100" align="center">@{{ value.huiqian }}</td>
                    <td width="100" align="center">@{{ value.money_home_jchae |isNaN + value.yingjiao | isNaN }}</td>
                    <td width="100" align="center">@{{ value.money_home_tchae |isNaN + value.yingtui | isNaN}}</td>
                    <td width="100" align="center">@{{ value.created_at }}</td>
                    <td width="100" align="center"></td>
                    <td width="100" align="center">@{{ value.sub_description }}</td>
                </tr>
            </template>

            </tbody>
        </table>
    </div>

    <div align="center" class="btn">
        <input class="print_button" type="button" value="上一页" v-on:click="prev()" v-if="has_prev">
        <input class="print_button" type="button" id="datasubmit" value="确认打印" name="submit" onclick="printed()">
        <input class="print_button" type="button" value="下一页" v-on:click="next()" v-if="has_next">
    </div>
</div>

<iframe id="print_frame" style="display: none"></iframe>


<script type="text/javascript">

    function printed() {
        var head = "<html><head><title></title></head><body>";
        var foot = "</body>";
        var news = document.all.item('print').innerHTML;
        document.getElementById('print_frame').contentWindow.document.body.innerHTML = head + news + foot;
        document.getElementById('print_frame').contentWindow.print();
        return false;
    }

</script>

<script src="{{ asset('js/vue.min.js') }}"></script>

<script>

    var table = JSON.parse('{!! json_encode($table) !!}');

    var count_list = [], show_list = [], state = 0;

    var count_length = 0;

    //数组合并

    for (var t in table)

        for (var v in table[t]) {

            if (typeof (count_list[table[t][v].num]) != 'undefined')  count_list[table[t][v].num] = Object.assign(count_list[table[t][v].num], table[t][v]);

            else {

                count_list[table[t][v].num] = table[t][v];

                count_length++;

            }

        }


    //数组重排
    var tmp_arr = [];

    for (var key in count_list)

        tmp_arr.push(count_list[key]);

    count_list = tmp_arr;


    var vm = new Vue({

        el: '#vue',
        data: {
            list: show_list,
            has_prev: false,
            has_next: false
        },
        methods: {

            next: function () {

                for (var key in count_list)

                    show_list.push(count_list[key]);


                if (state % 20 == 0 && state != 0) {

                    show_list.splice(0, show_list.length);

                    vm.has_prev = true;

                }

                for (var i = 0; i < 20 && state < count_list.length - 1; i++) {

                    state++;

                    show_list.push(count_list[state]);

                }

                if (count_list.length > 20)vm.has_next = true;

            },

            prev: function () {

                if (state <= 20)return;

                show_list.splice(0, show_list.length);

                for (var i = 0; i < 20 && state >= 0; i++) {

                    state--;

                    show_list.push(count_list[state]);

                }

            }
        },
        filters: {
            isNaN: function (value) {

                if (!value) return 0;
                return value;

            }
        }

    });

    vm.next();

</script>


</body>
</html>