@extends('layouts.app')
@section('title')运输管理-发运@endsection

@section('content')
    @component('waybill.menu')@endcomponent
    <div id="list" class=" container-fluid">
        <form method="GET" action="{{url('waybill/delivering')}}" id="form">
            <div class="text-nowrap mb-0" style="background: #fff;">
                <div v-if="isBeingFilterConditions">
                    <div><div class="col" style="padding:0">
                            <a  href="{{url('waybill/delivering')}}"><span class="btn btn-warning text-dark">清除筛选</span></a>
                        </div>
                    </div>
                </div>
                <div class="row mt-2 ml-2">
                    <div class="col-md-6 form-inline" style="max-width: 400px">
                        <input type="date" name="created_at_start" class="form-control form-control-sm tooltipTarget" title="选择显示指定日期的起始时间"
                               v-model="filterData.created_at_start" :class="filterData.created_at_start?'bg-warning':''">
                        <input type="date" class="form-control form-control-sm tooltipTarget" name="created_at_end" title="选择显示指定日期的结束时间"
                               v-model="filterData.created_at_end" :class="filterData.created_at_end?'bg-warning':''" >
                    </div>
                    <div class=" col-md-2 mr-0 " style="max-width: 160px">
                        <input type="text" title="运单号：可在两侧增加百分号(%)进行模糊搜索" name="waybill_number" placeholder="运单号"
                               class="form-control form-control-sm tooltipTarget" v-model="filterData.waybill_number" style="vertical-align: middle;width: 153px" :class="filterData.waybill_number?'bg-warning':''">
                    </div>
                    <div class=" col-md-2 ml-2 p-0" style="max-width: 160px">
                        <input type="text" title="承运商单号：可在两侧增加百分号(%)进行模糊搜索"  name="carrier_bill" placeholder="承运商单号"
                               class="form-control form-control-sm tooltipTarget" v-model="filterData.carrier_bill" style="vertical-align: middle;width: 153px" :class="filterData.carrier_bill?'bg-warning':''">
                    </div>
                    <input type="submit" hidden>
                </div>
                <div class="ml-4 mt-2">
                    <span class="dropdown">
                        <button type="button" class="btn  btn-sm  form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark text-light':'btn-outline-dark']"
                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
                            导出Excel
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" @click="waybillExport(false)" href="javascript:">导出勾选内容</a>
                            <a class="dropdown-item" @click="waybillExport(true)" href="javascript:">导出所有页</a>
                        </div>
                    </span>
                </div>
            </div>
        </form>
        <div class="card">
            <table class="table table-sm table-hover table-striped table-bordered d-none" id="headerRoll"></table>
            <table class="card-body table table-sm table-hover table-striped table-bordered d-none d-sm-block p-0 text-nowrap" style="width: 100%" id="headerParent">
                <tr style="width: 100%" id="header">
                    <th class="td-operation">
                        <label for="all">
                            <input id="all" type="checkbox" @click="checkAll($event)">全选
                        </label>
                    </th>
                </tr>
                <tr v-for="(waybill,i) in waybills">
                    <td>
                        <input class="checkItem" type="checkbox" :value="waybill.id" v-model="checkData">
                    </td>
                    <td>@{{ i+1 }}</td>
                    <td>@{{ waybill.created_at }}</td>
                    <td>@{{ waybill.carrier_name }}</td>
                    <td>@{{ waybill.waybill_number }}</td>
                    <td>@{{ waybill.origination }}</td>
                    <td>@{{ waybill.owner_name }}</td>
                    <td>@{{ waybill.warehouse_weight_other }}</td>
                    <td>@{{ waybill.warehouse_weight }}</td>
                    <td><span v-if="waybill.status=='已完结'">已完成</span><span v-else><span v-if="waybill.carrier_bill">已提交</span><span v-if="!waybill.carrier_bill">待提交</span></span></td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'carrier_bill'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?errors['_'+waybill.id].carrier_bill[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.carrier_bill">
                        </span><span v-else>@{{ waybill.carrier_bill }}</span>
                    </td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'inquire_tel'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?errors['_'+waybill.id].inquire_tel[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.inquire_tel">
                        </span><span v-else>@{{ waybill.inquire_tel }} </span>
                    </td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'amount'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].amount?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].amount?errors['_'+waybill.id].amount[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.amount">
                        </span><span v-else><span v-if="waybill.amount">@{{ waybill.amount }} @{{ waybill.amount_unit_name }}</span></span>
                    </td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'carrier_weight_other'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?errors['_'+waybill.id].carrier_weight_other[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.carrier_weight_other">
                        </span><span v-else>@{{ waybill.carrier_weight_other }}</span>
                    </td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'carrier_weight'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?errors['_'+waybill.id].carrier_weight[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.carrier_weight">
                        </span><span v-else>@{{ waybill.carrier_weight }}</span>
                    </td>
                    <td>
                        <span v-if="waybill.status!='已完结'">
                            <button v-if="!waybill.isBtn&&waybill.carrier_bill" @click="waybill.isBtn=true" class="btn btn-sm btn-outline-dark" >修改</button>
                            <button v-if="!waybill.isBtn&& !waybill.carrier_bill" @click="submit(waybill.id+'PC',waybill.id);" class="btn btn-sm btn-outline-info" >录入</button>
                            <button v-if="waybill.isBtn" @click="submit(waybill.id+'PC',waybill.id);" class="btn btn-sm btn-outline-success">确定</button>
                            <button @click="waybill.isBtn=false" v-if="waybill.isBtn" class="btn btn-sm btn-outline-danger">取消</button>
                        </span>
                    </td>
                </tr>
            </table>
            <table class="table table-striped table-sm table-bordered table-hover p-0 d-block d-sm-none" style="background: rgb(255, 255, 255);">
                <tbody>
                <tr v-for="waybill in waybills">
                    <td style="filter:grayscale(30%); ">
                        <div :style="waybill.status!='已完结'?'background-color:#f6eee8':''" class="mt-3">
                            <div style="transform:scale(0.9)" class="pl-0">
                                <span class="mr-3 text-nowrap"><span style="color:#783000">日期：</span><span style="color:#af7651">@{{ waybill.created_at }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">承运商：</span><span style="color:#af7651">@{{ waybill.carrier_name }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">宝时运单号：</span><span style="color:#af7651">@{{ waybill.waybill_number }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">提货仓：</span><span style="color:#af7651">@{{ waybill.origination }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">项目：</span><span style="color:#af7651">@{{ waybill.owner_name }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">预估重量：</span><span style="color:#af7651" v-if="waybill.warehouse_weight_other">@{{ waybill.warehouse_weight_other }} @{{ waybill.warehouse_weight_unit_other_name }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">预估体积：</span><span style="color:#af7651" v-if="waybill.warehouse_weight">@{{ waybill.warehouse_weight }} @{{ waybill.warehouse_weight_unit_name }}</span></span>
                            </div>
                        </div>
                        <div :style="waybill.status!='已完结'?'background-color:#e8eef6':''"  class="mb-3">
                            <div style="transform:scale(0.9)" class="pl-0 form-inline">
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">专线运单号：</span>
                                    <input :id="'carrier_bill'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?errors['_'+waybill.id].carrier_bill[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.carrier_bill"
                                           class="form-control form-control-sm " @click="enlarge($event)"  style="width: 50px">
                                    <span v-else  class="text-muted">@{{ waybill.carrier_bill }}</span>
                                </span>
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">查&nbsp;件&nbsp;电&nbsp;话：</span>
                                    <input :id="'inquire_tel'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?errors['_'+waybill.id].inquire_tel[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.inquire_tel"
                                           class="form-control form-control-sm" @click="enlarge($event)"  style="width:50px">
                                    <span v-else  class="text-muted">@{{ waybill.inquire_tel }}</span>
                                </span>
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">件数：</span>
                                    <input :id="'amount'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].amount?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].amount?errors['_'+waybill.id].amount[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.amount" class="form-control form-control-sm"
                                           @click="enlarge($event)" style="width:50px">
                                    <span v-else class="text-muted"><span v-if="waybill.amount">@{{ waybill.amount }} @{{ waybill.amount_unit_name }}</span></span>
                                </span>
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">重量：</span>
                                    <input :id="'carrier_weight_other'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?errors['_'+waybill.id].carrier_weight_other[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.carrier_weight_other"
                                           class="form-control form-control-sm" @click="enlarge($event)" style="width:50px">
                                    <span v-else class="text-muted">@{{ waybill.carrier_weight_other }}</span>
                                </span>
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">体积：</span>
                                    <input :id="'carrier_weight'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?errors['_'+waybill.id].carrier_weight[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.carrier_weight"
                                           class="form-control form-control-sm" @click="enlarge($event)" {{--@mouseleave="shrink($event)"--}} style="width:50px">
                                    <span v-else class="text-muted">@{{ waybill.carrier_weight }}</span>
                                </span>
                                <span class="mr-3 text-nowrap" v-if="waybill.status!='已完结'">
                                    <button v-if="waybill.isBtn==true || !waybill.carrier_bill" class="btn btn-sm btn-outline-success" @click="submit(waybill.id)">提交</button>
                                    <button v-if="waybill.isBtn==true" class="btn btn-sm btn-outline-danger" @click="waybill.isBtn=false">取消</button>
                                    <button v-if="waybill.isBtn==false && waybill.carrier_bill" class="btn btn-sm " @click="waybill.isBtn=true" :class="waybill.carrier_bill?'btn-outline-dark':'btn-outline-primary'">修改</button></span></div>
                        </div>
                    </td>
                </tr>
            </tbody>
            </table>
        </div>
    </div>
@endsection

@section('lastScript')
<style>
    .color1{background-color: #FFA07A}
    .color2{background-color: cornflowerblue}
</style>
<script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
<script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
<script>
    new Vue({
        el:"#list",
        data:{
            waybills:[
                    @foreach($waybills as $waybill)
                {id:'{{$waybill->id}}',
                    created_at:'{{$waybill->created_at}}',
                    waybill_number:'{{$waybill->waybill_number}}',
                    origination:'{{$waybill->origination}}',
                    carrier_bill:'{{$waybill->carrier_bill}}',
                    warehouse_weight:'{{$waybill->warehouse_weight}}',
                    carrier_weight:'{{$waybill->carrier_weight}}',
                    warehouse_weight_other:'{{$waybill->warehouse_weight_other}}',
                    carrier_weight_other:'{{$waybill->carrier_weight_other}}',
                    status:'{{$waybill->status}}',
                    amount:'{{$waybill->amount}}',
                    amount_unit_id:'{{$waybill->amount_unit_id}}',
                    amount_unit_name:'{{$waybill->amount_unit ? $waybill->amount_unit->name : ''}}',
                    inquire_tel:'{{$waybill->inquire_tel}}',
                    carrier_name:'{{$waybill->logistic ? $waybill->logistic->name : ''}}',
                    owner_name:'{{$waybill->owner ? $waybill->owner->name : ''}}',
                    warehouse_weight_unit_name:'{{$waybill->warehouse_weight_unit ? $waybill->warehouse_weight_unit->name : ''}}',
                    carrier_weight_unit_name:'{{$waybill->carrier_weight_unit ? $waybill->carrier_weight_unit->name : ''}}',
                    warehouse_weight_unit_other_name:'{{$waybill->warehouse_weight_unit_other ? $waybill->warehouse_weight_unit_other->name : ''}}',
                    carrier_weight_unit_other_name:'{{$waybill->carrier_weight_unit_other ? $waybill->carrier_weight_unit_other->name : ''}}',
                    isBtn:false
                },
                @endforeach
            ],
            filterData:{
                created_at_start:'',created_at_end:'',waybill_number:'',carrier_bill:''
            },
            checkData:[],
            errors:{},
            sum:{!! $waybills->total() !!},
        },
        watch:{
            checkData:{
                handler(){
                    if (this.checkData.length === this.waybills.length){
                        document.querySelector('#all').checked = true;
                    }else {
                        document.querySelector('#all').checked = false;
                    }
                },
                deep:true
            }
        },
        mounted:function(){
            let _this=this;
            $(".tooltipTarget").tooltip({'trigger':'hover'});
            _this.initInputs();
            $("#list").removeClass('d-none');
            let column = [
                {name:'index',value: '序号', neglect: true},
                {name:'created_at',value: '日期', class:"color1"},
                {name:'carrier_name',value: '承运商', class:"color1"},
                {name:'waybill_number',value: '宝时运单号', class:"color1"},
                {name:'origination',value: '提货仓', class:"color1"},
                {name:'owner_name',value: '货主', class:"color1"},
                {name:'warehouse_weight_other',value: '预估重量', neglect: true, class:"color1"},
                {name:'warehouse_weight',value: '预估体积', neglect: true, class:"color1"},
                {name:'status',value: '状态', class:"color2"},
                {name:'carrier_bill',value: '专线运单号', class:"color2"},
                {name:'inquire_tel',value: '查件电话', class:"color2"},
                {name:'amount',value: '件数', neglect: true, class:"color2"},
                {name:'carrier_weight_other',value: '重量', neglect: true, class:"color2"},
                {name:'carrier_weight',value: '体积', neglect: true, class:"color2"},
                {name:'operation',value: '操作', neglect: true},
            ];
            if (window.innerWidth > 500){
                let header = new Header({
                    el: "#header",
                    column: column,
                    data: this.waybills,
                    restorationColumn: 'id',
                    fixedTop:($('#form_div').height())+2,
                    offset:0.5,
                });
                header.init();
            }
        },
        computed:{
            isBeingFilterConditions:function(){

                for(let key in this.filterData){
                    if(this.filterData[key]){
                        return true
                    }
                }
                return false;
            },

        },
        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);
                    });
                }
            },
            checkAll(e){
                if (e.target.checked){
                    this.waybills.forEach((el,i)=>{
                        if (this.checkData.indexOf(el.id) == '-1'){
                            this.checkData.push(el.id);
                        }
                    });
                }else {
                    this.checkData = [];
                }
            },
            waybillExport(checkAllSign){
                let url = '{{url('waybill/deliveringExport')}}';
                let token='{{ csrf_token() }}';
                excelExport(checkAllSign,this.checkData,url,this.sum,token);
            },
            enlarge(e){
                e.target.style.width="150px";
            },
            shrink(e){
                e.target.style.width="50px";
            },
            submit(waybill_id,id=null){
                if (!confirm('确定要提交吗？')){return;}
                let _this=this;
                let data={};
                data['id'] = id ? waybill_id : '';
                data['carrier_bill'] = $("#carrier_bill"+waybill_id).val();
                data['inquire_tel'] = $("#inquire_tel"+waybill_id).val();
                data['amount'] = $("#amount"+waybill_id).val();
                data['carrier_weight'] = $("#carrier_weight"+waybill_id).val();//体积
                data['carrier_weight_other'] = $("#carrier_weight_other"+waybill_id).val();//重量
                if (_this.errors["_"+data['id']])_this.errors["_"+data['id']]={};
                axios.post("{{url('waybill/storeCarrierBill')}}",data)
                    .then(function (response) {
                        if (response.data.error){
                            tempTip.setDuration(3000);
                            tempTip.show(response.data.error);
                            return
                        }
                        if (response.data.errors){
                            Vue.set(_this.errors,"_"+data['id'],response.data.errors);
                            setTimeout(function(){
                                $(".tooltipTargetError").tooltip('show');
                            },1);
                            return;
                        }
                        _this.waybills.some(function (waybill) {
                            if (waybill.id===data['id']){
                                waybill.carrier_bill=response.data.carrier_bill;
                                waybill.inquire_tel=response.data.inquire_tel;
                                waybill.amount=response.data.amount;
                                waybill.amount_unit_name=response.data.amount_unit_name;
                                waybill.carrier_weight=response.data.carrier_weight;
                                waybill.carrier_weight_other=response.data.carrier_weight_other;
                                waybill.isBtn=false;
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('录入成功!');
                                return true;
                            }
                        });
                    }).catch(function (err) {
                    tempTip.setDuration(3000);
                    tempTip.show('网络异常：'+err);
                });
            }}
    });

</script>
@endsection