layui.use(['layer'], function () {
    let $ = layui.$;

    $.fn.pager = function (option, cb = null) {
        option = $.extend({
            total: 100,
            currentPage: 1,
            pageListLength: 9,
            pageLimit: 20,
        }, option)

        option.currentPage = Number(option.currentPage)
        option.total = Number(option.total)
        option.pageListLength = Number(option.pageListLength)
        option.pageLimit = Number(option.pageLimit)


        let maxPage = 0;
        if (option.currentPage === 1) {
            maxPage = Math.ceil(option.total / option.pageLimit);
        } else {
            maxPage = Math.ceil((option.total + 4) / option.pageLimit);
        }

        let pageList = getPageList()
        let _this = $(this)

        let domId = _this.attr("id")
        if (!domId) {
            domId = Math.random().toString(36).slice(-8)
            _this.attr("id", domId)
        }
        _this.html(renderHtml(pageList))

        _this.find('.page-num').one('click', function () {
            let page = $(this).attr('data-num') * 1
            typeof cb === "function" && cb(page)
        });

        _this.find('.prev-turn-page').one('click', function () {
            let page = option.currentPage - option.pageListLength
            if (page < 1) {
                page = 1;
            }
            typeof cb === "function" && cb(page)
        })


        _this.find('.next-turn-page').one('click', function () {
            let page = option.currentPage + option.pageListLength
            if (page > maxPage) {
                page = maxPage
            }
            typeof cb === "function" && cb(page)
        })

        _this.find('.prev-page').one('click', function () {
            typeof cb === "function" && cb(option.currentPage - 1)
        })

        _this.find('.next-page').one('click', function () {
            typeof cb === "function" && cb(option.currentPage + 1)
        })


        function getPageList() {
            let min, max;

            let middle = Math.floor(option.pageListLength / 2);

            min = option.currentPage - middle;
            max = option.currentPage + middle;

            if (min < 1) {
                max = max + Math.abs(min) + 1
                min = 1;
            }

            if (max > maxPage) {
                min = maxPage - middle * 2
                max = maxPage
            }

            if (maxPage < option.pageListLength) {
                min = 1
                max = maxPage
            }

            let pageList = [];
            for (let i = min; i <= max; i++) {
                pageList.push(i)
            }

            return pageList
        }

        function renderHtml(pageList) {

            if (pageList.length === 0) {
                return "";
            }

            let pageListHtml = `<ul class="page-num-box">`
            pageList.forEach(v => {
                pageListHtml += `
                    <li class="page-num ${v === option.currentPage ? "active" : ""}" data-num="${v}">${v}</li>
                `
            })
            pageListHtml += "</ul>"

            return `
                <style>
                    #${domId} .page-list{
                        display: flex;
                        justify-content: center;
                    }
                    #${domId} li {
                        cursor: pointer;
                    }
                    #${domId} .icon-fanye_0, #${domId} .icon-fanye_1 {
                        font-size: 12px;
                    }
                    #${domId} .icon-shangyiyehoutuifanhui, #${domId} .icon-xiayiyeqianjinchakangengduo {
                        font-size: 18px;
                    }
                    #${domId} .page-num-box {
                        padding: 0 40px 0 42px;
                        box-sizing: border-box;
                    }       
                    #${domId} .page-num-box li {
                        font-size: 18px;
                        font-weight: 400;
                        color: #282828;
                        text-decoration: none;
                        display: block;
                        width: 26px;
                        height: 26px;
                        text-align: center;
                        float: left;
                        border: 1px solid rgba(0,0,0,0);
                        line-height: 25px;
                        margin-right: 2px;
                    }
                    #${domId} li.active {
                        color: #EB6928;
                        border: 1px solid #EB6928;
                    }
                    #${domId} .icon-fanye_0, #${domId} .icon-fanye_1 {
                        font-size: 12px;
                    }
                
                    #${domId} .prev-page, #${domId} .next-page {
                        width: 8px;
                        display: flex;
                        justify-content: center;
                    }
                
                    #${domId} .prev-page {
                        margin-left: 18px;
                    }
                
                    #${domId} .next-page {
                        margin-right: 18px;
                    }
                
                    #${domId} .icon-shangyiyehoutuifanhui, #${domId} .icon-xiayiyeqianjinchakangengduo {
                        font-size: 18px;
                    }
                </style>
                <ul class="page-list">
                    <li class="prev-turn-page"><i class="iconfont icon-fanye_0"></i></li>
                    <li class="prev-page"><i class="iconfont icon-shangyiyehoutuifanhui"></i></li>
                    <li>
                        ${pageListHtml}
                    </li>
                    <li class="next-page"><i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></li>
                    <li class="next-turn-page"><i class="iconfont icon-fanye_1"></i></li>
                </ul>
            `
        }


    }
})