@extends('layouts.app')
@section('title')查询-项目组@endsection

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

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                groups : [
                    @foreach($groups as $group)
                    {
                        id:"{{$group->id}}",
                        name:"{{$group->name}}",
                        created_at:"{{$group->created_at}}",
                    },
                    @endforeach
                ],
                selectTr:0
            },
            methods:{
                destroy(id,index,name){
                    window.tempTip.confirm("确定要删除"+name+"吗？",()=>{
                        window.axios.delete("{{url('maintenance/userOwnerGroup')}}/"+id)
                            .then(res=>{
                                if (res.data.success){
                                    this.$delete(this.groups,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