@extends('layouts.app')
@section('title')查询-快递-计费模型@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.priceModel.logistic.menu')@endcomponent
    </div>
    <div class="container-fluid mt-2" id="container">
        @include("maintenance.priceModel.logistic._detailModal")
        @if(Session::has('successTip'))
            <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
        @endif
        <table class="table table-hover table-striped text-nowrap">
            <tr>
                <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="(model,i) in models"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                <td>@{{ i+1 }}</td>
                <td>
                    <button class="btn btn-sm btn-info" @click="showDetailModal(model,i)">维护详情</button>
                </td>
                <td>@{{ model.name }}</td>
                <td>
                    <small v-for="owner in model.owners" class="m-0 font-weight-bold">@{{ owner.name }}<br></small>
                </td>
                <td>
                    <small v-for="logistic in model.logistics" class="font-weight-bold">@{{ logistic.name }}<br></small>
                </td>
                <td>@{{ model.unitName }}</td>
                <td>
                    <small v-for="range in model.unitRange">@{{ range }}<br></small>
                </td>
                <td>@{{ model.otherUnitName }}</td>
                <td>
                    <small v-for="range in model.otherUnitRange">@{{ range }}<br></small>
                </td>
                <td>@{{ model.pickUpPrice }}</td>
                <td>@{{ model.fuelPrice }}</td>
                <td>@{{ model.servicePrice }}</td>
                <td>@{{ model.createdAt }}</td>
                <td>
                    @can("计费模型-物流-编辑")<button type="button" class="btn btn-sm btn-outline-info" @click="edit(model.id)">编辑</button>@endcan
                    @can("计费模型-物流-删除")<button type="button" class="btn btn-sm btn-outline-danger" @click="deleteModel(model,i)">删除</button>@endcan
                </td>
            </tr>
        </table>
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                models : [
                    @foreach($models as $model)
                    {   id:"{{$model->id}}",
                        name:"{{$model->name}}",
                        unitId:"{{$model->unit_id}}",
                        otherUnitId:"{{$model->other_unit_id}}",
                        unitRange:{!! $model->unit_range_json !!},
                        unitName:"{{$model->unit ? $model->unit->name : ''}}",
                        otherUnitRange:{!! $model->other_unit_range_json !!},
                        otherUnitName:"{{$model->otherUnit ? $model->otherUnit->name : ''}}",
                        pickUpPrice:"{{$model->pick_up_price}}",
                        fuelPrice:"{{$model->fuel_price}}",
                        servicePrice:"{{$model->service_price}}",
                        createdAt:"{{$model->created_at}}",
                        owners:{!! $model->owners !!},
                        logistics:{!! $model->logistics !!}
                    },
                    @endforeach
                ],
                index:"",
                details : [],
                units : null,
                provinces : null,
                cities : null,
                errors:{!! $errors !!},
                isShowError : false,
                selectTr:0
            },
            methods:{
                _dataReady(){
                    if (this.units === null){
                        this.units = [];
                        window.axios.post("{{url('maintenance/unit/getUnits')}}")
                            .then(res=>{
                                if (res.data.success){
                                    this.units = res.data.data;
                                    return;
                                }
                                window.tempTip.setDuration(3000);
                                window.tempTip.show(res.data.data);
                            }).catch(err=>{
                            window.tempTip.setDuration(3000);
                            window.tempTip.show("网络错误："+err);
                        });
                    }
                    if (this.provinces === null){
                        this.provinces = [];
                        window.axios.post('{{url('maintenance/province/get')}}')
                            .then(res=>{
                                this.provinces = res.data.data;
                            });
                    }
                    if (this.cities === null){
                        this.cities = [];
                        window.axios.post('{{url('maintenance/city/get')}}')
                            .then(res=>{
                                let cities = [];
                                res.data.data.forEach(function (city) {
                                    if (city.province_id){
                                        if (cities[city.province_id]){
                                            cities[city.province_id].push(city)
                                        }else{
                                            cities[city.province_id] = [city];
                                        }
                                    }
                                });
                                this.cities = cities;
                            });
                    }
                },
                showDetailModal(model,index){
                    this._dataReady();
                    this.index = index;
                    if (this.details[model.id]){
                        $("#detailModal").modal("show");
                        return;
                    }
                    window.axios.post("{{url('maintenance/priceModel/logistic/getDetail')}}", {id:model.id})
                        .then(res=>{
                            if (res.data.success){
                                this.details[model.id] = res.data.data;
                                this.$forceUpdate();
                                $("#detailModal").modal("show");
                                return;
                            }
                            window.tempTip.setDuration(3000);
                            window.tempTip.show(res.data.data);
                        }).catch(err=>{
                        window.tempTip.setDuration(3000);
                        window.tempTip.show("网络错误："+err);
                    });
                },
                deleteModel(model,index){
                    window.tempTip.confirm("确定要删除“"+model.name+"”吗？",()=>{
                        window.axios.delete('{{url('maintenance/priceModel/logistic')}}/'+model.id)
                            .then(res=>{
                                if (res.data.success){
                                    this.$delete(this.models,index);
                                    tempTip.setDuration(2000);
                                    tempTip.showSuccess("删除"+model.name+"成功");
                                    return;
                                }
                                tempTip.setDuration(3000);
                                tempTip.show(res.data.data);
                            }).catch(err=> {
                            tempTip.setDuration(3000);
                            tempTip.show("网络错误："+err);
                        })
                    });
                },
                edit(id){
                    window.location.href = "{{url('maintenance/priceModel/logistic')}}/"+id+"/edit";
                },
                selectFile(){
                    $("#file").click();
                },
                importDetail(e){
                    let file=e.target.files[0];
                    if (!file){
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.show("未选择文件");
                        return;
                    }
                    let formData = new FormData();
                    formData.append("file",file);
                    formData.append("id",this.models[this.index]["id"]);
                    window.tempTip.setIndex(1099);
                    window.tempTip.setDuration(9999);
                    window.tempTip.waitingTip("执行中,请耐心等候......");
                    axios.post('{{url('maintenance/priceModel/logistic/import')}}',formData,{
                        'Content-Type':'multipart/form-data'
                    })
                        .then(res=>{
                            if (res.data.success) {
                                this.details[this.models[this.index]["id"]] = res.data.data;
                                this.errors = res.data.errors;
                                tempTip.cancelWaitingTip();
                                tempTip.setDuration(2000);
                                tempTip.showSuccess("导入成功!");
                                return;
                            }
                            tempTip.cancelWaitingTip();
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.data);
                        }).catch(err=> {
                        tempTip.cancelWaitingTip();
                        tempTip.setDuration(3000);
                        tempTip.show("网络错误："+err);
                    })
                },
                addDetail(){
                    this._dataReady();
                    this.details[this.models[this.index].id].unshift({
                        "id" : "",
                        "unit_id" : "",
                        "range" : "",
                        "province_id" : "",
                        "city_id" : "",
                        "unit_price" : "",
                        "delivery_fee" : "",
                        "initial_fee" : "",
                        "initial_amount" : "",
                        "rate" : "",
                        "edit" : true,
                    });
                    this.$forceUpdate();
                },
                delDetail(detail,index){
                    if (detail.id){
                        detail.unit_price = $("#unit_price-"+detail.id).attr('data');
                        detail.delivery_fee = $("#delivery_fee-"+detail.id).attr('data');
                        detail.initial_fee = $("#initial_fee-"+detail.id).attr('data');
                        detail.initial_amount = $("#initial_amount-"+detail.id).attr('data');
                        detail.rate = $("#rate-"+detail.id).attr('data');
                        detail.edit = false;
                    }else{
                        this.$delete(this.details[this.models[this.index]["id"]],index);
                    }
                    this.$forceUpdate();
                },
                updateDetail(detail){
                    detail["edit"] = true;
                    this.$forceUpdate();
                },
                submitDetail(detail){
                    tempTip.setIndex(1099);
                    window.axios.post('{{url('maintenance/priceModel/logistic/updateDetail')}}',{id:this.models[this.index].id,detail:detail})
                        .then(res=>{
                            if (res.data.success) {
                                tempTip.setDuration(2000);
                                if (detail.id){
                                    tempTip.showSuccess("修改成功");
                                }else{
                                    detail.id = res.data.data.id;
                                    detail.province = res.data.data.province;
                                    detail.city = res.data.data.city;
                                    detail.unit = res.data.data.unit;
                                    tempTip.showSuccess("新增成功");
                                }
                                detail.edit = false;
                                this.$forceUpdate();
                                return;
                            }
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.data);
                        }).catch(err=> {
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.show("网络错误："+err);
                    })
                },
                deletePriceModel(id,index){
                    window.tempTip.setIndex(1099);
                    window.tempTip.confirm("确定要删除该省份计费模型吗？",()=>{
                        window.axios.post('{{url('maintenance/priceModel/logistic/destroyDetail')}}',{id:id})
                            .then(res=>{
                                if (res.data.success){
                                    this.$delete(this.details[this.models[this.index].id],index);
                                    tempTip.setDuration(2000);
                                    tempTip.showSuccess("删除成功");
                                    this.$forceUpdate();
                                    return;
                                }
                                tempTip.setDuration(3000);
                                tempTip.show(res.data.data);
                            }).catch(err=> {
                            tempTip.setDuration(3000);
                            tempTip.setIndex(1099);
                            tempTip.show("网络错误："+err);
                        })
                    });
                },
                exportDetail(){
                    window.open("{{url('maintenance/priceModel/logistic/export')}}/"+this.models[this.index].id);
                }
            },
        });
    </script>
@stop