@extends('layouts.app')
@section('title')查询-直发车-计费模型@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.priceModel.directLogistic.menu')@endcomponent
    </div>
    <div class="container-fluid mt-2" id="container">
        @include("maintenance.priceModel.directLogistic._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>
            </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="font-weight-bold">@{{ owner.name }}<br></small>
                </td>
                <td>@{{ model.baseKm }}</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}}",baseKm:"{{$model->base_km}}",createdAt:"{{$model->created_at}}",owners:{!! $model->owners !!}},
                    @endforeach
                ],
                index:"",
                carTypes : null,
                errors:{!! $errors !!},
                isShowError : false,
                details : [],
                selectTr:0
            },
            methods:{
                _dataReady(){
                    if (this.carTypes === null){
                        window.axios.post("{{url('maintenance/carType/get')}}")
                            .then(res=>{
                                this.carTypes = res.data;
                                this.$forceUpdate();
                            }).catch(err=>{
                            window.tempTip.setDuration(3000);
                            window.tempTip.setIndex(1099);
                            window.tempTip.show("网络错误："+err);
                        });
                    }
                },
                showDetailModal(model,index){
                    this._dataReady();
                    this.index = index;
                    if (this.details[model.id]){
                        $("#detailModal").modal("show");
                        return;
                    }
                    window.axios.post("{{url('maintenance/priceModel/directLogistic/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);
                    });
                },
                edit(id){
                    window.location.href = "{{url('maintenance/priceModel/directLogistic')}}/"+id+"/edit";
                },
                deleteModel(model,index){
                    window.tempTip.confirm("确定要删除“"+model.name+"”吗？",()=>{
                        window.axios.delete('{{url('maintenance/priceModel/directLogistic')}}/'+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);
                        })
                    });
                },
                selectFile(){
                    $("#file").click();
                },
                importDetail(e){
                    let file=e.target.files[0];
                    if (!file){
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.show("未选择文件");
                        return;
                    }
                    let id = this.models[this.index].id;
                    let formData = new FormData();
                    formData.append("file",file);
                    formData.append("id",id);
                    window.tempTip.setIndex(1099);
                    window.tempTip.setDuration(9999);
                    window.tempTip.waitingTip("执行中,请耐心等候......");
                    axios.post('{{url('maintenance/priceModel/directLogistic/import')}}',formData,{
                        'Content-Type':'multipart/form-data'
                    })
                        .then(res=>{
                            if (res.data.success) {
                                this.details[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" : "",
                        "car_type_id" : "",
                        "base_fee" : "",
                        "additional_fee" : "",
                        "edit" : true,
                    });
                    this.$forceUpdate();
                },
                delDetail(detail,index){
                    if (detail.id){
                        detail.base_fee = $("#base_fee-"+detail.id).attr('data');
                        detail.additional_fee = $("#additional_fee-"+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/directLogistic/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.car_type = res.data.data.car_type;
                                    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/directLogistic/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);
                        })
                    });
                },
            },
        });
    </script>
@stop