@extends('layouts.app')
@section('title')客户@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.customer.menu')@endcomponent
    </div>
    <div class="container-fluid card" id="container">
        <div class="card-body mt-2">
            @if(Session::has('successTip'))
                <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
            @endif
            <table class="table table-striped table-hover text-nowrap">
                <tr>
                    <th>序号</th>
                    <th>代码</th>
                    <th>名称</th>
                    <th>客户全称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(customer,i) in customers">
                    <td>@{{ i+1 }}</td>
                    <td>@{{ customer.code }}</td>
                    <td>@{{ customer.name }}</td>
                    <td>@{{ customer.company_name }}</td>
                    <td>@{{ customer.created_at }}</td>
                    <td>
                        @can("客户-编辑")<a :href="'{{url('maintenance/customer')}}/'+customer.id+'/edit'"><button class="btn btn-sm btn-outline-info">改</button></a>@endcan
                        @can("客户-删除")<button class="btn btn-sm btn-outline-danger" @click="destroy(customer.id,i,customer.name)">删</button>@endcan
                    </td>
                </tr>
            </table>
        </div>
    </div>
@stop

@section('lastScript')
    <script>
        new Vue({
            el:"#container",
            data:{
                customers : [
                    @foreach($customers as $customer)
                    {
                        id:"{{$customer->id}}",
                        code:"{{$customer->code}}",
                        name:"{{$customer->name}}",
                        company_name:"{{$customer->company_name}}",
                        created_at:"{{$customer->created_at}}",
                    },
                    @endforeach
                ],
            },
            methods:{
                destroy(id,index,name){
                    window.tempTip.confirm("确定要删除"+name+"吗？",()=>{
                        window.axios.delete("{{url('maintenance/customer')}}/"+id)
                            .then(res=>{
                                if (res.data.success){
                                    this.$delete(this.customers,index);
                                    window.tempTip.setDuration(2000);
                                    window.tempTip.showSuccess("删除"+name+"成功");
                                    return;
                                }
                                window.tempTip.setDuration(3000);
                                window.tempTip.show(res.data.data);
                            }).catch(err=>{
                            window.tempTip.setDuration(3000);
                            window.tempTip.show("网络错误："+err);
                        })
                    })
                }
            },
        });
    </script>
@stop