(function ($) {
    function SlickGridPager(dataView, grid, $container) {
        // $container.height(50);
        var $status;
        var $currentPage;
        var $allPage;

        function init() {
            dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
                updatePager(pagingInfo);

            });
            constructPagerUI();
            updatePager(dataView.getPagingInfo());
        }

        function getNavState() {
            var cannotLeaveEditMode = !grid.getEditorLock().commitCurrentEdit();
            var pagingInfo = dataView.getPagingInfo();
            var lastPage = pagingInfo.totalPages - 1;

            return {
                canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
                canGotoLast: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
                canGotoPrev: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
                canGotoNext: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
                canGotoAuto: !cannotLeaveEditMode && pagingInfo.pageSize != 0,
                pagingInfo: pagingInfo
            }
        }

        function setPageSize(n) {
            var pagingInfo = dataView.getPagingInfo();
            if (n == 0) {
                n = pagingInfo.totalRows;
            }
            dataView.setRefreshHints({
                isFilterUnchanged: true
            });
            dataView.setPagingOptions({ pageSize: n });
        }

        function gotoFirst() {
            if (getNavState().canGotoFirst) {
                dataView.setPagingOptions({ pageNum: 0 });
            }
        }

        function gotoLast() {
            var state = getNavState();
            if (state.canGotoLast) {
                dataView.setPagingOptions({ pageNum: state.pagingInfo.totalPages - 1 });
            }
        }


        function gotoPrev() {
            var state = getNavState();
            if (state.canGotoPrev) {
                dataView.setPagingOptions({ pageNum: state.pagingInfo.pageNum - 1 });
            }
        }

        function gotoNext() {
            var state = getNavState();
            if (state.canGotoNext) {
                dataView.setPagingOptions({ pageNum: state.pagingInfo.pageNum + 1 });
            }
        }

        function goto(to) {
            dataView.setPagingOptions({ pageNum: to });
        }

        function gotoAuto() {
            var state = getNavState();
            if (state.canGotoAuto) {
                var pagenum = $container.find('.slick-pager-pagination').val() - 1;
                if (pagenum >= 0 && pagenum < state.pagingInfo.totalPages) {
                    dataView.setPagingOptions({ pageNum: pagenum });
                }
            }
        }

        function constructPagerUI() {
            $container.empty();

            const html = `<div  class="el-pagination is-background"><span class="el-pagination__total">共 0 条</span>
            <button type="button" disabled="disabled" class="btn-prev"><i class="el-icon el-icon-arrow-left"></i></button>
            <ul class="el-pager">
            <li class="number active">1</li>
            </ul>
            <button type="button" disabled="disabled" class="btn-next"><i class="el-icon el-icon-arrow-right"></i></button></div>`

            $container.append(html);

            $container.find('.btn-prev').on('click', gotoPrev);
            $container.find('.btn-next').on('click', gotoNext);

        }


        function updatePager(pagingInfo) {
            var state = getNavState();

            const $prev = $container.find('.btn-prev');
            if (state.canGotoPrev) {
                $prev.removeAttr('disabled');
            } else {
                $prev.attr('disabled', 'disabled');
            }

            const $next = $container.find('.btn-next');
            if (state.canGotoNext) {
                $next.removeAttr('disabled');
            } else {
                $next.attr('disabled', 'disabled');
            }

            const $pager = $container.find('ul.el-pager');
            $pager.empty();
            const pages = [];            
            if (pagingInfo.totalPages > 7) {
                if (pagingInfo.pageNum < 4) {
                    for (let i = 0; i < 6; i++) {
                        pages.push(i)
                    }
                    pages.push('next');
                } else {
                    pages.push(0);
                    pages.push('prev');
                    if ((pagingInfo.totalPages - pagingInfo.pageNum) < 4) {
                        for (let i = pagingInfo.totalPages - 7; i < pagingInfo.totalPages - 1; i++) {
                            pages.push(i);
                        }
                    } else {
                        for (let i = pagingInfo.pageNum - 2; i <= pagingInfo.pageNum + 2; i++) {
                            pages.push(i);
                        }
                        pages.push('next');                        
                    }
                }
                pages.push(pagingInfo.totalPages - 1);
            } else {
                for(let i = 0; i < pagingInfo.totalPages; i++) {
                    pages.push(i);
                }
            }

            for (let p of pages) {
                if (p  === 'next') {
                    $pager.append(`<li class="el-icon more btn-quicknext el-icon-more"></li>`);
                    continue;
                }

                if (p  === 'prev') {
                    $pager.append(`<li class="el-icon more btn-quickprev el-icon-more"></li>`);
                    continue;
                }

                $pager.append(`<li class="number ${p === pagingInfo.pageNum ? 'active' : '' }">${p + 1}</li>`)
            }            
      
            $container.find('ul.el-pager li.number').off('click').on('click', function() {
                goto(Number($(this).text()) - 1);
            })

            $container.find('ul.el-pager li.btn-quickprev').off('click').on('click', function() {
                goto(pagingInfo.pageNum - 5);
            }).hover(function() {
                $(this).removeClass('el-icon-more').addClass('el-icon-d-arrow-left');
            }, function() {
                $(this).addClass('el-icon-more').removeClass('el-icon-d-arrow-left');
            })

            $container.find('ul.el-pager li.btn-quicknext').off('click').on('click', function() {
                goto(pagingInfo.pageNum + 5);
            }).hover(function() {
                $(this).removeClass('el-icon-more').addClass('el-icon-d-arrow-right');
            }, function() {
                $(this).addClass('el-icon-more').removeClass('el-icon-d-arrow-right');
            })

            const $total = $container.find('.el-pagination__total');
            $total.text(`共 ${pagingInfo.totalRows} 条`);            
        }

        init();
    }

    // Slick.Controls.Pager
    $.extend(true, window, { Slick: { Controls: { Pager: SlickGridPager } } });
})(jQuery);