@extends('layouts.datatable')
@section('table')

    <link rel="stylesheet" href="{{asset('css/style.css')}}">

    <style>
        table {
            max-width: 100%;
        }

        td {
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>

    <div id="vue">

        <div class="row">
            <div class="col-md-12" id="print">
                <div class="box box-primary">
                    <div class="box-header with-border" style="text-align: center">
                        <h1 class="box-title">成本审计汇总表</h1>
                    </div>
                    <div class="box-body" style="overflow: scroll;height: 600px;">
                        <table class="table table-bordered table-striped" style="width: 3500px;">
                            <thead>
                            {{--<tr>--}}
                            {{--<td colspan="31" style="font-size: 25px; text-align: center">街坊项目拆迁统计表</td>--}}
                            {{--</tr>--}}
                            <tr>
                                @for($i=1;$i<32;$i++)
                                    <td>{{ $i }}</td>
                                @endfor
                            </tr>
                            <tr>
                                <th>合同编号</th>
                                <th>姓名</th>
                                <th>房栋号</th>
                                <th>身份证号</th>
                                <th>联系电话</th>
                                <th>有证面积</th>
                                <th>无证面积</th>
                                <th>房屋补偿金</th>
                                <th>庭院面积</th>
                                <th>庭院补偿</th>
                                <th>装修</th>
                                <th>构筑物及其它</th>
                                <th>停产停业损失补偿（临街路补偿）</th>
                                <th>临时安置</th>
                                <th>搬迁</th>
                                <th>低保</th>
                                <th>全额奖励</th>
                                <th>整栋奖励</th>
                                <th>违章自行拆除费</th>
                                <th>残疾及其它</th>
                                <th>补偿总额</th>
                                <th>回迁套数</th>
                                <th>回迁小区楼栋号</th>
                                <th>回迁住宅面积</th>
                                <th>回迁商铺面积</th>
                                <th>回迁楼房金额</th>
                                <th>应缴差价</th>
                                <th>应退差价</th>
                                <th>签约日期</th>
                                <th>交房日期</th>
                                <th>备注</th>
                            </tr>
                            </thead>
                            <tbody>
                            <template v-for="value of list">
                                <tr>
                                    <td>@{{ value.num }}</td>
                                    <td>@{{ value.bzc_name }}</td>
                                    <td>@{{ value.bzc_addr }}</td>
                                    <td>@{{ value.bzc_cardid }}</td>
                                    <td>@{{ value.bzc_tel }}</td>
                                    <td>@{{ value.youzheng_area }}</td>
                                    <td>@{{ value.wuzheng_area }}</td>
                                    <td>@{{ value.fangbu }}</td>
                                    <td></td>
                                    <td>@{{ value.tingyuan | isNaN + value.kongyuan | isNaN}}</td>
                                    <td>@{{ value.zhuangxiu }}</td>
                                    <td>@{{ value.gouzhu }}</td>
                                    <td>@{{ value.tingchan | isNaN + value.tingye| isNaN  }}</td>
                                    <td>@{{ value.linshibu | isNaN + value.anzhi | isNaN }}</td>
                                    <td>@{{ value.banqianbu }}</td>
                                    <td>@{{ value.dibu }}</td>
                                    <td>@{{ value.quanj }}</td>
                                    <td>@{{ value.chaj }}</td>
                                    <td></td>
                                    <td>@{{ value.chaichuje | isNaN +value.canbu | isNaN + value.other | isNaN + value.chaiqian| isNaN  }}</td>
                                    <td>@{{ value.total_money | isNaN  value.total | isNaN  value.zongj | isNaN  value.yuqij | isNaN + value.total | isNaN   }}</td>
                                    <td>@{{ value.hours }}</td>
                                    <td>@{{ value.huiqian_area }}</td>
                                    <td>@{{ value.huiqian_home_area }}</td>
                                    <td>@{{ value.huiqian_shang_area }}</td>
                                    <td>@{{ value.huiqian }}</td>
                                    <td>@{{ value.money_home_jchae | isNaN + value.yingjiao | isNaN }}</td>
                                    <td>@{{ value.money_home_tchae | isNaN + value.yingtui | isNaN }}</td>
                                    <td>@{{ value.table_time }}</td>
                                    <td></td>
                                    <td>@{{ value.sub_description }}</td>
                                </tr>
                            </template>

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


        <div align="center" class="btn">
            <button class="btn btn-primary" value="上一页" v-on:click="prev()" v-if="has_prev"></button>
            <a class="btn btn-success" target="_blank" href="{{ url('/print/10') }}">打印</a>
            <button class="btn btn-primary" value="下一页" v-on:click="next()" v-if="has_next"></button>
        </div>

    </div>


    <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 () {

                    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>


@endsection