<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../component/layui/css/layui.css">
    <link rel="stylesheet" href="../../assets/css/pearone.css">
    <style>
        body{
            margin: 10px;
            background-color:lightgray;
        }
        .layui-table-cell{
            height:40px!important;
            line-height: 40px!important;
        }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-body">

        <form class="layui-form layui-form-pane" action="#" >
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入账号" class="layui-input">
                </div>
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                </div>
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="isLogin" lay-filter="aihao">
                        <option value="">全部</option>
                        <option value="0">启用</option>
                        <option value="1">禁用</option>

                    </select>
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>

        <table class="layui-hide" id="demo" lay-filter="test"></table>


        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn  layui-bg-blue" lay-event="add">创建用户</button>
                <button class="layui-btn  layui-btn-danger" lay-event="delete">批量删除</button>

            </div>
        </script>

        <script type="text/html" id="avatar">
            <img src="../../assets/images/avatar.jpg" style="width: 38px;height: 38px;border-radius: 3px;" />
        </script>

        <script type="text/html" id="switchTpl">
            <!-- 这里的 checked 的状态只是演示 -->
            <input type="checkbox" name="sex" value="{{d.userId}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo" {{ d.isLogin == 0 ? 'checked' : '' }}>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs"  lay-event="editPassword">修改密码</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../modules/lay-config.js"></script>
<script>
    layui.use(['table','layer','jquery','form','pearone'], function(){
        var layer = layui.layer //弹层
            ,table = layui.table
            ,$ = layui.jquery
            ,form = layui.form
            ,pearone = layui.pearone;
        var tabIns = table.render({
             elem: '#demo'
            ,method:'get'
            ,url: '../../api/user.json' //数据接口
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true //开启合计行
            ,cols: [
                [ //表头
                     {type: 'checkbox', fixed: 'left'}
                    ,{field: 'userId', width:70, fixed: 'left',templet:'#avatar'}
                    ,{field: 'realName', title: '姓名', width: 120}
                    ,{field: 'userName', title: '用户名'}
                    ,{field: 'email', title: '邮箱', width:180, sort: true}
                    ,{field: 'phone', title: '联系方式',width:180}
                    ,{field: 'sex', title: '性别', width: 120}
                    ,{field: 'status', title: '状态', templet: '#switchTpl',width:100}
                    ,{fixed: 'right',width: 240, align:'center', toolbar: '#barDemo'}
                ]
            ]
        });

        //监听性别操作
        form.on('switch(sexDemo)', function(obj){
            var url ="";
            if(obj.elem.checked==true)
            {
                //调用开启
                url = "/user/enable";
            }else{
                //调用禁用
                url = "/user/disable";
            }
            pearone.put(url,{userId:this.value},function (data) {
                pearone.success(data.msg);
            })

        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    //实现用户添加功能
                    layer.open({
                        type: 2,
                        title:"用户创建",
                        shadeClose: false,
                        shade: 0.3,
                        area: ["80%","80%"],
                        content: "/user/add"
                    });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        var ids = '';
                        layui.each(data,function(k,v){
                            ids += v.userId+',';
                        });
                        ids = ids.substr(0,ids.length-1);

                        console.log("获取的ID值:"+ids);
                        layer.confirm('真的删除行么', function(index){

                            $.ajax({
                                url:'/user/remove',
                                data:{id:ids},
                                dataType:'json',
                                type:'delete',
                                success:function(data){
                                    if(data.success){
                                        layer.msg("删除成功",{icon:1,time:1000},function(){
                                            //实现用户删除功能
                                            tabIns.reload();
                                            layer.close(index);
                                        })
                                    }else{
                                        layer.msg("删除失败",{icon:2,time:1000});
                                    }
                                }
                            })
                        });
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    pearone.request('/user/remove','delete',{id:obj.data.userId},function(data){
                        pearone.success(data.msg,function(){
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.close(index); //关闭当前确认窗体
                        })
                    })
                });
            } else if(layEvent === 'edit'){
                //实现用户修改功能
                layer.open({
                    type: 2,
                    title:"用户修改",
                    shadeClose: false,
                    shade: 0.3,
                    area: ["80%","80%"],
                    content: "/user/edit?userId="+obj.data.userId
                });
            }else if(layEvent === "editPassword"){
                pearone.open("修改密码","/user/editPassword?userId="+obj.data.userId)
            }
        });

        form.on('submit(demo1)', function(data){

            tabIns.reload({
                where: data.field
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });



    });
</script>
</body>
