
@extends('layouts.app')
@section('title')异常记录@endsection

@section('content')
    <span id="nav2">
        @component('weight.menu')@endcomponent
        @component('weight.weightExcepted.menu')@endcomponent
    </span>
    <div class="d-none" id="list">
        <div class="container-fluid">
            <div class="card">
                <div>
                    <form  method="GET" action="{{url('package/weightExcepted/'.$view)}}" id="optionSubmit">
                        <table class="table  table-sm table-bordered table-hover text-nowrap ">
                            <tr>
                                <td  style="width:200px;"> <div class="form-inline"><label style="margin-left: 2%" >页显示条数：</label>
                                    <select name="paginate" v-model="filterData.paginate" class="form-control-sm" @change="setPaginate">
                                        <option value="50">50行</option>
                                        <option value="100">100行</option>
                                        <option value="200">200行</option>
                                        <option value="500">500行</option>
                                        <option value="1000">1000行</option>
                                    </select></div></td>
                            </tr>
                            <tr>
                                <td >
                                    <label style="margin-left: 5px"> 操作选定记录：</label>
                                    <span class="dropdown">
                                        <button class="btn btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark':'btn-outline-dark']"
                                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的过滤结果，将其全部记录（每一页）导出">
                                            导出Excel
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" @click="weightExport(1)" href="javascript:">导出勾选内容</a>
                                            <a class="dropdown-item" @click="weightExport(2)" href="javascript:">导出所有页</a>
                                        </div>
                                    </span>
                                    <input hidden type="submit">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            <div class="card-body">
                <label for="all" class="d-none" id="cloneCheckAll">
                    <input id="all" type="checkbox" @click="checkAll($event)">全选
                </label>
                <table class="d-none table table-bordered text-nowrap" id="headerRoll"></table>
                <table class="table table-striped table-sm text-nowrap" id="headerParent">
                    <tr id="header"></tr>
                    <tr v-for="(weightExcepted,i) in weightExcepteds" :style="weightExcepted.status=='上传异常'||weightExcepted.status=='下发异常'?'':color">
                        <td>
                            <input class="checkItem" type="checkbox" :value="weightExcepted.id" v-model="checkData">
                        </td>
                        <td>@{{ i+1 }}</td>
                        <td>@{{weightExcepted.logisticNumber}}</td>
                        <td>@{{weightExcepted.carrierName}}</td>
                        <td>@{{weightExcepted.batchNumber}}</td>
                        <td>@{{weightExcepted.batchRule}}</td>
                        @if($view=="indexIssued")
                            <td>@{{weightExcepted.ownerName}}</td>
                            <td>@{{weightExcepted.deliveryNumber}}</td>
                            <td class="text-muted">@{{weightExcepted.createdAt}}</td>
                            <td>@{{weightExcepted.recipient}}</td>
                            <td>@{{weightExcepted.recipientMobile}}</td>
                        @else
                            <td>@{{weightExcepted.measuringMachineName}}</td>
                            <td class="text-muted">@{{weightExcepted.weighedAt}}</td>
                            <td>@{{weightExcepted.weight}}</td>
                            <td>@{{weightExcepted.length}}</td>
                            <td>@{{weightExcepted.width}}</td>
                            <td>@{{weightExcepted.height}}</td>
                            <td>@{{weightExcepted.bulk}}</td>
                            <td>@{{weightExcepted.paperBoxName}}</td>
                            <td>@{{weightExcepted.status}}</td>
                        @endif
                    </tr>
                </table>
                <div class="text-info h5 btn btn">{{$weightExcepteds->count()}}/{{$weightExcepteds->total()}}</div>
                {{$weightExcepteds->links()}}
            </div>
        </div>
    </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{asset('js/queryForm/header200819.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#list",
            data:{
                weightExcepteds:[
                    @foreach($weightExcepteds as $weightExcepted)
                        @if($view=="indexIssued")
                            {id:'{{$weightExcepted->id}}',ownerName:'{{$weightExcepted->owner_name}}',logisticNumber:'{{$weightExcepted->logistic_number}}',
                            deliveryNumber:'{{$weightExcepted->delivery_number}}',createdAt:'{{$weightExcepted->created_at}}',
                            batchNumber:'{{$weightExcepted->batch_number}}', batchRule:'{{$weightExcepted->batch_rule}}',recipient:'{{$weightExcepted->recipient}}',
                            recipientMobile:'{{$weightExcepted->recipient_mobile}}',carrierName:'{{$weightExcepted->logistic_name}}'},
                        @else
                            {id:'{{$weightExcepted->id}}',logisticNumber:'{{$weightExcepted->logistic_number}}',carrierName:'{{$weightExcepted->logistic_name}}',
                            measuringMachineName:'{{$weightExcepted->measuringMachine_name}}',weighedAt:'{{$weightExcepted->weighed_at}}',
                            weight:'{{$weightExcepted->weight}}', length:'{{$weightExcepted->length}}',width:'{{$weightExcepted->width}}',height:'{{$weightExcepted->height}}',
                            bulk:'{{$weightExcepted->bulk}}',paperBoxName:'{{$weightExcepted->paperBox_name}}',status:'{{$weightExcepted->status}}',},
                        @endif
                    @endforeach
                ],
                filterData:{paginate:50},
                checkData:[],
                color:'color: red',
            },
           mounted:function(){
               this.initInputs();
               $(".tooltipTarget").tooltip({'trigger':'hover'});
               $('#list').removeClass('d-none');
               let column = [
                   {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                       dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                   {name:'index',value: '序号', neglect: true},
                   {name:'logisticNumber',value: '快递单号'},
                   {name:'carrierName',value: '物流公司'},
                   {name:'batchNumber',value: '波次号'},
                   {name:'batchRule',value: '波次规则'},
                   @if($view=="indexIssued"){name:'ownerName',value: '货主'},
                   {name:'deliveryNumber',value: '发货单号'},
                   {name:'createdAt',value: '下发时间', class:"text-muted"},
                   {name:'recipient',value: '收件人'},
                   {name:'recipientMobile',value: '收件人电话'},
                   @else{name:'measuringMachineName',value: '设备'},
                   {name:'weighedAt',value: '称重时间', class:"text-muted"},
                   {name:'weight',value: '重(KG)', neglect: true},
                   {name:'length',value: '长(CM)', neglect: true},
                   {name:'width',value: '宽(CM)', neglect: true},
                   {name:'height',value: '高(CM)', neglect: true},
                   {name:'bulk',value: '体积(CM³)', neglect: true},
                   {name:'paperBoxName',value: '纸箱'},
                   {name:'status',value: '异常类型'},@endif
               ];
               let _this = this;
               setTimeout(function () {
                   let header = new Header({
                       el: "#header",
                       column: column,
                       data: _this.weightExcepteds,
                       restorationColumn: 'id',
                       vue : vue,
                   });
                   header.init();
               },0);
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.weightExcepteds.length){
                            document.querySelector('#all').checked = true;
                            document.querySelector('#all_temp').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                            document.querySelector('#all_temp').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                initInputs:function(){
                    let data=this;
                    let uriParts =decodeURI(location.href).split("?");
                    if(uriParts.length>1){
                        let params = uriParts[1].split('&');
                        params.forEach(function(paramPair){
                            let pair=paramPair.split('=');
                            let key = pair[0], val = pair[1];
                            $('input[name="'+key+'"]').val(val);
                            $('select[name="'+key+'"]').val(val);
                            decodeURI(data.filterData[key]=val);
                        });
                    }
                },
                setPaginate:function(e){
                    this.filterData.paginate=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                checkAll(e){
                    if (e.target.checked){
                        this.weightExcepteds.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                weightExport(e){
                    let val=e;
                    if (val==1) {
                        if (this.checkData.length <= 0) {
                            tempTip.setDuration(4000);
                            tempTip.showSuccess('没有勾选任何记录');
                        } else {
                            location.href = "{{url('package/weightExcepted/export').'/'}}" + this.checkData;
                        }
                    }else {
                        location.href="{{url('package/weightExcepted/export/-1')}}";
                    }
                }
            }
        });
    </script>
@endsection
