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

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.priceModel.express.menu')@endcomponent
    </div>
    <div class="container-fluid mt-2" id="container">
        @include("maintenance.priceModel.express._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>首重(KG)</th>
                <th>续重(KG)</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>@{{ model.name }}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" @click="showDetailModal(model)">维护详情</button>
                </td>
                <td>@{{ model.initialWeight }}</td>
                <td>@{{ model.additionalWeight }}</td>
                <td>
                    <small v-for="owner in model.owners" class="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.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}}",
                        initialWeight:"{{$model->initial_weight }}",
                        additionalWeight:"{{$model->additional_weight }}",
                        createdAt:"{{$model->created_at}}",
                        owners:{!! $model->owners !!},
                        logistics:{!! $model->logistics !!},
                    },
                    @endforeach
                ],
                id : "",
                name : "",
                details : [],
                errors : [],
                isShowError : false,
                provinces : null,
                selectTr:0
            },
            methods:{
                showDetailModal(model){
                    this.id = model.id;
                    this.name = model.name;
                    if (this.details[model.id]){
                        $("#detailModal").modal("show");
                        return;
                    }
                    window.axios.post("{{url('maintenance/priceModel/express/getDetail')}}", {id:model.id})
                        .then(res=>{
                            if (res.data.success){
                                if (res.data.data.length>0){
                                    this.details[model.id] = res.data.data;
                                    this.$forceUpdate();
                                }else {
                                    this.details[model.id] = [];
                                    this.addDetail();
                                }
                                $("#detailModal").modal("show");
                                return;
                            }
                            window.tempTip.setDuration(3000);
                            window.tempTip.show(res.data.data);
                        }).catch(err=>{
                            console.log(err);
                        window.tempTip.setDuration(3000);
                        window.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 formData = new FormData();
                    formData.append("file",file);
                    formData.append("id",this.id);
                    axios.post('{{url('maintenance/priceModel/express/import')}}',formData,{
                        'Content-Type':'multipart/form-data'
                    })
                        .then(res=>{
                            if (res.data.success) {
                                this.details[this.id] = res.data.data;
                                this.errors = res.data.errors;
                                tempTip.setDuration(3000);
                                tempTip.setIndex(1099);
                                tempTip.showSuccess("导入成功!");
                                return;
                            }
                            tempTip.setDuration(3000);
                            tempTip.setIndex(1099);
                            tempTip.show(res.data.data);
                        }).catch(err=> {
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.show("网络错误："+err);
                    })
                },
                addDetail(){
                    if (this.provinces === null){
                        window.tempTip.postBasicRequest('{{url('maintenance/province/get')}}',{},data=>{
                            this.provinces = data;
                        });
                    }
                    this.details[this.id].unshift({
                        "id" : "",
                        "province_id" : "",
                        "initial_weight_price" : "",
                        "additional_weight_price" : "",
                        "edit" : true,
                    });
                    this.$forceUpdate();
                },
                delDetail(detail,index){
                    if (detail.id){
                        detail.additional_weight_price = $("#additional-"+detail.id).attr('data');
                        detail.initial_weight_price = $("#initial-"+detail.id).attr('data');
                        detail.edit = false;
                    }else{
                        this.$delete(this.details[this.id],index);
                    }
                    this.$forceUpdate();
                },
                updateDetail(detail){
                    detail["edit"] = true;
                    this.$forceUpdate();
                },
                submitDetail(detail){
                    tempTip.setIndex(1099);
                    window.axios.post('{{url('maintenance/priceModel/express/updateDetail')}}',{id:this.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;
                                    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/express/destroyDetail')}}',{id:id})
                            .then(res=>{
                                if (res.data.success){
                                    this.$delete(this.details[this.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);
                        })
                    });
                },
                deleteModel(model,index){
                    window.tempTip.confirm("确定要删除"+model.name+"吗？",()=>{
                        window.axios.delete('{{url('maintenance/priceModel/express')}}/'+model.id)
                            .then(res=>{
                                if (res.data.success){
                                    this.$delete(this.models,index);
                                    tempTip.setDuration(2000);
                                    tempTip.showSuccess("删除成功");
                                    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/express')}}/"+id+"/edit";
                },
                exportDetail(){
                   window.open("{{url('maintenance/priceModel/express/export')}}/"+this.id);
                }
            },
        });
    </script>
@stop