import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter, ElementRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { addClass, dedupleClassName } from '../util/dom';
var PageComponent = /** @class */ (function () {
    function PageComponent(_el) {
        this._el = _el;
        /**
         * extra theme class
         * @default ''
         */
        this.theme = '';
        // 每页20条
        // count = 20;
        /**
         * count per page
         * @default default
         */
        this.count = 20;
        // 第几页
        // curIndex = 1;
        /**
         * page curIndex
         * @default default
         */
        this.curIndex = 1;
        /**
         * page size, there are four default sizes:  'sm' | 'default'
         * @default default
         */
        this.size = 'default';
        /**
         * when page change, emit a change event, which contains the currrentIndex and the count
         * @default default
         */
        this.pageChange = new EventEmitter();
        /**
         * 页数
         * @docs-private
         */
        this.pageSize = [];
        // pageSize = [1,2,3,4,5,6,7,8,9,10,11];
        // 每页显示条数可选列表
        /**
         * 当前页
         * @docs-private
         */
        this.currrentIndex = 1;
        /**
         * 最后选择的页
         * @docs-private
         */
        this.lastIndex = 1;
        /**
         * 页码较多时, 当前页码前后单一边显示的页码数
         * @docs-private
         */
        this._showCount = 2;
        /**
         * 页码较多时, 当前页码前后单一边显示的页码数数组
         * @docs-private
         */
        this.showCountArr = [2, 1];
        // selectedData1: SelectConfig;
        /**
         * 可供选择的每页显示的条数
         * @docs-private
         */
        this.selectData = [
            {
                label: '10',
                value: 10
            },
            {
                label: '20',
                value: 20
            },
            {
                label: '30',
                value: 30
            },
            {
                label: '50',
                value: 50
            }
        ];
    }
    Object.defineProperty(PageComponent.prototype, "showCount", {
        // 可选择的每页显示条数,
        // 可选填参数
        /**
         * showCount count
         * @default default
         */
        get: function () {
            return this._showCount;
        },
        set: function (value) {
            this._showCount = Number.isInteger(value) && value > 0 ? value : 2;
            this.showCountArr = [];
            for (var i = this._showCount; i > 0; i--) {
                this.showCountArr.push(i);
            }
        },
        enumerable: true,
        configurable: true
    });
    PageComponent.prototype.ngOnChanges = function () {
        this.setPage();
    };
    PageComponent.prototype.ngOnInit = function () {
        if (this.list && this.list.length > 0) {
            this.selectData = [];
            for (var i = 0; i < this.list.length; i++) {
                this.selectData.push({
                    label: this.list[i].toString(),
                    value: this.list[i]
                });
            }
        }
        this.setPage();
    };
    PageComponent.prototype.ngAfterViewInit = function () {
        // init class list
        this.setClass();
        if (this.theme) {
            addClass(this._el.nativeElement, "nb-page-" + this.theme);
        }
    };
    /**
     * set host element classes
     * @docs-private
     */
    PageComponent.prototype.setClass = function () {
        var nativeEl = this._el.nativeElement;
        var nativeClassName = nativeEl.className;
        nativeEl.className = dedupleClassName(this.getClassName() + ' ' + nativeClassName).join(' ');
    };
    /**
     * get host element classes, depends on the theme and size.
     * @return {string} class names
     * @docs-private
     */
    PageComponent.prototype.getClassName = function () {
        return [
            'nb-widget',
            'nb-page',
            "nb-page-size-" + (this.size || 'default'),
            "nb-page-theme-" + (this.theme || 'default')
        ].join(' ');
    };
    /**
     * set current page
     *
     * @param {any} value - box value
     * @docs-private
     */
    PageComponent.prototype.setPage = function () {
        this.pageSize = [];
        var pageCount = Math.ceil(this.total / this.count);
        for (var i = 1; i <= pageCount; i++) {
            this.pageSize.push(i);
        }
        this.currrentIndex = this.curIndex;
        if (this.pageSize.length < this.currrentIndex) {
            this.currrentIndex = 1;
        }
    };
    /**
     * jump tp page num
     *
     * @param {number} index - page num
     * @docs-private
     */
    PageComponent.prototype.jumpTo = function (index) {
        if (this.currrentIndex > 0 && this.currrentIndex < this.pageSize.length + 1) {
            if (+index === -2 && this.currrentIndex !== 1) {
                this.currrentIndex--;
            }
            else if (+index === -1 && this.currrentIndex !== this.pageSize.length) {
                this.currrentIndex++;
            }
            else if (+index > -1) {
                this.currrentIndex = index;
            }
            this.lastIndex = this.currrentIndex;
        }
        else {
            this.currrentIndex = this.lastIndex;
        }
        this.pageChange.emit({
            currrentIndex: this.currrentIndex,
            count: this.count
        });
        // this.$dispatch('pageChange', this.currrentIndex - 1);
    };
    /**
     * set current page count
     *
     * @param {object} event - page change event
     * @docs-private
     */
    PageComponent.prototype.setCount = function (event) {
        this.count = event.value;
        this.currrentIndex = this.curIndex;
        this.pageChange.emit({
            currrentIndex: this.currrentIndex,
            count: this.count
        });
        this.setPage();
    };
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], PageComponent.prototype, "theme", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], PageComponent.prototype, "count", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], PageComponent.prototype, "curIndex", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], PageComponent.prototype, "total", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number),
        tslib_1.__metadata("design:paramtypes", [Number])
    ], PageComponent.prototype, "showCount", null);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Array)
    ], PageComponent.prototype, "list", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], PageComponent.prototype, "size", void 0);
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], PageComponent.prototype, "pageChange", void 0);
    PageComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-page',
            template: "<div class=\"nb-page\"><div class=\"page-turn\"><span class=\"total-page\">共<span class=\"total\">{{ total }}</span>条</span> <span class=\"total-page\">每页条数</span><nb-select [(ngModel)]=\"count\" [datasource]=\"selectData\" [defaultLabel]=\"count\" [value]=\"count\" (onChange)=\"setCount($event)\" [size]=\"'xs'\" [defaultLabel]=\"'size-xs'\"></nb-select><ng-container *ngIf=\"pageSize.length < (5 + showCount * 2)\"><span *ngFor=\"let item of pageSize; index as i\" [ngClass]=\"{'turn-on': i + 1 === currrentIndex}\" (click)=\"jumpTo(i+1)\">{{ i+1 }}</span></ng-container><ng-container *ngIf=\"pageSize.length >= (5 + showCount * 2) && currrentIndex < 3 + showCount\"><ng-container *ngFor=\"let item of pageSize; index as i\"><span *ngIf=\"i < (3 + showCount)\" [ngClass]=\"{'turn-on': i + 1 === currrentIndex}\" (click)=\"jumpTo(i+1)\">{{ i+1 }}</span></ng-container><em>...</em> <span (click)=\"jumpTo(pageSize.length)\">{{ pageSize.length }}</span></ng-container><ng-container *ngIf=\"pageSize.length >= (5 + showCount * 2) && currrentIndex > (2 + showCount) && currrentIndex < (pageSize.length - 1 - showCount)\"><span (click)=\"jumpTo(1)\">1</span> <em>...</em> <span *ngFor=\"let diff of showCountArr\" (click)=\"jumpTo(currrentIndex-diff)\">{{ +currrentIndex-diff }}</span> <span (click)=\"jumpTo(currrentIndex)\" class=\"turn-on\">{{ currrentIndex }}</span> <span *ngFor=\"let diff of showCountArr\" (click)=\"jumpTo(currrentIndex+showCount+1-diff)\">{{ +currrentIndex+showCount+1-diff }}</span> <em>...</em> <span (click)=\"jumpTo(pageSize.length)\">{{ pageSize.length }}</span></ng-container><ng-container *ngIf=\"pageSize.length >= (5 + showCount * 2) && currrentIndex > (pageSize.length - 2 - showCount)\"><span (click)=\"jumpTo(1)\">1</span> <em>...</em><ng-container *ngFor=\"let item of pageSize; index as i\"><span *ngIf=\"i >= (pageSize.length - 3 - showCount)\" [ngClass]=\"{'turn-on': i + 1 === currrentIndex}\" (click)=\"jumpTo(i+1)\">{{ i+1 }}</span></ng-container></ng-container><span class=\"arrow arrow-disable\" *ngIf=\"currrentIndex === 1\"><i class=\"iconfont icon-left\"></i></span> <span class=\"arrow\" (click)=\"jumpTo(-2)\" *ngIf=\"currrentIndex !== 1\"><i class=\"iconfont icon-left\"></i></span> <span class=\"arrow arrow-disable\" *ngIf=\"currrentIndex === pageSize.length\"><i class=\"iconfont icon-right\"></i></span> <span class=\"arrow\" (click)=\"jumpTo(-1)\" *ngIf=\"currrentIndex !== pageSize.length\"><i class=\"iconfont icon-right\"></i></span></div></div>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: false
        }),
        tslib_1.__metadata("design:paramtypes", [ElementRef])
    ], PageComponent);
    return PageComponent;
}());
export { PageComponent };
//# sourceMappingURL=page.js.map