@extends('layouts.app')
@section('title')查询-运输-价格模型@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.priceModel.waybillPriceModel.menu')@endcomponent
    </span>
    <div id="list">
    <div class="container-fluid">
        <div class="card">
            <div>
                <form  method="GET" action="{{url('maintenance/priceModel/waybillPriceModel')}}" id="optionSubmit">
                    <table class="table  table-sm table-bordered table-hover text-nowrap ">
                        <tr>
                            <td  > <label style="margin-left: 2%" class="form-inline">页显示条数：
                                <select name="paginate" v-model="filterData.paginate" class="form-control" @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></label></td>
                            <td > <label class="form-inline" style="margin-left: 2%">承运商：
                                <select name="logistic_id" v-model="filterData.logistic_id" class="form-control"  @change="setCarrier">
                                    <option >    </option>
                                    @foreach($logistics as $logistic)
                                        <option value="{{$logistic->id}}">{{$logistic->name}}</option>
                                    @endforeach
                                </select></label></td>
                            <td><label class="form-inline" style="margin-left: 2%">省份：
                                <select name="province_id" v-model="filterData.province_id" class="form-control" @change="setProvince">
                                    <option>    </option>
                                    @foreach($provinces as $province)
                                        <option value="{{$province->id}}">{{$province->name}}</option>
                                    @endforeach
                                </select><input hidden type="submit"></label></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <table class="table table-striped table-sm">
                    <tr>
                        <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="(waybillPriceModel,i) in waybillPriceModels"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td class="text-muted">@{{waybillPriceModel.id}}</td>
                        <td>@{{waybillPriceModel.logistic}}</td>
                        <td>@{{waybillPriceModel.province}}</td>
                        <td>@{{waybillPriceModel.city}}</td>
                        <td>@{{waybillPriceModel.unit}}</td>
                        <td>@{{waybillPriceModel.range_min}}<a v-if="waybillPriceModel.range_min&&waybillPriceModel.range_max">&nbsp;&nbsp;--&nbsp;&nbsp;</a> @{{waybillPriceModel.range_max}}</td>
                        <td>@{{waybillPriceModel.unit_price}}</td>
                        <td>@{{waybillPriceModel.base_fee}}</td>
                        <td>@{{waybillPriceModel.initial_weight}}</td>
                        <td class="text-muted">@{{waybillPriceModel.created_at}}</td>
                        <td>
                            @can('计费模型-编辑')
                                <button class="btn btn-sm btn-outline-primary" @click="edit(waybillPriceModel.id)">改</button> @endcan
                            @can('计费模型-删除')
                                <button class="btn btn-sm btn-outline-dark" @click="destroy(waybillPriceModel)">删</button> @endcan
                        </td>
                    </tr>
                </table>
                {{$waybillPriceModels->appends($filterData)->links()}}
            </div>
        </div>
    </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                waybillPriceModels:[
                    @foreach( $waybillPriceModels as $waybillPriceModel )
                        {id:'{{$waybillPriceModel->id}}',logistic:'{{$waybillPriceModel->logistic ? $waybillPriceModel->logistic->name : ''}}',
                        province:'{{$waybillPriceModel->province_name}}',city:'{{$waybillPriceModel->city_name}}',
                        unit:'{{$waybillPriceModel->unit_name}}',range_min:'{{$waybillPriceModel->range_min}}',range_max:'{{$waybillPriceModel->range_max}}',
                        unit_price:'{{$waybillPriceModel->unit_price}}',base_fee:'{{$waybillPriceModel->base_fee}}',initial_weight:'{{$waybillPriceModel->initial_weight}}',
                        created_at:'{{$waybillPriceModel->created_at}}'},
                    @endforeach
                ],
                filterData:
                    {paginate:'50',logistic_id:'',province_id: ''},
                selectTr:0
            },
            mounted:function(){
                this.initInputs();
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/priceModel/waybillPriceModel')}}/"+id+"/edit";
                },
                destroy:function(waybillPriceModel){
                    if(!confirm('确定要删除该计费模型吗？')){return};
                    let data=this;
                    let url = "{{url('maintenance/priceModel/waybillPriceModel')}}/"+waybillPriceModel.id;
                    axios.delete(url,{id:waybillPriceModel.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.waybillPriceModels.length; i++) {
                                    if (data.waybillPriceModels[i].id===waybillPriceModel.id){
                                        data.waybillPriceModels.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除计费模型成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除计费模型失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除计费模型失败!'+'网络错误：' + err);
                        });
                },
                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();
                },
                setCarrier:function (e){
                    this.filterData.logistic_id=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                setProvince:function (e){
                    this.filterData.province_id=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
            }
        });
    </script>
@endsection