@extends('admin.layout-content')

@section('header')
    <style>

    </style>
@endsection

@section('content')
    <div class="layui-card">
        <div class="layui-card-header sg-card-header">
            {{ $model_name }}管理
            <div class="sg-card-create">
                <button id="sg-create-btn" class="layui-btn layui-btn-sm">创建{{ $model_name }}</button>
            </div>
        </div>
        <div class="layui-card-body">
            <form class="layui-form" id="sg-search-form">
                <div class="layui-form-item layui-row">
                    {{--<div class="layui-inline">--}}
                        {{--<div class="layui-input-inline">--}}
                            {{--<select name="project_id">--}}
                                {{--<option value="">项目</option>--}}
                                {{--@foreach($project_options as $option)--}}
                                    {{--<option value="{{ $option['id'] }}" {{ request('project_id') == $option['id'] ? 'selected' : ''  }}>{{ $option['name'] }}</option>--}}
                                {{--@endforeach--}}
                            {{--</select>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                    {{--<div class="layui-inline">--}}
                        {{--<div class="layui-input-inline">--}}
                            {{--<select name="project_role_id">--}}
                                {{--<option value="">项目角色</option>--}}
                                {{--@foreach($role_options as $option)--}}
                                    {{--<option value="{{ $option['id'] }}" {{ request('project_role_id') == $option['id'] ? 'selected' : ''  }}>{{ $option['name'] }}</option>--}}
                                {{--@endforeach--}}
                            {{--</select>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input" value="{{ request('name') }}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="number" name="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input" value="{{ request('phone') }}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-btn" id="sg-search-btn">搜索</div>
                    </div>
                </div>
            </form>
            <table id="sg-main-table" class="layui-hide" lay-filter="tableEvent"></table>
            <script type="text/html" id="sg-table-bar">
                <div class="layui-btn-group">
                    <div class="layui-btn-group">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="role">角色管理</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                    </div>
                </div>
            </script>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(function () {
            layui.use(['table', 'layer'], function(){
                var table = layui.table,
                    layer = layui.layer,
                    form = layui.form,
                    laydate = layui.laydate,
                    top_window = window;

                table.render({
                    elem: '#sg-main-table',
                    url: '{{ $pre_uri }}' + 'get',
                    cellMinWidth: 80,
                    cols: [[
                        { field: 'id', title: 'ID', align: 'center' },
                        { field: 'name', title: '用户名', align: 'center' },
                        { field: 'phone', title: '手机号', align: 'center' },
                        // { field: 'project_name', title: '项目', align: 'center' },
                        // { field: 'role_name', title: '项目角色', align: 'center' },
                        { field: 'created_at', title: '创建时间', align: 'center' },
                        { title: '操作', align:'center', toolbar: '#sg-table-bar' }
                    ]],
                    page: {
                        layout: ['count', 'prev', 'page', 'next', 'skip', 'refresh'],
                        limit: 15
                    },
                    even: true,
                    where: transformToJson($('#sg-search-form').serializeArray()),
                    done: function(res, curr, count) {

                    }
                });
                table.on('tool(tableEvent)', function(obj){
                    var data = obj.data;
                    if(obj.event === 'delete'){
                        layer.confirm('确定要删除吗？', function(index) {
                            $.ajax({
                                method: 'POST',
                                url: '{{ $pre_uri }}' + 'delete',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                data: {
                                    id: data.id
                                },
                                success: function (data) {
                                    if(data.status === 'success') {
                                        obj.del();
                                    } else {
                                        layer.msg(data.info, {
                                            icon: 2
                                        });
                                    }
                                    layer.close(index);
                                },
                                error: function () {
                                    layer.close(index);
                                    layer.msg('删除失败', {
                                        icon: 2
                                    });
                                }
                            });
                        });
                    } else if(obj.event === 'edit') {
                        layer.open({
                            title: '编辑账号',
                            type: 2,
                            area: ['90%', '90%'],
                            content: '{{ $pre_uri }}' + 'edit?id=' + data.id,
                            end: function () {
                                top_window.location.reload();
                            }
                        });
                    } else if(obj.event === 'role') {
                        layer.open({
                            title: '角色管理',
                            type: 2,
                            area: ['90%', '90%'],
                            content: '/admin/ProjectUserRole/index?user_id=' + data.id,
                            end: function () {
                                top_window.location.reload();
                            }
                        });
                    }
                });

                if($('#search-begin-date').length > 0) {
                    laydate.render({
                        elem: '#search-begin-date',
                        done: function () {
                            updateTableBySearch();
                        }
                    });
                }

                if($('#search-end-date').length > 0) {
                    laydate.render({
                        elem: '#search-end-date',
                        done: function () {
                            updateTableBySearch();
                        }
                    });
                }

                function transformToJson(formData){
                    var obj={};
                    for (var i in formData) {
                        obj[formData[i].name]=formData[i]['value'];
                    }
                    return obj;
                }

                function updateTableBySearch() {
                    table.reload('sg-main-table', {
                        where: transformToJson($('#sg-search-form').serializeArray()),
                        page: {
                            curr: 1
                        }
                    });
                }

                $('#sg-search-btn').click(function() {
                    updateTableBySearch();
                });
                // $('#sg-search-form').change(function () {
                //     updateTableBySearch();
                // });
                //
                // form.on('select()', function(){
                //     updateTableBySearch();
                // });

                $('#sg-create-btn').on('click', function () {
                    layer.open({
                        title: '创建' + '{{ $model_name }}',
                        type: 2,
                        area: ['90%', '90%'],
                        content: '{{ $pre_uri }}' + 'create',
                        end: function () {
                            top_window.location.reload();
                        }
                    });
                });

                $('#sg-table-top-container').on('click', '.btn-delete-many', function () {
                    layer.confirm('确定要删除所有选中行吗？', function () {
                        var data = table.checkStatus('sg-main-table').data;
                        if(data.length <= 0) {
                            layer.msg('选择不能为空', {
                                icon: 2
                            });
                            return false;
                        }
                        var ids = [];
                        for(var i = 0; i < data.length; ++i) {
                            ids.push(data[i]['id']);
                        }
                        $.ajax({
                            method: 'POST',
                            url: '{{ $pre_uri }}' + 'deleteMany',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                                ids: JSON.stringify(ids)
                            },
                            success: function (data) {
                                if(data.status === 'success') {
                                    top_window.location.reload();
                                } else {
                                    layer.msg(data.info, {
                                        icon: 2
                                    });
                                }

                            },
                            error: function () {
                                layer.msg('删除失败', {
                                    icon: 2
                                });
                            }
                        });
                    })
                });
            });
        })
    </script>
@endsection