@extends('layouts.app')
@section('title')已删除@endsection

@section('content')
    <div id="nav2">
    @component('waybill.menu')@endcomponent
    </div>

    <div class=container-fluid">
        <div class="card" style="min-width: 2000px;">
            <div class="card-body" id="list">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <table class="table mb-n3 table-sm table-bordered">
                                <tr>
                                    <td>
                                        <span class="text-muted">每页显示记录：</span>
                                    </td>
                                    <td colspan="9">
                                        <select name="paginate" @change="submit()" id="setPaginate" class="tooltipTarget form-control-sm" v-model="filterParams.paginate" >
                                            <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>
                                    </td>
                                    <td class="w-75"></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">选定操作记录：</td>
                                    <td colspan="9">
                                        @can('运输管理-删除')
                                            <span class="btn btn-sm" @click="restoreSelected" style="cursor: pointer"
                                                     :class="[waybills_checkBoxes.length > 0?'btn-danger':'btn-outline-danger']">
                                            恢复
                                        </span>
                                        @endcan
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                </div>

                <table class="table table-striped table-sm table-bordered table-hover"  style="background: #fff;">
                    <tr>
                        <th class="td-operation">
                            <label for="all">
                                <input id="all" type="checkbox" @click="checkAll($event)">
                            </label>
                        </th>
                        <th >序号</th>
                        <th class="td-operation">状态</th>
                        <th >创建时间</th>
                        <th >运单类型</th>
                        <th >货主</th>
                        <th >上游单号</th>
                        <th >WMS订单号</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>
                    <tr v-for="(waybill,i) in waybills" :id="'waybill'+waybill.id">
                        <td>
                            <input class="checkItem" type="checkbox" :value="waybill.id" v-model="waybills_checkBoxes" >
                        </td>
                        <td>@{{ i+1 }}</td>
                        <td :class="[waybill.status=='已审核'?'text-success':'']">@{{waybill.status}}</td>
                        <td class="text-muted">@{{waybill.created_at}}
                        <td >@{{waybill.type}} </td>
                        <td >@{{waybill.owner}}</td>
                        <td >@{{waybill.source_bill}}</td>
                        <td class="">@{{waybill.wms_bill_number}}</td>
                        <td class="">@{{waybill.waybill_number}}</td>
                        <td class="">@{{waybill.recipient}}</td>
                        <td class="">@{{waybill.recipient_mobile}}</td>
                        <td class="text-muted">@{{waybill.origination}}</td>
                        <td class="text-muted">@{{waybill.destination}}</td>
                        <td >@{{waybill.carrier}}</td>
                        <td ><span v-if="waybill.type=='专线'">@{{waybill.carrier_bill}}</span>
                            <span v-if="waybill.type=='直发车'">
                            <span v-if="waybill.carType">@{{ waybill.carType.name }}<i v-if="waybill.carType.length">(@{{waybill.carType.length}}米)</i></span></span></td>
                        <td ><span v-if="waybill.warehouse_weight">@{{waybill.warehouse_weight}}  @{{waybill.warehouse_weight_unit}}</span></td>
                        <td ><span v-if="waybill.carrier_weight">@{{waybill.carrier_weight}}  @{{waybill.carrier_weight_unit}}</span></td>
                        <td ><span v-if="waybill.warehouse_weight_other">@{{waybill.warehouse_weight_other}}  @{{waybill.warehouse_weight_unit_other}}</span></td>
                        <td ><span v-if="waybill.carrier_weight_other">@{{waybill.carrier_weight_other}}  @{{waybill.carrier_weight_unit_other}}</span></td>
                        <td ><span v-if="waybill.amount">@{{waybill.amount}} @{{waybill.amount_unit_name }}</span></td>
                        <td >@{{waybill.mileage|km}}</td>
                        @can('运输管理-可见费用项')
                            <td ><span v-if="waybill.type=='专线'"></span><span v-else>@{{waybill.fee}}</span></td>
                            <td >@{{waybill.pick_up_fee}}</td>
                            <td >@{{waybill.other_fee}}</td>
                        @endcan
                        <td >@{{waybill.dispatch_remark}}</td>
                    </tr>
                </table>
                <div class="text-info h5 btn btn">{{$waybills->count()}}/{{$total}}</div>
                {{$waybills->appends($paginateParams)->links()}}
            </div>

        </div>


    </div>
@endsection
@section('lastScript')
    <script>
        let vueList = new Vue({
            el:'#list',
            data:{
                filterParams:{
                    paginate:'{{$paginateParams['paginate']}}',
                },
                waybills_checkBoxes:[],
                waybills:[
                    @foreach($waybills as $waybill)
                    {
                        id:'{{$waybill->id}}',
                        created_at:'{{$waybill->created_at}}',
                        updated_at:'{{$waybill->updated_at}}',
                        status:'{{$waybill->status}}',
                        type:'{{$waybill->type}}',
                        waybill_number:'{{$waybill->waybill_number}}',
                        owner:'{{$waybill->owner ? $waybill->owner->name : ''}}',
                        source_bill:'{{$waybill->source_bill}}',
                        wms_bill_number:'{{$waybill->wms_bill_number}}',
                        origination:'{{$waybill->origination}}',
                        destination:'{{$waybill->destination}}',
                        recipient:'{{$waybill->recipient}}',
                        recipient_mobile:'{{$waybill->recipient_mobile}}',
                        charge:'{{$waybill->charge}}',
                        ordering_remark:'{{$waybill->ordering_remark}}',
                        carrier:'{{$waybill->carrier ? $waybill->carrier->name : ''}}',
                        carrier_bill:'{{$waybill->carrier_bill}}',
                        origination_city:'{{$waybill->origination_city ? $waybill->origination_city->name : ''}}',
                        destination_city:'{{$waybill->destination_city ? $waybill->destination_city->name : ''}}',
                        warehouse_weight:'{{$waybill->warehouse_weight}}',
                        destination_province_name:'{{$waybill->destination_city ? ($waybill->destination_city->province ? $waybill->destination_city->province->name : '') : ''}}',
                        warehouse_weight_unit:'{{$waybill->warehouse_weight_unit ? $waybill->warehouse_weight_unit->name : ''}}',
                        carrier_weight:'{{$waybill->carrier_weight}}',
                        carrier_weight_unit:'{{$waybill->carrier_weight_unit ? $waybill->carrier_weight_unit->name : ''}}',
                        warehouse_weight_other:'{{$waybill->warehouse_weight_other}}',
                        warehouse_weight_unit_other:'{{$waybill->warehouse_weight_unit_other ? $waybill->warehouse_weight_unit_other->name : ''}}',
                        carrier_weight_other:'{{$waybill->carrier_weight_other}}',
                        carrier_weight_unit_other:'{{$waybill->carrier_weight_unit_other ? $waybill->carrier_weight_unit_other->name : ''}}',
                        amount_unit_name:'{{$waybill->amount_unit ? $waybill->amount_unit->name : ''}}',
                        mileage:'{{$waybill->mileage}}',
                        amount:'{{$waybill->amount}}',
                        @if($waybill->carType)carType:{!! $waybill->carType !!},car_owner_info:'{{$waybill->car_owner_info}}',@endif
                        @can('运输管理-可见费用项') fee:'{{$waybill->fee}}',
                        pick_up_fee:'{{$waybill->pick_up_fee}}',other_fee:'{{$waybill->other_fee}}',
                        collect_fee:'{{$waybill->collect_fee}}', @endcan
                        dispatch_remark:'{{$waybill->dispatch_remark}}',
                        isBtn:false,
                        waybillAuditLogs:{!! $waybill->waybillAuditLogs !!}
                    },
                    @endforeach
                ],
            },
            watch:{
                waybills_checkBoxes:{
                    handler(){
                        if (this.waybills_checkBoxes.length === this.waybills.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                },
            },
            mounted:function(){
            },
            methods:{
                restoreSelected:function(){
                    let _this = this;
                    if(_this.waybills_checkBoxes.length === 0){
                        tempTip.show("没有勾选记录");
                        return;
                    }
                    if(!confirm("确定要恢复所有勾选的内容为'未删除'吗？")){return;}
                    let ajaxUrl = '{{url('apiLocal/waybill/recoverSelected')}}';
                    axios.post(ajaxUrl,{ids:_this.waybills_checkBoxes}).then(function (response) {
                        if(response.data.success){
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('恢复勾选内容成功!');
                            window.setTimeout(function () {
                                window.location.href='{{url('waybill/recycle')}}';
                            },2000);
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.show('恢复勾选内容失败，错误：'+response.data.fail_info);
                            setTimeout(function () {
                                window.location.reload();
                            },1000);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(2500);
                        tempTip.show('恢复勾选内容失败，错误：'+err);
                    });
                },
                checkAll(e){
                    if (e.target.checked){
                        this.waybills.forEach((el,i)=>{
                            if (this.waybills_checkBoxes.indexOf(el.id) == '-1'){
                                this.waybills_checkBoxes.push(el.id);
                            }
                        });
                    }else {
                        this.waybills_checkBoxes = [];
                    }
                },
                submit(){
                    let url = decodeURI(location.href).split("?");
                    location.href = url[0]+"?paginate="+    this.filterParams.paginate;
                }
            },
            filters:{
                km:function(value){
                    if(!value)return '';
                    return value + ' km';
                },
            }
        })
    </script>
@endsection