import { h, Host } from "@stencil/core";
/**
 * Backtop 返回顶部组件
 * 滚动超过指定高度时出现，点击后平滑滚动回顶部
 */
export class Backtop {
    /** 滚动高度达到此参数值才出现 */
    visibilityHeight = 400;
    /** 可选滚动目标元素选择器（默认监听 window 滚动） */
    target;
    /** 距离页面右侧的距离 */
    right = 40;
    /** 距离页面底部的距离 */
    bottom = 40;
    /** 是否可见 */
    visible = false;
    /** 点击按钮时触发的事件 */
    hbClick;
    scrollTarget = null;
    componentDidLoad() {
        this.setupScrollTarget();
        this.handleScroll();
    }
    disconnectedCallback() {
        this.teardownScrollTarget();
    }
    setupScrollTarget() {
        if (this.target) {
            const el = document.querySelector(this.target);
            if (el) {
                this.scrollTarget = el;
            }
        }
        if (!this.scrollTarget) {
            this.scrollTarget = window;
        }
        this.scrollTarget.addEventListener('scroll', this.handleScroll);
    }
    teardownScrollTarget() {
        if (this.scrollTarget) {
            this.scrollTarget.removeEventListener('scroll', this.handleScroll);
            this.scrollTarget = null;
        }
    }
    getScrollTop() {
        if (!this.scrollTarget)
            return 0;
        if (this.scrollTarget === window) {
            return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        }
        return this.scrollTarget.scrollTop;
    }
    handleScroll = () => {
        this.visible = this.getScrollTop() >= this.visibilityHeight;
    };
    scrollToTop = () => {
        const target = this.scrollTarget === window ? window : this.scrollTarget;
        // 平滑滚动：window 用 scrollTo，容器元素用 scrollTo({ top })
        if (target === window) {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
        else {
            target.scrollTo({ top: 0, behavior: 'smooth' });
        }
        this.hbClick.emit();
    };
    /**
     * 主动触发返回顶部（暴露给外部调用）
     */
    async backToTop() {
        this.scrollToTop();
    }
    // 同时监听宿主上的 scroll 事件（便于测试与跨边界触发）
    onWindowScroll() {
        if (!this.target) {
            this.handleScroll();
        }
    }
    render() {
        return (h(Host, { key: 'c750c1d56599bb335bb31158b57dfdb332be6750', class: { 'hb-backtop': true, 'hb-backtop--hidden': !this.visible }, style: {
                right: `${this.right}px`,
                bottom: `${this.bottom}px`,
                visibility: this.visible ? 'visible' : 'hidden',
                opacity: this.visible ? '1' : '0',
            } }, h("div", { key: '4f1311e4de4496fbe8d2558ace0397663ec04fac', class: "hb-backtop__inner", onClick: this.scrollToTop }, h("slot", { key: '1d14aa66b400ba226aadacfb0c2a92d6a4ad935a' }, h("span", { key: '3b7f4d60d78dcfd458a9e6af63ad94d7061cf147', class: "hb-backtop__icon" }, "\u2191")))));
    }
    static get is() { return "hb-backtop"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["backtop.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["backtop.css"]
        };
    }
    static get properties() {
        return {
            "visibilityHeight": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6EDA\u52A8\u9AD8\u5EA6\u8FBE\u5230\u6B64\u53C2\u6570\u503C\u624D\u51FA\u73B0"
                },
                "getter": false,
                "setter": false,
                "attribute": "visibility-height",
                "reflect": false,
                "defaultValue": "400"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u53EF\u9009\u6EDA\u52A8\u76EE\u6807\u5143\u7D20\u9009\u62E9\u5668\uFF08\u9ED8\u8BA4\u76D1\u542C window \u6EDA\u52A8\uFF09"
                },
                "getter": false,
                "setter": false,
                "attribute": "target",
                "reflect": false
            },
            "right": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8DDD\u79BB\u9875\u9762\u53F3\u4FA7\u7684\u8DDD\u79BB"
                },
                "getter": false,
                "setter": false,
                "attribute": "right",
                "reflect": false,
                "defaultValue": "40"
            },
            "bottom": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8DDD\u79BB\u9875\u9762\u5E95\u90E8\u7684\u8DDD\u79BB"
                },
                "getter": false,
                "setter": false,
                "attribute": "bottom",
                "reflect": false,
                "defaultValue": "40"
            }
        };
    }
    static get states() {
        return {
            "visible": {}
        };
    }
    static get events() {
        return [{
                "method": "hbClick",
                "name": "hbClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u70B9\u51FB\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "backToTop": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "\u4E3B\u52A8\u89E6\u53D1\u8FD4\u56DE\u9876\u90E8\uFF08\u66B4\u9732\u7ED9\u5916\u90E8\u8C03\u7528\uFF09",
                    "tags": []
                }
            }
        };
    }
    static get listeners() {
        return [{
                "name": "scroll",
                "method": "onWindowScroll",
                "target": "window",
                "capture": false,
                "passive": true
            }];
    }
}
//# sourceMappingURL=Backtop.js.map
