const $ = require('jquery');
require("../css/logManagement.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, loginName = "", loginIp = ""

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

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

$(".menu .page", parent.document).removeClass("active")
$(parent.document).find(".menu .page[code=YH-RZGL-DLRZ]").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 = {
        loginName: loginName.replace(/%/g,"/%").replace(/_/g,"/_"),
		loginIp: loginIp.replace(/%/g,"/%").replace(/_/g,"/_"),
        "startDate": dateStatrt,
        "endDate": dateEnd,
		size: size,
		current:activePage,
    }
    $('.pagination').html("")
    $('.tbody').html(emptyBox('努力加载中...', '', 1))
    post(api.loginLogPage, 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]
        str += `
            <tr data-id=${item.id} data-index=${i}>
                <td  class="textCenter">${(activePage - 1) * 15 + i + 1}</td>
                <td data-model="${item.loginName}">${item.loginName}</td>
                <td class="loginDate">${item.loginDate}</td>
				<td class="loginIp">${item.loginIp||"-"}</td>
				<td class="loginAddress">${item.loginAddress}</td>
				<td class="loginBrowser">${item.loginBrowser}</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()
    })
});