@extends('layouts.app')
@section('title')查询-用户@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.user.menu')@endcomponent
    </span>
    <div class="container-fluid">
        <div class="card">
            <div id="form_div"></div>
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <div id="list">
                    <table class="table table-striped table-sm td-min-width-80" id="table">
                        <tr v-for="(user,i) in users"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                            <td><input class="checkItem" type="checkbox" :value="user.id"></td>
                            <td class="text-muted"><span>@{{user.id}}</span></td>
                            <td><span>@{{user.name}}</span></td>
                            <td>
                                <span class="text-danger" v-if="user.isSuperAdmin">超级管理员</span>
                                <ul v-if="user.roles.length>0" class="list-group">
                                    <li v-for="role in user.roles" style="list-style: none">@{{ role.name }}</li>
                                </ul>
                            </td>
                            <td><span v-if="user.workgroup&&user.workgroup.length>0">@{{ user.workgroup[0].name }}</span></td>
                            <td>
                                <ul v-if="user.logistics.length>0" class="list-group">
                                    <li v-for="logistic in user.logistics" style="list-style: none">@{{ logistic.name }}</li>
                                </ul>
                            </td>
                            <td>
                                <ul v-if="user.suppliers.length>0" class="list-group">
                                    <li v-for="supplier in user.suppliers" style="list-style: none">@{{ supplier.name }}</li>
                                </ul>
                            </td>
                            <td><span>@{{user.email}}</span></td>
                            <td class="text-muted"><span>@{{user.created_at}}</span></td>
                            <td>
                                @can('用户-编辑')
                                <button class="btn btn-sm btn-outline-primary" @click="edit(user.id)">改</button> @endcan
                                @can('用户-删除')
                                <button class="btn btn-sm btn-outline-dark" @click="destroy(user)">删</button> @endcan
                            </td>
                        </tr>
                    </table>
                    {{$users->links()}}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>

    </script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        new Vue({
            el:"#list",
            data:{
                users:{!! $users->toJson() !!}['data'],
                form:'',
                owners:[
                        @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                selectTr:0
            },
            mounted:function(){
                let data = [
                    [{name:'user',type:'input',tip:'用户名：可在两侧添加百分号(%)进行模糊搜索',placeholder:'用户名'},
                    {name:'role',type:'input',tip:'可支持多角色名,模糊搜索可在两侧添加百分号(%)进行',placeholder:'角色名'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                    ]
                ];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                this.form.init();
                let column = [
                    {name:'id',value: 'ID'},
                    {name:'name',value: '用户名'},
                    {name:'role_name',value: '角色', neglect: true},
                    {name:'workgroup_name',value: '工作组', neglect: true},
                    {name:'carrier_name',value: '配置承运商', neglect: true},
                    {name:'supplier_name',value: '配置供应商', neglect: true},
                    {name:'email',value: '邮件地址'},
                    {name:'created_at',value: '创建时间'},
                    {name:'operation',value: '操作', neglect: true},
                ];
                new Header({
                    el:"table",
                    name:"user",
                    column: column,
                    data: this.users,
                    fixedTop: ($('#form_div').height())+2,
                    isRestorationColumnAsc:true,
                    isCheckAllBox:false,
                }).init();
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/user')}}/"+id+"/edit";
                },
                destroy:function(user){
                    if(!confirm('确定要删除用户“' + user.name + '”吗？'))return;
                    let data=this;
                    let url = "{{url('maintenance/user')}}/"+user.id;
                    axios.delete(url,{id:user.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.users.length; i++) {
                                    if (data.users[i].id===user.id){
                                        data.users.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除用户"'+user.name+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除用户"'+user.name+'"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除用户失败!'+'网络错误：' + err)
                        });
                },
            }
        });
    </script>
@endsection