@extends('layouts.app')
@section('title')税率@endsection
@section('content')
    <div class="container-fluid" id="container">
        <div class="card">
            <div class="card-body">
                @include("maintenance.taxRate._edit")
                <div class="row pull-left ml-1">
                    @can("税率-编辑")<button class="btn btn-outline-info mb-1 mr-3" @click="openModal()"><span class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增</button>@endcan
                </div>
                <table class="table table-hover table-striped text-nowrap">
                    <tr>
                        <th>序号</th>
                        <th>税率</th>
                        <th>创建时间</th>
                        <th>最后操作时间</th>
                        <th></th>
                    </tr>
                    <tr v-for="(taxRate,i) in taxRates" @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td>@{{ i+1 }}</td>
                        <td>@{{ taxRate.value }}%</td>
                        <td class="text-muted">@{{ taxRate.created_at }}</td>
                        <td class="text-muted">@{{ taxRate.updated_at }}</td>
                        <td>
                            @can("税率-编辑")<button class="btn btn-sm btn-outline-info" @click="openModal(taxRate)">改</button>@endcan
                            @can("税率-删除")<button class="btn btn-sm btn-outline-danger" @click="deleteModel(taxRate,i)">删</button>@endcan
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
@stop
@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                taxRates:[
                    @foreach($taxRates as $taxRate)@json($taxRate),@endforeach
                ],
                taxRate:{},
                selectTr:0,
            },
            methods:{
                openModal(model){
                    if (model) this.taxRate={id:model.id,value:model.value};
                    else this.taxRate={};
                    $("#modal").modal("show");
                },
                submit(){
                    let url="{{url('maintenance/taxRate/save')}}";
                    let msg=this.taxRate.id ? "成功修改税率"  : "成功新增税率";
                    window.tempTip.postBasicRequest(url,this.taxRate,(res)=>{
                        if (this.taxRate.id){
                            this.taxRates.some((model)=> {
                                if (model.id === this.taxRate.id){
                                    model.value = this.taxRate.value;
                                    return true;
                                }
                            });
                        }else this.taxRates.unshift({
                            id:res.id,
                            value:res.value,
                            created_at:res.created_at,
                            updated_at:res.updated_at,
                        });
                        $("#modal").modal("hide");
                        return msg;
                    },true);
                },
                deleteModel(model,index){
                    let url="{{url('maintenance/taxRate/destroy')}}";
                    let params = {id:model.id};
                    let msg="成功删除税率“"+model.value+"%”";
                    window.tempTip.confirm("您确定要删除税率“"+model.value+"%”吗？",()=>{
                        window.tempTip.postBasicRequest(url,params,res=>{
                            this.$delete(this.taxRates,index);
                            return msg;
                        });
                    });
                },
            },
        });
    </script>
@stop