@extends('layouts.app')
@section('title')称重统计-包裹管理@endsection

@section('content')
    <span id="nav2">
        @component('package.menu')@endcomponent
        @component('package.weigh.menu')@endcomponent
    </span>
    <div class="d-none" id="statistics">
        <div class="container-fluid">
            <div id="form_div"></div>
            <span class="dropdown">
                <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
                    导出Excel
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item"  @click="statisticExport(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item"  @click="statisticExport(true)" href="javascript:">导出所有页</a>
                </div>
            </span>

            <table class="table table-striped table-sm text-nowrap table-hover">
                <tr>
                    <th>
                        <label for="all">
                            <input id="all" type="checkbox" @click="checkAll($event)">全选
                        </label>
                    </th>
                    <th>货主</th>
                    <th>总计</th>
                    <th v-for="logistic in logistics">@{{ logistic.value }}</th>
                </tr>
               <tr v-for="package in packages">
                    <td>
                        <input class="checkItem" type="checkbox" :value="package.owner_id" v-model="checkData">
                    </td>
                    <th class="text-muted">@{{ package.owner_name }}</th>
                    <td><p v-if="package.sum">@{{ package.sum }}</p><p v-else>0</p></td>
                    <td class="text-muted" v-for="logistic in logistics"><span v-if="package[logistic.name]">@{{ package[logistic.name] }}</span><span v-else>0</span></td>
                </tr>
            </table>

        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/export.js')}}"></script>
    <script>
        new Vue({
            el:"#statistics",
            data:{
                packages : [
                    @foreach($packages as $package)
                    {!! $package !!},
                    @endforeach
                ],
                owners:[
                    @foreach($owners as $owner)
                    {name:'{{$owner->id}}', value: '{{$owner->name}}'},
                    @endforeach
                ],
                logistics:[
                    @foreach($logistics as $logistic)
                    {name:'{{$logistic->id}}', value: '{{$logistic->name}}'},
                    @endforeach
                ],
                checkData:[],
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.packages.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#statistics').removeClass('d-none');
                let data = [[
                    {name:'logistic_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的物流公司'],
                        placeholder:['物流公司','定位或多选物流公司'],data:this.logistics},
                    {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                        placeholder:['货主','定位或多选货主'],data:this.owners},
                    {name:'created_at_start',type:'time',tip:['选择显示指定日期的起始时间','选择显示指定日期的起始时间']},
                    {name:'created_at_end',type:'time',tip:['选择显示指定日期的结束时间','选择显示指定日期的结束时间']},
                ]];
                this.form = new query({
                    el:'#form_div',
                    condition:data,
                    isPaginations:false,
                });
                this.form.init();
            },
            methods: {
                checkAll(e){
                    if (e.target.checked){
                        this.packages.forEach((el)=>{
                            if (this.checkData.indexOf(el.owner_id) === '-1'){
                                this.checkData.push(el.owner_id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                statisticExport:function (checkAllSign) {
                    let url = '{{url('package/statistics/export')}}';
                    let token='{{ csrf_token() }}';
                    //excelExport 定义在 js/queryForm/export200918.js
                    excelExport(checkAllSign,this.checkData,url,this.sum,token);
                },
            }
        });
    </script>
@endsection