/**
 * 显示一个表格控件 
 * 依赖于bootstrap的table 
 * 作者：黄平 
 * 日期：2016-04-13
 */
(function($) {
	$.fn.table = function(options, param) {
		var self = this;
		if (typeof (options) == "string") {
			var method = $.fn.table.methods[options];
			if (method){
				return method.call(this, param);
			}
		}
		return this.each(function() {
			var opt = $.extend({}, $.fn.table.defaults, $.fn.table.events, options);
			if (!opt.columns || opt.columns.length == 0) {
				return;
			}
			self.data("table", opt);
			
			_createtTable.call(self);
		});
	};
	/**
	 * 生成（适用于bootstrap）
	 */
	function _createtTable() {
		var jq = this;
		var opt = $(jq).data("table");
		//清空table
		jq.empty();
		jq.addClass("panel");
		//设置panel的样式
		if (opt.panelClass) {
			jq.addClass(opt.panelClass);
		}
		//设置panel标题
		if (opt.title) {
			$("<div>").html(opt.title).addClass("widget-content").appendTo(jq);
		}
		var body, table, thead, headTR, th;
		body = $("<div>").addClass("panel-body").appendTo(jq).attr("tableRole", "body");
		table = $("<table>").addClass("table").appendTo(body).attr("tableRole", "table");
		if (opt.columnAutoWidth !== true) {
			table.css({
				"table-layout" : "fixed",
				"word-wrap" : "break-word",
				"word-break" : "break-all",
				//"white-space" : "nowrap",
				"text-overflow" : "ellipsis"
			});
		}
		//设置边框
		if (opt.border === true) {
			table.addClass("table-bordered");
		}
		//设置悬停
		if (opt.hover === true) {
			table.addClass("table-hover");
		}
		//设置斑马纹
		if (opt.striped === true) {
			table.addClass("table-striped");
		}
		thead = $("<thead>").appendTo(table);
		headTR = $("<tr>").appendTo(thead);
		//设置table的头
		$(opt.columns).each(function(index, item) {
			th = $("<th>").css({
				"text-align" : item.align ? item.align : "center",
				width : item.width ? item.width : "auto"
			}).appendTo(headTR);
			if (item.checkbox === true) {
				$("<input type=\"checkbox\" id=\"bootstrap-table-checkAll\" />").click(function() {
					//点击全选
					var checks = jq.find("input[name='bootstrap-table-checkbox']");
					checks.prop("checked", this.checked);
				}).appendTo(th);
			} else {
				th.html(item.title);
			}
		});
		
		if (opt && opt.url) {
			_loadRemote(jq);
			/*if (opt.onBeforeLoad) {
				if (opt.onBeforeLoad() === false) {
					//隐藏正在加载
					_hideLoading(self);
					return;
				}
			}
			var lastQueryParam = $.extend({}, opt.queryParams);
			self.data("lastQueryParam", lastQueryParam);
			$.ajax($.extend({}, {
				url : opt.url,
				data : $.extend({}, lastQueryParam, {
					pageSize : (opt.pagination === true ? opt.pageSize : 0),
					currentPage : (opt.pagination === true ? opt.currentPage : 0)
				}),
				type : opt.method,
				dataType : opt.dataType,
				success : function(json) {
					if (!json) {
						//隐藏正在加载
						_hideLoading(self);
						return;
					}
					opt.data = json;
					if (opt.loadFilter) {
						opt.data = opt.loadFilter(json);
					}
					//生成tbody
					_createTbody(self);
					
					//处理onLoadSuccess事件
					if (opt.onLoadSuccess) {
						opt.onLoadSuccess.call(self, opt.data);
					}
					
					//分页
					_createPage(self);
					
					//隐藏正在加载
					_hideLoading(jq);
				},
				dataType : "json"
			}));*/
		} else {
			//显示正在加载
			_showLoading(jq);
			//生成tbody
			_createTbody(jq);
			
			//处理onLoadSuccess事件
			if (opt.onLoadSuccess) {
				opt.onLoadSuccess.call(jq, opt.data);
			}
			
			//分页
			_createPage(jq);
			
			//隐藏正在加载
			_hideLoading(jq);
		}
	}
	
	/**
	 * 从远端加载数据
	 */
	function _loadRemote(jq, param) {
		//显示正在加载
		_showLoading(jq);
		var opt = $(jq).data("table");
		
		_removeTbody(jq);
		if (!opt || !opt.url) {
			//隐藏正在加载
			_hideLoading(jq);
			return;
		}
		if (opt.onBeforeLoad) {
			if (opt.onBeforeLoad() === false) {
				//隐藏正在加载
				_hideLoading(jq);
				return;
			}
		}
		var lastQueryParam = $.extend({}, opt.queryParams, jq.data("lastQueryParam"), param);
		jq.data("lastQueryParam", lastQueryParam);
		$.ajax($.extend({}, {
			url : opt.url,
			data : $.extend({}, lastQueryParam, {
				pageSize : (opt.pagination === true ? opt.pageSize : 0),
				currentPage : (opt.pagination === true ? opt.currentPage : 0)
			}),
			type : opt.method,
			dataType : opt.dataType,
			success : function(json) {
				if (!json) {
					//隐藏正在加载
					_hideLoading(jq);
					return;
				}
				opt.data = json;
				if (opt.loadFilter) {
					opt.data = opt.loadFilter(json);
				}
				//生成tbody
				_createTbody(jq);
				
				//处理onLoadSuccess事件
				if (opt.onLoadSuccess) {
					opt.onLoadSuccess.call(jq, opt.data);
				}
				
				//分页
				_createPage(jq);
				//隐藏正在加载
				_hideLoading(jq);
			},
			error : function() {
				//隐藏正在加载
				_hideLoading(jq);
			},
			dataType : "json"
		}));
	}
	
	
	/**
	 * 取去总条数和行记录
	 */
	function _getTotalAndData(jq) {
		var opt = jq.data("table");
		var d = opt.data;
		var total = 0;
		if ($.type(d) === "object") {
			total = d.total;
			d = d.rows;
		} else {
			total = d ? d.length : 0;
		}
		return {
			rows : d,
			total : total
		};
	}
	
	/**
	 * 显示正在加载的效果
	 */
	function _showLoading(jq) {
		var div = $("<div>").attr("tableSelector", jq.selector).addClass("modal-backdrop fade in").appendTo($("body")).hide();
		var tableOffset = jq.offset();
		var tableWidth = jq.outerWidth(true), tableHeight = jq.outerHeight(true);
		div.append($("<div>").addClass("table-loading").css({
			left : (tableWidth - 124) / 2,
			top : (tableHeight - 124) / 2
		}));
		div.css({
			width : tableWidth,
			height : tableHeight,
			left : tableOffset.left,
			top : tableOffset.top
		});
		div.show();
	}
	
	/**
	 * 隐藏正在加载效果
	 */
	function _hideLoading(jq) {
		$("body").find("div[tableSelector='"+ jq.selector +"']").remove();
	}
	
	/**
	 * 获取body部分
	 */
	function _getBody(jq) {
		return jq.find("div.panel-body[tableRole='body']");
	}
	
	/**
	 * 获取table
	 */
	function _getTable(jq) {
		return jq.find("table.table[tableRole='table']");
	}
	
	/**
	 * 获取tbody
	 */
	function _getTbody(jq) {
		return jq.find("table.table tbody");
	}
	
	/**
	 * 获取表头
	 */
	function _getThead(jq) {
		return jq.find("table.table thead");
	}
	
	/**
	 * 获取分页对象
	 */
	function _getPagination(jq) {
		return jq.find("div[role='pagination']");
	}
	
	/**
	 * 销毁表格tbody
	 */
	function _removeTbody(jq) {
		_getTbody(jq).remove();
	}
	
	/**
	 * 生成分页部分
	 */
	function _createPage(jq) {
		var opt = jq.data("table");
		var totalAndRow = _getTotalAndData(jq);
		if (opt.pagination === true) {
			_getPagination(jq).remove();
			var pageDiv = $("<div>").appendTo(_getBody(jq));
			pageDiv.pagination({
				totalCount : totalAndRow.total,
				pageSize : opt.pageSize,
				onSelectPage : function(currentPage, pageSize) {
					//显示正在加载
					_showLoading(jq);
					var lastQueryParam = jq.data("lastQueryParam");
					$.ajax($.extend({}, {
						url : opt.url,
						data : $.extend({}, lastQueryParam, {
							currentPage : currentPage,
							pageSize : pageSize
						}),
						type : opt.method,
						dataType : opt.dataType,
						success : function(json) {
							if (!json) {
								return;
							}
							opt.data = json;
							if (opt.loadFilter) {
								opt.data = opt.loadFilter(json);
							}
							
							jq.table("loadLoaclData", opt.data);
							//隐藏正在加载
							_hideLoading(jq);
						},
						error : function() {
							//隐藏正在加载
							_hideLoading(jq);
						},
						dataType : "json"
					}));
				}
			});
		}
	}
	
	/**
	 * 生成body部分
	 * @param table
	 * @param opt
	 */
	function _createTbody(jq) {
		var opt = jq.data("table");
		if (!opt.data) {
			return;
		}
		var totalAndRow = _getTotalAndData(jq);
		if (!totalAndRow.rows || totalAndRow.rows.length == 0) {
			return;
		}
		var tbody = $("<tbody>").appendTo(_getTable(jq));
		var bodyTR, bodyTD;
		//设置table的主体
		$(totalAndRow.rows).each(function(rowIndex, rowData) {
			if (opt.formatterRow) {
				var formatterRowResult = opt.formatterRow(rowData, rowIndex);
				if (formatterRowResult) {
					tbody.append(formatterRowResult);
					return true;
				}
			}
			bodyTR = $("<tr>").data("rowData", rowData).appendTo(tbody);
			//行样式
			if (opt.rowStyler) {
				var rowStyler = opt.rowStyler(rowData, rowIndex);
				if ($.type(rowStyler) === "object") {
					bodyTR.css(rowStyler);
				} else if ($.type(rowStyler) === "string") {
					bodyTR.addClass(rowStyler);
				}
			}
			$(opt.columns).each(function(columnIndex, columnData) {
				bodyTD = $("<td>").css({
					"text-align" : columnData.align ? columnData.align : "center"
				}).appendTo(bodyTR);
				//列样式
				if (columnData.styler) {
					var styler = columnData.styler(rowData[columnData.field], rowData, rowIndex);
					if ($.type(styler) === "object") {
						bodyTD.css(styler);
					} else if ($.type(styler) === "string") {
						bodyTD.addClass(styler);
					}
				}
				if (columnData.checkbox === true) {
					$("<input type=\"checkbox\" name=\"bootstrap-table-checkbox\" />").click(function() {
						//点击选择，当不是全部都选中时候，把上面的全选框去掉选中状态
						var thead = _getThead(jq);
						if (!this.checked) {
							//当有一个没有选中时，去掉全选框
							thead.find("#bootstrap-table-checkAll").prop("checked", false);
						} else {
							var chedkeds = tbody.find("input:checked[name='bootstrap-table-checkbox']");
							thead.find("#bootstrap-table-checkAll").prop("checked", chedkeds.length == totalAndRow.rows.length);
						}
					}).appendTo(bodyTD);
				} else {
					if (columnData.formatter) {
						var formatter = columnData.formatter(rowData[columnData.field], rowData, rowIndex);
						if ($.type(formatter) === "object") {
							bodyTD.append(formatter);
						} else {
							bodyTD.html(formatter);
						}
					} else {
						bodyTD.html(rowData[columnData.field]);
					}
				}
			});
		});
	}
	
	$.fn.table.methods = {
		/**
		 * 获取选中的行数据
		 */
		getChecked : function() {
			var jq = this;
			var arr = [];
			var checked = jq.find("input:checked[name='bootstrap-table-checkbox']");
			if (!checked || checked.length == 0) {
				return arr;
			}
			$(checked).each(function(index, item) {
				arr.push($(item).parent().parent().data("rowData"));
			});
			return arr;
		},
		/**
		 * 加载本地数据
		 * @param data
		 */
		loadLoaclData : function(data) {
			var jq = this;
			var opt = jq.data("table");
			
			_removeTbody(jq);
			opt.data = data;
			_createTbody(jq);
			
			//处理onLoadSuccess事件
			if (opt.onLoadSuccess) {
				opt.onLoadSuccess.call(jq, data);
			}
		},
		/**
		 * 从远程再去请求数据
		 * @param param
		 */
		load : function(param) {
			var jq = this;
			_loadRemote(jq, param);
			/*var jq = this;
			var opt = jq.data("table");
			var lastQueryParam = jq.data("lastQueryParam");
			lastQueryParam = $.extend({}, lastQueryParam, param);
			jq.data("lastQueryParam", lastQueryParam);
			$.ajax($.extend({}, {
				url : opt.url,
				data : $.extend({}, lastQueryParam, {
					pageSize : (opt.pagination === true ? opt.pageSize : 0),
					currentPage : (opt.pagination === true ? opt.currentPage : 0)
				}),
				type : opt.method,
				dataType : opt.dataType,
				success : function(json) {
					if (!json) {
						return;
					}
					opt.data = json;
					if (opt.loadFilter) {
						opt.data = opt.loadFilter(json);
					}
					//加载数据
					jq.table("loadLoaclData", opt.data);
					
					//生产分页
					_createPage(jq);
				},
				dataType : "json"
			}));*/
			
		}
	};
	$.fn.table.events = {
		/**
		 * 加载完成执行
		 * @param data
		 */
		onLoadSuccess : function(data) {},
		
		/**
		 * 加载之前执行，如果返回false，则不去远端调用
		 * 
		 */
		onBeforeLoad : function() {}
	};
	$.fn.table.defaults = $.extend({}, $.fn.table.events, {
		columnAutoWidth : false,//列是否自动宽度
		url : "",				//远端调用的url
		queryParams : {},		//调用url传递的参数
		method : "POST",		//提交方式
		dataType : "json",		//返回的类型
		pagination : false,		//是否分页
		pageSize : 10,			//分页时，每页条数
		data : null,			//如果不用url，则可以直接传入data
		striped : false,		//是否显示条纹
		panelClass : "panel-default",	//标题面板 的样式 （primary,success,info,warning,danger）
		title : "",						//表格标题
		hover : true,					//是否悬停显示
		border : true,					//是否显示边框
		columns : [],					//表格列字段
		loadFilter : function(data) {	//对返回值进行特殊处理
			return data;
		},
		/**
		 * 对行进行格式化
		 */
		formatterRow : function(rowData, rowIndex) {
			
		},
		
		/**
		 * 对行样式进行处理
		 * 如果返回值是对象，则应用在css属性里面
		 * 如果返回值是string，则应用在class里面
		 * @param rowData
		 * @param rowIndex
		 */
		rowStyler : function(rowData, rowIndex) {
			return null;
		}
	});
	/**
	 * 其中，columns是一数组，每个数组包含字段
	 * width=null		列宽
	 * title=""			列标题
	 * field=""			列属性
	 * align="center"	对齐
	 * checkbox=false,	是否显示复选框
	 * formatter : function(value, rowData, rowIndex) {	//对列进行格式化
			如果返回值是jquery对象，则直接把该对象放在该列
			如果是返回值是string，则直接放在html()里面
	   }
	 * styler : function(value, rowData, rowIndex) {		//对列的样式进行格式化
			如果返回值是对象，则应用在css属性里面
			如果返回值是string，则应用在class里面
	   },
	 */

})(jQuery);