@extends('layouts.app')

@section('content')
    <span id="nav2">
        @component('waybill.menu')@endcomponent
        @component('waybill.billingModel.menu')@endcomponent
    </span>
    <div class="container-fluid mt-3">
        <div class="card">
            <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" id="list">
                    <tr>
                        <th>代码</th>
                        <th>承运商名称</th>
                        <th>省份</th>
                        <th>城市</th>
                        <th>计重单位</th>
                        <th>区间</th>
                        <th>单价(元)</th>
                        <th>始重</th>
                        <th>录入时间</th>
                    </tr>
                    <tr v-for="billingModel in billingModels">
                        <td class="text-muted">@{{billingModel.id}}</td>
                        <td>@{{billingModel.carrier}}</td>
                        <td>@{{billingModel.province}}</td>
                        <td>@{{billingModel.city}}</td>
                        <td>@{{billingModel.unit}}</td>
                        <td>@{{billingModel.range_min}} -- @{{billingModel.range_max}}</td>
                        <td>@{{billingModel.unit_price}}</td>
                        <td>@{{billingModel.initial_weight}}</td>
                        <td class="text-muted">@{{billingModel.created_at}}</td>
                        <td>
                            @can('计费模型-编辑')
                                <button class="btn btn-sm btn-outline-primary" @click="edit(billingModel.id)">改</button> @endcan
                            @can('计费模型-删除')
                                <button class="btn btn-sm btn-outline-dark" @click="destroy(billingModel)">删</button> @endcan
                        </td>
                    </tr>
                </table>
                {{$billingModels->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                billingModels:[
                    @foreach( $billingModels as $billingModel )
                        {id:'{{$billingModel->id}}',carrier:'{{$billingModel->carrier->name}}',
                        province:'{{$billingModel->province->name}}',city:'{{$billingModel->city->name}}',
                        unit:'{{$billingModel->unit->name}}',range_min:'{{$billingModel->range_min}}',range_max:'{{$billingModel->range_max}}',
                        unit_price:'{{$billingModel->unit_price}}',initial_weight:'{{$billingModel->initial_weight}}',
                        created_at:'{{$billingModel->created_at}}'},
                    @endforeach
                ],
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('billingModel')}}/"+id+"/edit";
                },
                destroy:function(billingModel){
                    if(!confirm('确定要删除该计费模型吗？')){return};
                    let data=this;
                    let url = "{{url('billingModel')}}/"+billingModel.id;
                    axios.delete(url,{id:billingModel.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.billingModels.length; i++) {
                                    if (data.billingModels[i].id===billingModel.id){
                                        data.billingModels.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除计费模型成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除计费模型失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除计费模型失败!'+'网络错误：' + err);
                            console.log(err);
                        });
                },
            }
        });
    </script>
@endsection