import { h } from "@stencil/core";
/**
 * Pagination 分页组件
 * 当数据量过多时，使用分页分解数据
 */
export class Pagination {
    /** 总条目数 */
    total = 0;
    /** 每页显示条目数 */
    pageSize = 10;
    /** 当前页数 */
    currentPage = 1;
    /** 每页显示个数选择器的选项设置 */
    pageSizes = [10, 20, 50, 100];
    /** 最大页码按钮数 */
    pagerCount = 7;
    /** 是否禁用 */
    disabled = false;
    /** 是否显示总条数 */
    showTotal = false;
    /** 是否显示每页条数选择器 */
    showPageSize = false;
    internalCurrent = 1;
    /** 当前页改变事件 */
    hbCurrentChange;
    /** 每页条数改变事件 */
    hbSizeChange;
    handleCurrentPageChange() {
        this.internalCurrent = this.currentPage;
    }
    componentDidLoad() {
        this.internalCurrent = this.currentPage;
    }
    get totalPages() {
        return Math.max(1, Math.ceil(this.total / this.pageSize));
    }
    handlePageClick(page) {
        if (this.disabled || page === this.internalCurrent || page < 1 || page > this.totalPages)
            return;
        this.internalCurrent = page;
        this.currentPage = page;
        this.hbCurrentChange.emit(page);
    }
    handleSizeChange(e) {
        const target = e.target;
        const size = parseInt(target.value, 10);
        this.hbSizeChange.emit(size);
        this.internalCurrent = 1;
        this.currentPage = 1;
        this.hbCurrentChange.emit(1);
    }
    getPages() {
        const pages = [];
        const total = this.totalPages;
        const current = this.internalCurrent;
        const pager = this.pagerCount;
        if (total <= pager) {
            for (let i = 1; i <= total; i++)
                pages.push(i);
            return pages;
        }
        const half = Math.floor((pager - 2) / 2);
        let start = current - half;
        let end = current + half;
        if (start < 2) {
            start = 2;
            end = Math.min(pager - 1, total - 1);
        }
        if (end > total - 1) {
            end = total - 1;
            start = Math.max(2, total - pager + 2);
        }
        pages.push(1);
        if (start > 2)
            pages.push('...');
        for (let i = start; i <= end; i++)
            pages.push(i);
        if (end < total - 1)
            pages.push('...');
        pages.push(total);
        return pages;
    }
    render() {
        const pages = this.getPages();
        return (h("div", { key: '889d6db49b4a7af7ad353fcc36de1aed8499708a', class: { 'hb-pagination': true, 'hb-pagination--disabled': this.disabled } }, this.showTotal && (h("span", { key: 'f914032da52a9919a81087d627a67e68456dc89d', class: "hb-pagination__total" }, "\u5171 ", this.total, " \u6761")), this.showPageSize && (h("select", { key: '30b748ffd520e94a1a1c512e49393c3065f89216', class: "hb-pagination__sizes", onChange: this.handleSizeChange, disabled: this.disabled }, this.pageSizes.map(size => (h("option", { value: size, selected: size === this.pageSize }, size, " \u6761/\u9875"))))), h("button", { key: '2a7ba780e83f94d476b340d2d47b20e772132dd4', type: "button", class: "hb-pagination__btn hb-pagination__prev", disabled: this.disabled || this.internalCurrent <= 1, onClick: () => this.handlePageClick(this.internalCurrent - 1) }, "\u2039"), pages.map(page => page === '...' ? (h("span", { class: "hb-pagination__ellipsis" }, "...")) : (h("button", { type: "button", class: {
                'hb-pagination__btn': true,
                'hb-pagination__btn--active': page === this.internalCurrent,
            }, disabled: this.disabled, onClick: () => this.handlePageClick(page) }, page))), h("button", { key: '7a5e6cd5eb1c3db595708687cebe52b5e0e0d88a', type: "button", class: "hb-pagination__btn hb-pagination__next", disabled: this.disabled || this.internalCurrent >= this.totalPages, onClick: () => this.handlePageClick(this.internalCurrent + 1) }, "\u203A")));
    }
    static get is() { return "hb-pagination"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pagination.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pagination.css"]
        };
    }
    static get properties() {
        return {
            "total": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u603B\u6761\u76EE\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "total",
                "reflect": false,
                "defaultValue": "0"
            },
            "pageSize": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6BCF\u9875\u663E\u793A\u6761\u76EE\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "page-size",
                "reflect": false,
                "defaultValue": "10"
            },
            "currentPage": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u9875\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "current-page",
                "reflect": false,
                "defaultValue": "1"
            },
            "pageSizes": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "number[]",
                    "resolved": "number[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6BCF\u9875\u663E\u793A\u4E2A\u6570\u9009\u62E9\u5668\u7684\u9009\u9879\u8BBE\u7F6E"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[10, 20, 50, 100]"
            },
            "pagerCount": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5927\u9875\u7801\u6309\u94AE\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "pager-count",
                "reflect": false,
                "defaultValue": "7"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u7981\u7528"
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "showTotal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u603B\u6761\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-total",
                "reflect": false,
                "defaultValue": "false"
            },
            "showPageSize": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u6BCF\u9875\u6761\u6570\u9009\u62E9\u5668"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-page-size",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "internalCurrent": {}
        };
    }
    static get events() {
        return [{
                "method": "hbCurrentChange",
                "name": "hbCurrentChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u9875\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "hbSizeChange",
                "name": "hbSizeChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6BCF\u9875\u6761\u6570\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "currentPage",
                "methodName": "handleCurrentPageChange"
            }];
    }
}
//# sourceMappingURL=Pagination.js.map
