/**
 * layui扩展组件
 * 输入框的下拉表格选择（分页）
 * */
layui.define(['table', 'jquery', 'form'], function (exports) {
    "use strict";

    var MOD_NAME = 'tableSelect',
        $ = layui.jquery,
        table = layui.table,
        form = layui.form;
    var tableSelect = function () {
        this.v = '1.4.0';
    };

    /**
    * 初始化表格选择器
    */
    tableSelect.prototype.render = function (opt) {
        var elem = $(opt.elem);
		
        //默认设置
        opt.searchKey = opt.searchKey || 'keyword';//可多个用，分割
        opt.table.page = opt.table.page || false;
        opt.table.height = opt.table.height || 290;
        elem.off('keyup').on('keyup', function(e) {
            e.stopPropagation();
            //输入字符小于二或者特殊按钮不显示
            if ($('div.tableSelect').length >= 1 || elem.val().length <= 2 || event.key == "F7" || event.key == "F8" || event.key == "F6") {
                return false;
            }

            var t = elem.offset().top + elem.outerHeight()+"px";
            var l = elem.offset().left +"px";
            var tableName = "tableSelect_table_" + new Date().getTime();
            var tableBox = '<div class="tableSelect layui-anim layui-anim-upbit" style="left:'+l+';top:'+t+';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: absolute;z-index:66666666;margin: 5px 0;border-radius: 2px;min-width:530px;">';
                tableBox += '<div class="tableSelectBar">';
                tableBox += '<button style="float:left;" class="layui-btn layui-btn-sm tableSelect_btn_select">选择<span></span></button>';
                tableBox += '</div>';
                tableBox += '<table id="'+tableName+'" lay-filter="'+tableName+'" style="margin-top:20px"></table>';
                tableBox += '</div>';
                tableBox = $(tableBox);
            $('body').append(tableBox);
            //渲染TABLE
            opt.table.elem = "#"+tableName;
            opt.table.id = tableName;
            //若没有url表示为前端分页
            //if (opt.table.url != undefined) {
            //    opt.table.where['sWhere'] = opt.sWhere
            //} else {
            //    opt.table.data = opt.ajaxSelect(opt.sWhere);
            //}
            //让一次加载显示数据
            //当字符长度等于3时第一次加载
            if (elem.val().length == 3) {
                searchFirst()
            }
            opt.table.request={//设置页参数
                pageName: 'page', // 页码的参数名称，默认：page
                limitName: 'size' // 每页数据条数的参数名，默认：limit
            };
            opt.table.parseData=function(res){
                return {
                    "code": 0, // 解析接口状态
                    "msg": res.Message, // 解析提示文本
                    "count": res.count, // 解析数据长度
                    "data": res.data // 解析数据列表
                };
            }

            var tableSelect_table = table.render(opt.table);

			//FIX位置如何下面放不下放上面
			var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height();
			var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width();
            overHeight && tableBox.css({ 'top': elem.offset().top - tableBox.outerHeight()+'px','bottom':'auto'});
			overWidth && tableBox.css({'left':'auto','right':'5px'})
			
            //输入框上下回车动作
            elem.off('keydown').on('keydown', function (e) {
                var tableElem = $(opt.table.elem).next().find('tbody');
                //单选框上下键动作
                if (opt.table.cols[0][0]["type"] == "radio") {
                    // 获取表格的选中的行
                    var tr = tableElem.find('tr.layui-table-click');
                    switch (event.key) {
                        case "ArrowUp"://上键
                            if (tr.length == 0) {
                                tableElem.find('tr:first').children('td').eq(0).click();
                            } else {
                                tr['prev']().children('td').click();
                            }
                            break;
                        case "ArrowDown"://下键
                            if (tr.length == 0) {
                                tableElem.find('tr:first').children('td').eq(0).click();
                            } else {
                                tr['next']().children('td').click();
                            }
                            break;
                        case "Enter"://回车
                            tableBox.find('.tableSelect_btn_select').click();
                            break;
                    }
                } else {
                    //多选框
                    var checkbox = tableElem.find('input[type="checkbox"]:checked');
                    var tr = checkbox.closest('tr');
                    switch (event.key) {
                        case "ArrowUp"://上键
                            if (tr.length == 0) {
                                tableElem.find('tr:first').children('td').eq(0).click();
                            } else {
                                tr.children('td').eq(0).click();
                                tr['prev']().children('td').eq(0).click();
                            }
                            break;
                        case "ArrowDown"://下键
                            if (tr.length == 0) {
                                tableElem.find('tr:first').children('td').eq(0).click();
                            } else {
                                tr.children('td').eq(0).click();
                                tr['next']().children('td').eq(0).click();
                            }
                            break;
                        case "Enter"://回车
                            tableBox.find('.tableSelect_btn_select').click();
                            break;
                    }
                }
                
            })
            // 防抖函数
            function debounce(func, wait) {
                let timeout;
                return function () {
                    const context = this, args = arguments;
                    clearTimeout(timeout);
                    timeout = setTimeout(() => func.apply(context, args), wait);
                };
            }
            //搜索函数第一次加载
            function searchFirst() {
                var searchKeyList = opt.searchKey.split(',');//获取查找的关键字搜索框
                //拼接sql字符串
                var sWhereStr = " and ("
                searchKeyList.forEach(function (value, index) {
                    if (index == 0) {
                        sWhereStr += (value + " like '%" + elem.val() + "%' ")
                    } else {
                        sWhereStr += ("or " + value + " like '%" + elem.val() + "%' ")
                    }
                })
                sWhereStr += ")"
                //后端分页搜索
                if (opt.table.where != undefined) {
                    opt.table.where['sWhere'] = opt.sWhere + sWhereStr;
                } else {
                    var sWhere = opt.sWhere + sWhereStr;
                    opt.table.data = opt.ajaxSelect(sWhere);
                }
            }

            //输入框输入执行
            elem.off('input').on('input', debounce(
                function (e) {
                // 阻止表单提交（如果输入框在表单内）
                e.preventDefault();
                var searchKeyList = opt.searchKey.split(',');//获取查找的关键字搜索框
                //拼接sql字符串
                var sWhereStr = " and ("
                searchKeyList.forEach(function (value, index) {
                    if (index == 0) {
                        sWhereStr += (value + " like '%" + elem.val() + "%' ")
                    } else {
                        sWhereStr += ("or " + value + " like '%" + elem.val() + "%' ")
                    }
                })
                sWhereStr +=")"
                //后端分页搜索
                if (opt.table.where != undefined) {
                    opt.table.where['sWhere'] = opt.sWhere + sWhereStr;
                    tableSelect_table.reload({
                        where: opt.table.where,
                        page: {
                            curr: 1
                        }
                    });
                } else {
                    var sWhere = opt.sWhere + sWhereStr;
                    tableSelect_table.reload({
                        data: opt.ajaxSelect(sWhere)
                    });
                }
                
            },500))

            //双击行选中
            table.on('rowDouble('+tableName+')', function(obj){
                var checkStatus = {data:[obj.data]};
                selectDone(checkStatus);
            })
            //单击选中行
            table.on('row('+tableName+')', function (obj) {
                //判断是否已经被选中是否是单选框
                if (obj.tr.find('.layui-form-radioed').length == 0 && opt.table.cols[0][0]["type"] == "radio") {
                    //触发单选框选中事件
                    obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
                } else if(opt.table.cols[0][0]["type"] == "checkbox") { //复选框选中
                    //选中行改变颜色
                    var flag = !obj.tr.find(':checkbox:first').prop('checked');
                    obj.tr.find(':checkbox').prop('checked', flag);
                    if (flag) {
                        obj.tr.find('.layui-form-checkbox').addClass('layui-form-checked');  //设置复选框选中样式
                        $(obj.tr).attr({ "style": "background:#ceedfa;color:black" });//改变当前tr背景颜色和字体颜色
                    } else {
                        obj.tr.find('.layui-form-checkbox').removeClass('layui-form-checked');//取消复选框选中样式
                        $(obj.tr).attr({ "style": "background:" });//取消当前tr颜色
                    }
                    //mainTable 为表格ID   注意此处如果ID不正确将导致你在监听复选框时获取不到你选择的数据，前面的只是添加或删除选中未选中样式以及设置背景色，字体颜色
                    layui.each(table.cache[tableName], function (i, l) {
                        if (obj.tr.index() == l.LAY_TABLE_INDEX) {
                            l.LAY_CHECKED = flag;
                        }
                    });
                    //更新按钮（无用删除）
                    //updataButton(table.checkStatus(tableName).data.length)
                }
            })
            //按钮选中
            tableBox.find('.tableSelect_btn_select').on('click', function() {
                var checkStatus = table.checkStatus(tableName);
                if (checkStatus.data.length > 0) {
                    selectDone(checkStatus);
                } else {
                    tableBox.remove();
                    delete table.cache[tableName];
                }
                
            })

            //写值回调和关闭
            function selectDone (checkStatus){
                opt.done(elem, checkStatus);
                tableBox.remove();
                delete table.cache[tableName];
                $(opt.elem).blur();
            }
            
            //点击其他区域关闭
            $(document).mouseup(function(e){
                var userSet_con = $(''+opt.elem+',.tableSelect');
                if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
                    tableBox.remove();
                    delete table.cache[tableName];
                }
            });
        })
    }

    /**
    * 隐藏选择器
    */
    tableSelect.prototype.hide = function (opt) {
        $('.tableSelect').remove();
    }

    //自动完成渲染
    var tableSelect = new tableSelect();

    //FIX 滚动时错位
    if(window.top == window.self){
        $(window).scroll(function () {
            tableSelect.hide();
        });
    }

    exports(MOD_NAME, tableSelect);
})