/**
 * 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.2.0';
    };

    /**
    * 初始化表格选择器
    */
    tableSelect.prototype.render = function (opt) {
        var elem = $(opt.elem);
		
        //默认设置
        opt.searchKey = opt.searchKey || 'keyword';
        opt.checkedKey = opt.checkedKey;
        opt.table.page = opt.table.page || false;
        opt.table.height = opt.table.height || 290;
        elem.off('click').on('click', function(e) {
            e.stopPropagation();
            if($('div.tableSelect').length >= 1){
                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);
            //数据缓存
            var checkedData = [];
            //渲染TABLE
            opt.table.elem = "#"+tableName;
            opt.table.id = tableName;
            opt.table.where['sWhere'] = opt.sWhere
            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 // 解析数据列表
                };
            }
            opt.table.done = function(res, curr, count){
                defaultChecked(res, curr, count);
                setChecked(res, curr, count);
            };
            var tableSelect_table = table.render(opt.table);

            //分页选中保存数组
            table.on('radio('+tableName+')', function(obj){
                if(opt.checkedKey){
                    checkedData = table.checkStatus(tableName).data
                }
                updataButton(table.checkStatus(tableName).data.length)
            })
            table.on('checkbox(' + tableName + ')', function (obj) {
                if(opt.checkedKey){
                    if(obj.checked){
                        for (var i=0;i<table.checkStatus(tableName).data.length;i++){
                            checkedData.push(table.checkStatus(tableName).data[i])
                        }
                    }else{
                        if(obj.type=='all'){
                            for (var j=0;j<table.cache[tableName].length;j++) {
                                for (var i=0;i<checkedData.length;i++){
                                    if(checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]){
                                        checkedData.splice(i,1)
                                    }
                                }
                            }
                        }else{
                            //因为LAYUI问题，操作到变化全选状态时获取到的obj为空，这里用函数获取未选中的项。
                            function nu (){
                                var noCheckedKey = '';
                                for (var i=0;i<table.cache[tableName].length;i++){
                                    if(!table.cache[tableName][i].LAY_CHECKED){
                                        noCheckedKey = table.cache[tableName][i][opt.checkedKey];
                                    }
                                }
                                return noCheckedKey
                            }
                            var noCheckedKey = obj.data[opt.checkedKey] || nu();
                            for (var i=0;i<checkedData.length;i++){
                                if(checkedData[i][opt.checkedKey] == noCheckedKey){
                                    checkedData.splice(i,1);
                                }
                            }
                        }
                    }
                    checkedData = uniqueObjArray(checkedData, opt.checkedKey);
                    updataButton(checkedData.length)
                }else{
                    updataButton(table.checkStatus(tableName).data.length)
                }
            });

            //渲染表格后选中
            function setChecked (res, curr, count) {
                for(var i=0;i<res.data.length;i++){
                    for (var j=0;j<checkedData.length;j++) {
                        if(res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]){
                            res.data[i].LAY_CHECKED = true;
                            var index= res.data[i]['LAY_TABLE_INDEX'];
                            var checkbox = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="checkbox"]');
                                checkbox.prop('checked', true).next().addClass('layui-form-checked');
                            var radio  = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="radio"]');
                            radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").html('&#xe643;');
                            radio.closest('tr').addClass('layui-table-click');
                        }
                    }
                }
                var checkStatus = table.checkStatus(tableName);
				if(checkStatus.isAll){
					$('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
					$('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
				}
				updataButton(checkedData.length)
            }
            
            //写入默认选中值(puash checkedData)
            function defaultChecked (res, curr, count){
                if(opt.checkedKey && elem.attr('ts-selected')){
                    var selected = elem.attr('ts-selected').split(",");
                    for(var i=0;i<res.data.length;i++){
                        for(var j=0;j<selected.length;j++){
                            if(res.data[i][opt.checkedKey] == selected[j]){
                                checkedData.push(res.data[i])
                            }
                        }
                    }
                    checkedData = uniqueObjArray(checkedData, opt.checkedKey);
                }
            }

			//更新选中数量
			function updataButton (n) {
				tableBox.find('.tableSelect_btn_select span').html(n==0?'':'('+n+')')
            }
            
            //数组去重
			function uniqueObjArray(arr, type){
                var newArr = [];
                var tArr = [];
                if(arr.length == 0){
                    return arr;
                }else{
                    if(type){
                        for(var i=0;i<arr.length;i++){
                            if(!tArr[arr[i][type]]){
                                newArr.push(arr[i]);
                                tArr[arr[i][type]] = true;
                            }
                        }
                        return newArr;
                    }else{
                        for(var i=0;i<arr.length;i++){
                            if(!tArr[arr[i]]){
                                newArr.push(arr[i]);
                                tArr[arr[i]] = true;
                            }
                        }
                        return newArr;
                    }
                }
            }

			//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').click();
                                tr['prev']().children('td').click();
                            }
                            break;
                        case "ArrowDown"://下键
                            if (tr.length == 0) {
                                tr = tableElem.find('tr:first').children('td').eq(0).click();
                            } else {
                                tr.children('td').click();
                                tr['next']().children('td').click();
                            }
                            break;
                        case "Enter"://回车
                            tableBox.find('.tableSelect_btn_select').click();
                            break;
                    }
                }
                
            })
            //输入框输入执行
            elem.off('input').on('input', function (e) {
                // 阻止表单提交（如果输入框在表单内）
                e.preventDefault();
                opt.table.where['sWhere'] = opt.sWhere + " and " + opt.searchKey + " like '%" + elem.val() + "%' ";
                tableSelect_table.reload({
                    where: opt.table.where,
                    page: {
                        curr: 1
                    }
                });
                
            })
            // //关键词搜索
            // form.on('submit(tableSelect_btn_search)', function(data){
            //     // console.log(" and "+opt.searchKey +"='" + data.opt.searchKey +"'")
            //     console.log(data);
            //     opt.table.where['sWhere'] = " and "+opt.searchKey +" like '%" + data.field[opt.searchKey] +"%' ";
            //     tableSelect_table.reload({
            //         where: opt.table.where,
            //         page: {
            //         curr: 1
            //         }
            //     });
            //     return false;
            // });

            //双击行选中
            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(checkedData.length > 1){
                checkStatus.data = checkedData;
                }
                selectDone(checkStatus);
            })

            //写值回调和关闭
            function selectDone (checkStatus){
                if(opt.checkedKey){
                    var selected = [];
                    for(var i=0;i<checkStatus.data.length;i++){
                        selected.push(checkStatus.data[i][opt.checkedKey])
                    }
                    elem.attr("ts-selected",selected.join(","));
                }
                opt.done(elem, checkStatus);
                tableBox.remove();
                delete table.cache[tableName];
                checkedData = [];
            }
            
            //点击其他区域关闭
            $(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];
                    checkedData = [];
                }
            });
        })
    }

    /**
    * 隐藏选择器
    */
    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);
})