const $ = require('jquery');
require("../css/quality.less");
require('./../resource/jquery-ui/jquery-ui.min.js');
require('./modal.js');
const {
	api
} = require('./api.js')
const {
	post,
	getCookie,
	getUrlArgObjectNew,
	emptyBox,
	setDatePicker,
	getPickerDate,
	listenScroll
} = require('./utils.js')
const iconCalenBlue = require("./../images/icon_calen_blue.png")
const iconCalenGrey = require("./../images/icon_calen_grey.png")
const arrowLeft = require("./../images/arrow_left.png")
const arrowRight = require("./../images/arrow_right.png")

let size = 15,
	operationName = ""

$(function() {
	listenScroll('.mukuai')
	dateChange()

	$(".abnormalClear").click(function() {
		// window.location.reload()
		operationName = ""
		setDatePicker($("#datepicker"), $("#datepicker2"), 1)
		$(".operationName ").val("")
		getTabData(1)
	})
	setDatePicker($("#datepicker"), $("#datepicker2"), 1)
	getTabData(1) //条目缺陷
})
$('.operationName').on("input", function(e) {
	let val = $(this).val().trim()
	operationName = val
})

$(".menu .page", parent.document).removeClass("active")
$(parent.document).find(".menu .page[code=YH-RZGL-CZRZ]").addClass("active")
//所有数据切换日期筛选
function dateChange() {
	$(".monthYear .mon").click(function() {
		$(this).css({
			backgroundColor: '#00A1FF',
			color: '#fff'
		}).siblings().css({
			color: '#00A1FF',
			backgroundColor: '#fff'
		})
		setDatePicker($("#datepicker"), $("#datepicker2"), 1)
		getTabData(1)
	})
	$(".monthYear .year").click(function() {
		$(this).css({
			backgroundColor: '#00A1FF',
			color: '#fff'
		}).siblings().css({
			color: '#00A1FF',
			backgroundColor: '#fff'
		})
		setDatePicker($("#datepicker"), $("#datepicker2"), 2)
		getTabData(1)
	})
}

//获取表格数据
function getTabData(activePage) {
	const dateStatrt = getPickerDate($("#datepicker"), 1)
	const dateEnd = getPickerDate($("#datepicker2"), 2)
	const start = new Date(dateStatrt).getTime()
	const end = new Date(dateEnd).getTime()
	if (start > end) {
		$.alerModal({
			"message": '开始时间不能大于结束时间~',
			type: "tip",
			time: '1000',
			isFather: true,
			fatherWrapper: $("#mainBox", parent.document)
		});
		return
	}
	const param = {
		operationName: operationName,
		"startDate": dateStatrt,
		"endDate": dateEnd,
		size: size,
		current: activePage,
	}
	$('.pagination').html("")
	$('.tbody').html(emptyBox('努力加载中...', '', 1))
	post(api.operationLogPage, param).then(res => {
		if (res.data.code == '0') {
			const data = res.data.data.records
			const totalPage = res.data.data.pages
			const totalNum = res.data.data.total
			renderTab(data, activePage)
			if (totalPage > 1) {
				renderPagination(totalPage, Number(activePage), totalNum)
			} else {
				$('.pagination').html("")
			}

		} else {
			$('.tbody').html(emptyBox())
		}
	}).catch((e) => {

	})
}

$(".filter").on("click", function(e) {
	getTabData(1)
})


function renderTab(data, activePage) {
	let str = ``;
	for (let i = 0; i < data.length; i++) {
		const item = data[i]
		if (item.operationRecord.length > 50) {
			str += `
				<tr data-id=${item.id} data-index=${i}>
					<td  class="textCenter">${(activePage - 1) * 15 + i + 1}</td>
					<td data-model="${item.operationName}">${item.operationName}</td>
					<td class="operationDate">${item.operationDate}</td>
					<td class="operationIp">${item.operationIp}</td>
					<td class="operationRecord1" title="${item.operationRecord}">${item.operationRecord.slice(0,50)+"..."}</td>
				</tr>
			`
		} else {
			str += `
				<tr data-id=${item.id} data-index=${i}>
					<td  class="textCenter">${(activePage - 1) * 15 + i + 1}</td>
					<td data-model="${item.operationName}">${item.operationName}</td>
					<td class="operationDate">${item.operationDate}</td>
					<td class="operationIp">${item.operationIp}</td>
					<td class="operationRecord">${item.operationRecord}</td>
				</tr>
			`
		}
	}
	$('.tbody').html(str ? str : emptyBox())
}

//分页渲染
function renderPagination(totalPage, activePage, totalNum) {
	let str =
		`<span class="totalSum">共${totalPage}页/${totalNum}条数据</span><span class="prePage"><img class="arrowPage" src=${arrowLeft} /></span>`
	if (totalPage <= 6) {
		for (let i = 1; i <= totalPage; i++) {
			str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
		}
	} else {
		if (activePage <= 3) { //选中页数小于4
			for (let i = 1; i <= 4; i++) {
				str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
			}
			str += `<span class="more" >...</span>`
			str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`

		} else if (activePage > totalPage - 3) {
			str += `<span class="pageNum page1" data-page=1>1</span>`
			str += `<span class="more" >...</span>`
			str += `<span class="pageNum ${'page'+(totalPage-3)}" data-page=${totalPage -3}>${totalPage -3}</span>`
			str += `<span class="pageNum ${'page'+(totalPage-2)}" data-page=${totalPage -2}>${totalPage -2}</span>`
			str += `<span class="pageNum ${'page'+(totalPage-1)}" data-page=${totalPage -1}>${totalPage -1}</span>`
			str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
		} else {
			str += `<span class="pageNum page1" data-page=1>1</span>`
			str += `<span class="more" >...</span>`
			str += `<span class="pageNum ${'page'+(activePage -1)}" data-page=${activePage -1}>${activePage -1}</span>`
			str += `<span class="pageNum ${'page'+activePage}" data-page=${activePage}>${activePage}</span>`
			str += `<span class="pageNum ${'page'+(activePage +1)}" data-page=${activePage +1}>${activePage +1}</span>`
			str += `<span class="more" >...</span>`
			str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
		}

	}
	str += `<span class="nextPage"><img class="arrowPage" src=${arrowRight} /></span>`
	$('.pagination').html(str)
	$('.page' + activePage).addClass('activePage')
	$(".pageNum").on("click", function(e) {
		const activePageNow = Number($(this).attr('data-page'))
		getTabData(activePageNow)
	})
	$(".prePage").on("click", function(e) {
		let activePageNow = Number($(".activePage").attr('data-page'))
		if (activePageNow > 1) {
			activePageNow--
			getTabData(activePageNow)
		}
	})
	$(".nextPage").on("click", function(e) {
		let activePageNow = Number($(".activePage").attr('data-page'))
		if (activePageNow < totalPage) {
			activePageNow++
			getTabData(activePageNow)
		}
	})

}

$(function() {
	$('.datapickerBox').append(`<img class="iconCalen" src=${iconCalenGrey} />`)
	$('.iconCalen').on("mouseenter", function(e) {
		$(this).attr("src", iconCalenBlue)
	})
	$('.iconCalen').on("mouseleave", function(e) {
		$(this).attr("src", iconCalenGrey)
	})
	$('.iconCalen').on("click", function(e) {
		$(this).parent().find("input").focus()
	})
});