layui.use(['form', 'table', 'laydate'], function(){
    var form = layui.form;
    var table = layui.table;
    var laydate = layui.laydate;

    laydate.render({
        elem: '#begin_time' //指定元素
    });

    laydate.render({
        elem: '#end_time' //指定元素
    });

    var renderTable = function () {
        table.render({
            id: 'list'
            ,elem: '#kefu'
            ,url: '/api/ApiKefuList' //数据接口
            ,method:'post'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
            ,page: true //开启分页
            ,cols: [[ //表头
                {title: '序号', type: 'numbers', fixed: 'left', width: 80}
                ,{field: 'sale_id', title: '客服ID', width: 200}
                ,{field: 'sale_name', title: '客服名称', width: 200}
                ,{field: 'email', title: '邮箱', width: 300}
                ,{field: 'operator_name', title: '操作人名称', width: 200}
                ,{field: 'status', title: '审核状态', templet: '#status', width: 200}
                ,{field: 'create_time', title: '创建时间', width: 200}
                ,{title: '操作',  align:'center', fixed: 'right', toolbar: '#list_action', width: 218}
            ]]
            ,limit: 10
            ,limits: [10, 20, 50,]
        });
    };

    renderTable();

    form.on('submit(load)', function(data) {         
        //执行重载
        table.reload('list', {
            page: {
                curr: 1
            }
            ,where: data.field
        });    

        return false;
    });  

    $('.add').click(function() {
        layer.open({
            area: ['400px', '200px'],
            title: '新增客服',
            type: 1,
            content: $('#kefu-action'),
            btn: ['确认', '取消'],
            yes: function(index) {
                var email = $('.kefu-email').val();
                if (!email) {
                    layer.tips('请输入邮箱', $('.kefu-email'));
                    return false;
                }

                $.ajax({
                    url : '/api/ApiAddKefu',
                    type: 'post',
                    data: {email: email},
                    dataType: 'json',
                    success: function(resp) {
                        if (resp.errcode == 0) {
                            layer.close(index);
                            layer.msg(resp.errmsg);
                            renderTable(); // 重新加载table
                            return false;
                        }

                        layer.msg(resp.errmsg);
                    }, 
                    error: function(err) {
                        console.log(err)
                    }
                })

                layer.msg('新增客服中...', {icon: 16, time: 0, shade: 0.3}); // 阻止重复提交

                return false;
            },
            cancel: function(index) {
                layer.close(index);
            }
        })

        $('.kefu-email').val('');
    })

    // tool操作
    table.on('tool(kefu)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性lay-filter="对应的值"
        var data     = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
        var url      = '';
        var title    = '';
        var content  = '';
        var datax    = {};
        
        datax.id = data.id;

        if(layEvent === 'edit') { 
            url     = '/api/ApiEditKefu';
            title   = '编辑客服';
            content = $('#kefu-action');
        } else if (layEvent === 'del') { 
            url     = '/api/ApiDelKefu';
            title   = '删除客服';
            content = '<div style="margin: 40px;">确定删除该客服吗?</div>';
            datax.status = data.status;
        } else if (layEvent === 'top') { 
            url     = '/api/ApiTopKefu';
            title   = '置顶客服';
            content = '<div style="margin: 40px;">确定置顶该客服吗?</div>';
        }

        layer.open({
            area: ['400px', '200px'],
            title: title,
            type: 1,
            content: content,
            btn: ['确认', '取消'],
            yes: function(index) {
                if (layEvent == 'edit') {
                    var email = $('.kefu-email').val();

                    if (!email) {
                        layer.tips('请输入邮箱', $('.kefu-email'));
                        return false;
                    }

                    datax.email = email;
                }

                $.ajax({
                    url : url,
                    type: 'post',
                    data: datax,
                    dataType: 'json',
                    success: function(resp) {
                        if (resp.errcode == 0) {
                            layer.close(index);
                            layer.msg(resp.errmsg);
                            renderTable(); // 重新加载table

                            return false;
                        }

                        layer.msg(resp.errmsg);
                    }, 
                    error: function(err) {
                        console.log(err)
                    }
                })

                layer.msg(title+'中...', {icon: 16, time: 0, shade: 0.3}); // 阻止重复提交

                return false;
            },
            cancel: function(index) {
                layer.close(index);
            }
        })

        if (layEvent == 'edit') {
            $('.kefu-email').val(data.email);
        }
    }); 
    

});