//总页数
var totalPage;
// 元素总数量
var totalElement;
// 当前页的元素数量
var numberOfCurrentPage;
// 当前页码
var page = 1;
// 页大小
var size = 20;
// 是否为第一页
var first;
// 是否为最后一页
var last;

// 用于显示正在加载的提示
var spinner;
var spinnerContainer = document.getElementById("listContainer");

listenDetails(page, size);

// 上页
$("#prev").bind("click", prevPage);

// 下页
$("#next").bind("click", nextPage);

// 手动输入页码
$("#pageIndex").keypress(function(event) {
	// 按Enter键
	if (event.keyCode == 13) {
		var value = $("#pageIndex").val();
		// 以非0开头的整数
		var regExp = /^([1-9]+\d*)$/;
		if (regExp.test(value) && value >= 1 && value <= totalPage) {
			if (value == page) {
				return;
			}
			page = value;
			listenDetails(page, size);
		} else {
			$("#pageIndex").val(page);
		}
	}
});

/**
 * 请求数据
 */
function listenDetails(page, size) {
	spinner = showLoading(spinner, spinnerContainer);
	var listenDetailsUrl = "index/listen/details?page=" + page + "&size="
			+ size;
	$.ajax({
		type : "get",
		url : listenDetailsUrl,
		success : function(data) {
			$(".listItem").remove();
			if (!data.totalElement) {
				totalPage = 0;
				totalElement = 0;
				page = 0;
				first = true;
				last = true;
			} else {
				totalPage = data.totalPage;
				totalElement = data.totalElement;
				page = data.page;
				size = data.size;
				first = data.first;
				last = data.last;
				var content = data.content;
				numberOfCurrentPage = content.length;
				for (var i = 0; i < numberOfCurrentPage; i++) {
					addList(i, content[i].tableName, content[i].dataId,
							content[i].methodType, content[i].data, content[i].createTime,
							content[i].id)
				}
			}
			$("#totalElement").html(totalElement);
			$("#totalPage").html(totalPage);
			$("#pageIndex").val(page);
			spinner = hideLoading(spinner);
		},
		error : function(XMLHttpRequest) {
			showErrorMessageByXMLHttpRequest(XMLHttpRequest);
			spinner = hideLoading(spinner);
		}
	});
}

/**
 * 列表增加一行
 * 
 * @param i
 *            用于计算序号
 * @param tableName
 *            表名
 * @param dataId
 *            id
 * @param methodType
 *            更改类型，INSERT、UPDATE、DELETE
 * @param data
 *            数据
 * @param createTime
 *            更改时间
 * @param id
 *            消息的id
 */
function addList(i, tableName, dataId, methodType, data, createTime, id) {
	var listItemDiv = $("<div class='listItem'></div>");
	var noDiv = $("<div class='minWidthColumn floatLeft overflowHidden'><span>"
			+ ((page - 1) * size + i + 1) + "</span></div>");
	var tableNameDiv = $("<div class='mediumWidthColumn floatLeft overflowHidden'><span>"
			+ tableName + "</span></div>");
	var idsDiv = $("<div class='maxWidthColumn floatLeft overflowHidden'><span>"
			+ dataId + "</span></div>");
	var methodDiv = $("<div class='minWidthColumn floatLeft overflowHidden'><span>"
			+ methodType + "</span></div>");
	var modifyTimeDiv = $("<div class='mediumWidthColumn floatLeft overflowHidden'><span>"
			+ createTime + "</span></div>");
	var updateButton = $("<button id='updateButton' title='插队更新索引'><i class='fa fa-refresh fa-lg' aria-hidden='true'></i></button>");
	var operationDiv = $("<div class='minWidthColumn floatLeft overflowHidden'></div>");
	operationDiv.append(updateButton);

	if (i % 2 == 0) {
		listItemDiv.css("background-color", "#e0e0e0");
		updateButton.css("background-color", "#e0e0e0");
	}

	listItemDiv.append(noDiv);
	listItemDiv.append(tableNameDiv);
	listItemDiv.append(idsDiv);
	listItemDiv.append(methodDiv);
	listItemDiv.append(modifyTimeDiv);
	listItemDiv.append(operationDiv);
	$('#listContentContainer').append(listItemDiv);

	updateButton.click(function() {
		updateIndex(tableName, dataId, methodType, data, id, listItemDiv);
	});
}

/**
 * 强制更新索引
 * 
 * @param tableName
 *            表名
 * @param dataId
 *            id
 * @param methodType
 *            需对索引做何种更改
 * @param data
 *            数据
 * @param id
 *            消息的id
 * @param listItemDiv
 *            所在行
 */
function updateIndex(tableName, dataId, methodType, data, id, listItemDiv) {
	spinner = showLoading(spinner, spinnerContainer);
	var updateIndexUrl = "index/maintain?tableName=" + tableName + "&dataId="
			+ dataId + "&methodType=" + methodType;
    if(data){
        updateIndexUrl += "&data=" + data;
    }
	$.ajax({
		type : "get",
		url : updateIndexUrl,
		success : function(data) {
			// 更新索引后，出队消息
			dequeueMessage(id, listItemDiv);
		},
		error : function(XMLHttpRequest) {
			showErrorMessageByXMLHttpRequest(XMLHttpRequest);
			spinner = hideLoading(spinner);
		}
	});
}

/**
 * 出队消息
 * 
 * @param id
 *            消息的id
 * @param listItemDiv
 *            所在行
 */
function dequeueMessage(id, listItemDiv) {
	var dequeueMessageUrl = "index/dequeue?id=" + id;
	$.ajax({
		type : "get",
		url : dequeueMessageUrl,
		success : function(data) {
			listItemDiv.remove();
			totalElement--;
			numberOfCurrentPage--;
			$("#totalElement").html(totalElement);
			if (!numberOfCurrentPage) {
				if (last) {
					page--;
				}
				listenDetails(page, size);
			}
			spinner = hideLoading(spinner);
		},
		error : function(XMLHttpRequest) {
			showErrorMessageByXMLHttpRequest(XMLHttpRequest);
			spinner = hideLoading(spinner);
		}
	});
}

/**
 * 预览前一页
 */
function prevPage() {
	if (first) {
		return;
	}
	page--;
	listenDetails(page, size);
}

/**
 * 预览后一页
 */
function nextPage() {
	if (last) {
		return;
	}
	page++;
	listenDetails(page, size);
}

/**
 * 显示请求返回的错误信息
 *
 * @param XMLHttpRequest
 */
function showErrorMessageByXMLHttpRequest(XMLHttpRequest) {
	// 处理后台传输的自定义的换行标志
	var result = JSON.parse(XMLHttpRequest.responseText);
	var message = result.message;
	alert(spinnerContainer, message);
}