import template from "./Pagination.html";
import style from "antd/lib/pagination/style/index.css";
angular.module("esNgAntd").directive("esPagination", function (esNgAntd) {
    return {
        controllerAs: "esPagination",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            defaultCurrent: "@",
            current: "@",
            total: "@",
            defaultPageSize: "@",
            pageSize: "@",
            onChange: "&",
            onShowSizeChange: "&",
            showQuickJumper: "@",
            showSizeChanger: "@",
            size: "@",
            showTotal: "&",
        },
        template: template,
        controller: function ($scope, $element, $attrs) {
            this.getContext = function () {
                return $scope;
            };

            $scope.state = {
                total: null,
                current: null,
                pageSize: null,
                pageNum: null,
                pageNumList: null,
            };
            $scope.watch = {
                total: function (newVal, oldVal) {
                    if (newVal && oldVal) {
                        $scope.state.total = Number(newVal);
                        $scope.state.pageNum = $scope.getPageNum();
                        $scope.state.pageNumList = $scope.getPageNumList();
                    }
                },
            };

            for (const key in $scope.watch) {
                $scope.$watch(key, $scope.watch[key], true);
            }

            $scope.handleShowTotal = function () {
                return $scope.showTotal({
                    total: $scope.state.total,
                });
            };

            $scope.getItemLinkClassName = function (value) {
                if (typeof value === "number") {
                    return (
                        "ant-pagination-item" +
                        ($scope.state.current === value
                            ? " ant-pagination-item-active"
                            : "")
                    );
                } else {
                    return "ant-pagination-jump-next ant-pagination-jump-next-custom-icon";
                }
            };

            $scope.getPageNumList = function () {
                let pageNumList = [$scope.state.current];
                let pageNum = $scope.getPageNum();

                if (pageNum <= 7 || $scope.state.current - 1 < 4) {
                    for (let i = $scope.state.current - 1; i > 0; i--) {
                        pageNumList.unshift(i);
                    }
                } else {
                    let len =
                        $scope.state.current - 1 > 2
                            ? 2
                            : $scope.state.current - 1;

                    for (let i = 1; i <= len; i++) {
                        pageNumList.unshift($scope.state.current - i);
                    }

                    if ($scope.state.current - 2 > 2) {
                        pageNumList.unshift("prev");
                        pageNumList.unshift(1);
                    }
                }

                if (pageNum <= 7 || pageNum - $scope.state.current < 4) {
                    for (let i = $scope.state.current + 1; i <= pageNum; i++) {
                        pageNumList.push(i);
                    }
                } else {
                    let limit =
                        3 - $scope.state.current > 0
                            ? 2 + (3 - $scope.state.current)
                            : 2;
                    let len =
                        pageNum - $scope.state.current > limit
                            ? limit
                            : pageNum - $scope.state.current;

                    for (let i = 1; i <= len; i++) {
                        pageNumList.push($scope.state.current + i);
                    }

                    if (pageNum - $scope.state.current > 2) {
                        pageNumList.push("next");
                        pageNumList.push(pageNum);
                    }
                }

                return pageNumList;
            };

            $scope.getPageNum = function () {
                return (
                    Math.ceil(
                        $scope.state.total /
                            ($scope.pageSize || $scope.defaultPageSize || 10)
                    ) || 1
                );
            };

            $scope.getPopupContainer = function () {
                return $element[0].querySelector(".ant-pagination-options");
            };

            $scope.handleNext = function () {
                if ($scope.state.current === $scope.state.pageNum) {
                    return false;
                }

                $scope.handleClick(++$scope.state.current);
            };

            $scope.handlePrev = function () {
                if ($scope.state.current === 1) {
                    return false;
                }

                $scope.handleClick(--$scope.state.current);
            };

            $scope.handleClick = function (value) {
                if (value === "next") {
                    value = $scope.state.current + 5;
                }

                if (value === "prev") {
                    value = $scope.state.current - 5;
                }

                $scope.setCurrent($scope.getCurrent(value)); // 更新回调

                $scope.onChange({
                    page: $scope.state.current,
                    pageSize: $scope.state.pageSize,
                });
            };

            $scope.handleChange = function () {
                let current = $scope.state.current;

                if ($scope.state.current > $scope.state.pageNum) {
                    current = $scope.state.pageNum;
                } else if ($scope.state.current < 1) {
                    current = 1;
                }

                $scope.onChange({
                    page: current,
                    pageSize: $scope.state.pageSize,
                });
            };

            $scope.handleSelectChange = function (value) {
                $scope.state.current = 1;
                $scope.state.pageSize = parseInt(value);
                $scope.handleChange();
            };

            $scope.getCurrent = function (number) {
                if (number > $scope.state.pageNum) {
                    return $scope.state.pageNum;
                }

                if (number < 1) {
                    return 1;
                }

                return parseInt(number);
            };

            $scope.setCurrent = function (value) {
                if (!value) {
                    return;
                }

                $scope.state.current = $scope.getCurrent(value);
                $scope.state.pageNumList = $scope.getPageNumList();
                $scope.handleChange();
            };

            $scope.handleBlur = function (event) {
                $scope.setCurrent(event.target.value);
                event.target.value = null;
            };

            $scope.onKeyPress = function (event) {
                if (event.keyCode === 13 || event.keyCode === 32) {
                    $scope.setCurrent(event.target.value);
                    event.target.value = null;
                }
            };
        },
        link: function ($scope, $element, $attrs, $controllers, $transclude) {
            esNgAntd.createStyle("ant-pagination", style);
            $scope.state.total = Number($scope.total || 0);
            $scope.state.current = Number(
                $scope.current || $scope.defaultCurrent || 1
            );
            $scope.state.pageSize =
                $scope.pageSize || $scope.defaultPageSize || 10;
            $scope.state.pageNum = $scope.getPageNum();
            $scope.state.pageNumList = $scope.getPageNumList();
        },
    };
});