@extends('layouts.app')
@section('title')客户日志状态@endsection

@section('content')
    <div id="nav2">
        @component('customer.menu')@endcomponent
        @component('customer.customer.menu')@endcomponent
    </div>

    <div class="d-none container-fluid" id="container">
        <div class="card">
            <div class="card-body">
                @include("customer.customerLogStatus._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-striped table-bordered table-hover">
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th>说明</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(model,i) in models" @click="selectedColor(model.id,$event)">
                        <td>@{{ i+1 }}</td>
                        <td>@{{ model.name }}</td>
                        <td>@{{ model.description }}</td>
                        <td>@{{ model.createdAt }}</td>
                        <td>@{{ model.updatedAt }}</td>
                        <td>
                            @can("客户-客户状态-编辑")<button class="btn btn-sm btn-outline-info" @click="openModal(model)">改</button>@endcan
                            @can("客户-客户状态-删除")<button class="btn btn-sm btn-outline-danger" @click="deleteModel(model,i)">删</button>@endcan
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                status:{},
                models:[
                    @foreach($customerLogStatuses as $customerLogStatus)
                    {id:"{{$customerLogStatus->id}}",'name':"{{$customerLogStatus->name}}", 'description':"{{$customerLogStatus->description}}"
                        , 'createdAt':"{{$customerLogStatus->created_at}}"
                        , 'updatedAt':"{{$customerLogStatus->updated_at}}"},
                    @endforeach
                ],
                errors:[],
                selectedStyle: '',
            },
            mounted(){
                $("#container").removeClass("d-none");
            },
            methods:{
                openModal(model){
                   if (model) this.status={id:model.id,name:model.name,description:model.description};
                   else this.status={id:"",name:"",description:""};
                   $("#modal").modal("show");
                },
                submitCustomerLogStatus(){
                    let url="{{url('customer/customer/customerLogStatus/save')}}";
                    let msg=this.status.id ? "成功修改状态“"+this.status.name+"”"  : "成功新增状态“"+this.status.name+"”";
                    window.tempTip.postBasicRequest(url,this.status,(res)=>{
                        if(res && res.errors){
                            this.errors = res.errors;
                            return '';
                        }
                        if (this.status.id){
                            this.models.some((model)=> {
                                if (model.id === this.status.id){
                                    model.name = this.status.name;
                                    model.description = this.status.description;
                                    return true;
                                }
                            });
                        }else this.models.unshift({
                            id:res.id,
                            name:res.name,
                            description:res.description,
                            createdAt:res.created_at,
                            updatedAt:res.updated_at,
                        });

                        $("#modal").modal("hide");
                        return msg;
                    },true);
                },
                deleteModel(model,index){
                    let url="{{url('customer/customer/customerLogStatus/destroy')}}";
                    let params = {id:model.id};
                    let msg="成功删除状态“"+model.name+"”";
                    window.tempTip.confirm("您确定要删除“"+model.name+"”吗？",()=>{
                        window.tempTip.postBasicRequest(url,params,res=>{
                            this.$delete(this.models,index);
                            return msg;
                        });
                    });
                },
                selectedColor(id,e){
                    $('.table-body').removeClass('focusing')
                    if (id === this.selectedStyle) {
                        this.selectedStyle = '';
                        return;
                    }
                    this.selectedStyle = id;
                    $(e.target).parent('tr').addClass('focusing')
                }
            },
        });
    </script>
@endsection