@section('title', '用户列表')  
@section('header')
     <style>
        /* .layui-form-switch{
            margin: 0;
        } */
        
    </style> 
    <div class="layui-inline">
        <input type="text" lay-verify="title" value="{{ $input['title'] or '' }}" name="title" placeholder="请输入关键字" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline">
        <select name="status" lay-filter="status" lay-verify="status">
            <option value="">请选择一个内容</option>
            <option value="userid" {{isset($input['status'])&&$input['status']=='userid'?'selected':''}}>用户ID</option>
            <option value="username" {{isset($input['status'])&&$input['status']=='username'?'selected':''}}>姓名</option>
            <option value="mobile" {{isset($input['status'])&&$input['status']=='mobile'?'selected':''}}>手机号</option>
            <option value="customer_id" {{isset($input['status'])&&$input['status']=='customer_id'?'selected':''}}>所属客户ID</option>
        </select>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">搜索</button>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-small layui-btn-normal addBtn" data-desc="添加用户" data-url="{{url('/users/0/edit')}}"><i class="layui-icon">&#xe654;</i></button>
        <button class="layui-btn layui-btn-small layui-btn-warm fresh"><i class="layui-icon">&#x1002;</i></button>
        <div id="synchro" class="layui-btn layui-btn-small"><i class="layui-icon">&#xe612;</i></div>
    </div>
@endsection
@section('table')
    <table class="layui-table" lay-even lay-skin="nob"  >
        <colgroup>
            <col class="hidden-xs" width="50">
            <col class="hidden-xs" width="200">
            <col class="hidden-xs" width="150">
            <col class="hidden-xs" width="150">
            <col>
            <col class="hidden-xs" width="150">
            <col class="hidden-xs" width="150">
            <col class="hidden-xs" width="150">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th class="hidden-xs">ID</th>
            <th class="hidden-xs">用户角色</th>
            <th class="hidden-xs">用户ID</th>
            <th class="hidden-xs">姓名</th>
            <th>邮箱</th>
            <th class="hidden-xs">手机号码</th>
            <th class="hidden-xs">所属客户</th>
            <th class="hidden-xs">启用状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        @foreach($list as $info)
            <tr>
                <td class="hidden-xs">{{$info['id']}}</td>
                <td class="hidden-xs">{{$info['roles'][0]['display_name'] or '已删除'}}</td>
                <td class="hidden-xs">{{$info['userid']}}</td>
                <td class="hidden-xs">{{$info['username']}}</td>
                <td>{{$info['email']}}</td>
                <td class="hidden-xs">{{$info['mobile']}}</td>
                <td class="hidden-xs">{{$info['customers']['name']}}</td>
                <td class="hidden-xs">
                    <input type="checkbox" name="{{$info['id']}}" value="{{$info['status']}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="modifyStatus" {{ $info['status'] == 1 ? 'checked' : '' }}>
                </td>
                <td>
                    <div class="layui-inline">
                        <a href="{{ url('/infomanage/'.$info['id']) }}" class="layui-btn layui-btn-small layui-btn-normal"><i class="layui-icon">&#xe614;</i></a>
                        <button class="layui-btn layui-btn-small layui-btn-normal edit-btn" data-id="{{$info['id']}}" data-desc="修改用户" data-url="{{url('/users/'. $info['id'] .'/edit')}}"><i class="layui-icon">&#xe642;</i></button>
                        <button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-id="{{$info['id']}}" data-url="{{url('/users/'.$info['id'])}}"><i class="layui-icon">&#xe640;</i></button>
                    </div>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
    <div class="page-wrap">
        {{$list->render()}}
    </div>
@endsection
@section('js')
    <script>
        layui.use(['form', 'jquery','laydate', 'layer', 'dialog'], function() {
            var form = layui.form(),
                $ = layui.jquery,
                laydate = layui.laydate,
                dialog = layui.dialog;
                layer = layui.layer;
            laydate({istoday: true});
            form.render();
            form.on('submit(formDemo)', function(data) {
                console.log(data);
            });

            form.verify({
                title:function(value){
                    var select_info = $("select[name='status']").val();
                    if(value&&select_info){
                        switch (select_info){
                            case 'userid':
                                if(!(/[a-zA-Z0-9]/g).test(value))return '请输入正确格式的用户ID';
                                break;
                            case 'username':
                                if((/^\w+$/).test(value))return '请输入正确格式的姓名';
                                break;
                            case 'mobile':
                                if(!(/^[0-9]*$/).test(value))return '请输入正确格式的手机号';
                                break;
                            case 'customer_id':
                                if(!(/^[0-9]*$/).test(value))return '请输入正确格式客户ID';
                                break;
                            default:
                                return '输入参数错误';
                                break;

                        }
                    }else if(!value&&select_info){
                        return '请输入关键字';
                    }
                },
                status: function(value) {
                    var keyword = $("input[name='title']").val();
                    if(keyword&&!value){
                        return '请选择一个内容';
                    }
                },
            });

            $('.fresh').click(function() {
                $("input[name='begin']").val('');
                $("input[name='title']").val('');
                $("select[name='status']").val('');
                $('form').submit();
            }).mouseenter(function() {
                dialog.tips('刷新页面', '.fresh');
            });

            //修改用户状态
            form.on('switch(modifyStatus)', function (obj) {
                $.ajax({
                    url:"{{url('/savestatus')}}",
                    data:{id: this.name},
                    type:'post',
                    headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    dataType:'json',
                    success:function(res){
                        if(res.status == 1){
                            layer.msg(res.msg,{icon:6, time: 1000});
                        }else{
                            layer.msg(res.msg,{shift: 6,icon:5, time: 1000});
                        }
                    },
                    error : function(XMLHttpRequest, textStatus, errorThrown) {
                        layer.msg('网络失败', {time: 1000});
                    }
                });
                return false;
            });
            
              
              
            //同步用户
            $('#synchro').click(function() {
                layer.confirm('确定同步吗？', {title: '操作确认'} ,function(index){
                    layer.msg('同步中,请等待', {
                        icon: 16
                        ,shade: [0.5, '#f5f5f5']
                        ,scrollbar: false
                        ,offset: 'auto'
                        ,time:100000
                    }); 
                    $.ajax({
                        url:"{{url('/synchro')}}",
                        data:{},
                        type:'post',
                        headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        dataType:'json',
                        success:function(res){
                            if(res.status == 1){
                                layer.msg(res.msg,{icon:6, time: 1000});
                                setTimeout("location.reload();", 1000);
                                
                            }else{
                                layer.msg(res.msg,{shift: 6,icon:5, time: 1000});
                            }
                        },
                        error : function(XMLHttpRequest, textStatus, errorThrown) {
                            layer.msg('网络失败', {time: 1000});
                        }
                    });
                    layer.close(index);
                });       

            }).mouseenter(function() {

                dialog.tips('同步用户', '#synchro');

            });
        });        
    </script>
@endsection
@extends('common.list')