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

@section('content')
    <div id="nav2">
        @component('customer.menu')@endcomponent
        @component('customer.customer.menu')@endcomponent
    </div>
    <div class="container-fluid" id="container">
        @include("customer.customer.tag._edit")
        <div class="card">
            <div class="card-body">
                <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-hover">
                    <tr>
                        <th>序号</th>
                        <th>标签名</th>
                        <th>说明</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(tag,i) in tags">
                        <td>@{{ i+1 }}</td>
                        <td>@{{ tag.name }}</td>
                        <td><div style="white-space: normal;max-width: 200px">@{{ tag.explanation }}</div></td>
                        <td>@{{ tag.createdAt }}</td>
                        <td>
                            @can("客户-客户标签-编辑")<button class="btn btn-sm btn-outline-info" @click="openModal(tag)">改</button>@endcan
                            @can("客户-客户标签-删除")<button class="btn btn-sm btn-outline-danger" @click="deleteTag(tag,i)">删</button>@endcan
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                tags:[
                    @foreach($tags as $tag)
                    {id:"{{$tag->id}}",name:"{{$tag->name}}",explanation:"{{$tag->explanation}}",createdAt:"{{$tag->created_at}}"},
                    @endforeach
                ],
                tag:{},
                errors:[],
            },
            methods:{
                openModal(tag = null){
                    if (tag) this.tag={id:tag.id,name:tag.name,explanation:tag.explanation};
                    else this.tag={id:"",name:"",explanation:""};
                    $("#modal").modal("show");
                },
                submitCustomerTag(){
                    let url="{{url('customer/customer/customerTag/save')}}";
                    let msg=this.tag.id ? "成功修改标签“"+this.tag.name+"”"  : "成功新增标签“"+this.tag.name+"”";
                    window.tempTip.postBasicRequest(url,this.tag,(res)=>{
                        if(res && res.errors){
                            this.errors = res.errors;
                            return '';
                        }
                        if (this.tag.id){
                            this.tags.some((tag)=> {
                                if (tag.id === this.tag.id){
                                    tag.name = this.tag.name;
                                    tag.explanation = this.tag.explanation;
                                    return true;
                                }
                            });
                        }else this.tags.unshift({
                            id:res.id,
                            name:res.name,
                            explanation:res.explanation,
                            createdAt:res.created_at,
                        });

                        $("#modal").modal("hide");
                        return msg;
                    },true);
                },
                deleteTag(tag,index){
                    window.tempTip.confirm("确定要删除标签“"+tag.name+"”吗",()=> {
                        window.tempTip.setDuration(3000);
                        let url="{{url('customer/customer/customerTag')}}"+"/"+tag.id;
                        let msg="成功删除状态“"+tag.name+"”";
                        window.axios.delete(url).then(res=>{
                            if (res.data.success){
                                this.$delete(this.tags,index);
                                window.tempTip.setDuration(2000);
                                window.tempTip.showSuccess(msg);
                                return;
                            }
                            window.tempTip.show(res.data.data);
                        }).catch(err=>{
                            window.tempTip.show("网络错误："+err);
                        });
                    });
                },
            },
        });
    </script>
@stop
