import { h } from "@stencil/core";
/**
 * Tour 引导组件
 * 通过遮罩 + 高亮卡片引导用户关注页面元素。
 */
export class Tour {
    el;
    /** 是否显示（受控） */
    visible = false;
    /** 步骤列表 */
    steps = [];
    /** 当前步骤索引 */
    current = 0;
    /** 步骤变化事件，detail 为新 current */
    hbChange;
    /** 关闭事件 */
    hbClose;
    targetRect = null;
    get currentStep() {
        return this.steps[this.current];
    }
    get isLast() {
        return this.current >= this.steps.length - 1;
    }
    get isFirst() {
        return this.current <= 0;
    }
    componentDidRender() {
        this.updateTargetRect();
    }
    componentDidUpdate() {
        this.updateTargetRect();
    }
    updateTargetRect() {
        const step = this.currentStep;
        if (!step || !this.visible) {
            this.targetRect = null;
            return;
        }
        const targetEl = document.querySelector(step.target);
        if (targetEl) {
            this.targetRect = targetEl.getBoundingClientRect();
        }
        else {
            this.targetRect = null;
        }
    }
    goNext = () => {
        if (this.isLast) {
            this.finish();
            return;
        }
        this.current = this.current + 1;
        this.hbChange.emit(this.current);
    };
    goPrev = () => {
        if (this.isFirst)
            return;
        this.current = this.current - 1;
        this.hbChange.emit(this.current);
    };
    finish = () => {
        this.visible = false;
        this.hbClose.emit();
    };
    cardStyle() {
        const rect = this.targetRect;
        // jsdom 下 getBoundingClientRect 返回 0 尺寸，提供兜底位置
        if (rect && (rect.width > 0 || rect.height > 0)) {
            return {
                left: `${rect.right + 12}px`,
                top: `${rect.top}px`,
            };
        }
        return { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' };
    }
    maskStyle() {
        const rect = this.targetRect;
        if (rect && (rect.width > 0 || rect.height > 0)) {
            // 4 段 box-shadow 实现镂空遮罩
            const top = rect.top;
            const right = window.innerWidth - rect.right;
            const bottom = window.innerHeight - rect.bottom;
            const left = rect.left;
            return {
                boxShadow: [
                    `0 0 0 9999px var(--hb-color-bg-mask)`,
                    `${left}px ${bottom}px 0 ${right}px transparent`,
                    `${left}px ${top}px 0 ${right}px transparent`,
                    `0 ${bottom}px 0 ${right}px transparent`,
                    `0 ${top}px 0 ${left}px transparent`,
                ].join(', '),
            };
        }
        return { background: 'var(--hb-color-bg-mask)' };
    }
    render() {
        if (!this.visible || this.steps.length === 0)
            return null;
        const step = this.currentStep;
        if (!step)
            return null;
        return (h("div", { class: "hb-tour" }, h("div", { class: "hb-tour__mask", style: this.maskStyle(), onClick: this.finish }), h("div", { class: "hb-tour__card", style: this.cardStyle(), role: "dialog", "aria-modal": "true" }, h("div", { class: "hb-tour__header" }, h("span", { class: "hb-tour__title" }, step.title), h("button", { type: "button", class: "hb-tour__close", onClick: this.finish, "aria-label": "\u5173\u95ED" }, "\u00D7")), h("div", { class: "hb-tour__body" }, step.description), h("div", { class: "hb-tour__footer" }, h("span", { class: "hb-tour__indicator" }, this.current + 1, " / ", this.steps.length), h("div", { class: "hb-tour__actions" }, !this.isFirst && (h("button", { type: "button", class: "hb-tour__btn hb-tour__btn--prev", onClick: this.goPrev }, "\u4E0A\u4E00\u6B65")), h("button", { type: "button", class: "hb-tour__btn hb-tour__btn--next", onClick: this.goNext }, this.isLast ? '完成' : '下一步'))))));
    }
    static get is() { return "hb-tour"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["tour.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tour.css"]
        };
    }
    static get properties() {
        return {
            "visible": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\uFF08\u53D7\u63A7\uFF09"
                },
                "getter": false,
                "setter": false,
                "attribute": "visible",
                "reflect": false,
                "defaultValue": "false"
            },
            "steps": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "TourStep[]",
                    "resolved": "TourStep[]",
                    "references": {
                        "TourStep": {
                            "location": "local",
                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Tour/Tour.tsx",
                            "id": "src/components/Tour/Tour.tsx::TourStep"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6B65\u9AA4\u5217\u8868"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "current": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u6B65\u9AA4\u7D22\u5F15"
                },
                "getter": false,
                "setter": false,
                "attribute": "current",
                "reflect": false,
                "defaultValue": "0"
            }
        };
    }
    static get states() {
        return {
            "targetRect": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6B65\u9AA4\u53D8\u5316\u4E8B\u4EF6\uFF0Cdetail \u4E3A\u65B0 current"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "hbClose",
                "name": "hbClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u5173\u95ED\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=Tour.js.map
