import { h } from "@stencil/core";
import { computePosition, getNextZIndex } from "../../utils/popup-manager";
export class Popconfirm {
    el;
    title = '确定执行此操作？';
    confirmButtonText = '确定';
    cancelButtonText = '取消';
    placement = 'top';
    disabled = false;
    icon = '⚠';
    visible = false;
    popupStyle = {};
    triggerRef;
    popupRef;
    show = () => {
        if (!this.disabled) {
            this.visible = true;
            requestAnimationFrame(() => this.updatePosition());
        }
    };
    hide = () => { this.visible = false; };
    updatePosition() {
        if (!this.triggerRef || !this.popupRef)
            return;
        const rect = this.triggerRef.getBoundingClientRect();
        const { width: pw, height: ph } = this.popupRef.getBoundingClientRect();
        const pos = computePosition(rect, pw, ph, this.placement, 8);
        this.popupStyle = { top: `${pos.top}px`, left: `${pos.left}px`, zIndex: String(getNextZIndex()) };
    }
    handleConfirm = (e) => { e.stopPropagation(); this.hide(); this.el.dispatchEvent(new CustomEvent('hbConfirm', { bubbles: true })); };
    handleCancel = (e) => { e.stopPropagation(); this.hide(); this.el.dispatchEvent(new CustomEvent('hbCancel', { bubbles: true })); };
    render() {
        return (h("div", { key: 'd4817c4b90b135f3dc911259760ec6135c014882', class: "hb-popconfirm", onClick: this.show }, h("div", { key: 'bc992147604a6b601b9bfd1848fbd9fd425bcc65', ref: (el) => { this.triggerRef = el; }, class: "hb-popconfirm__trigger" }, h("slot", { key: 'a5be9404aa726abc5c1c40292bfa3adef7793fa7' })), this.visible && (h("div", { key: '4d9794a39fe67cae8d61b6ddf421eb922e89ed4e', ref: (el) => { this.popupRef = el; }, class: "hb-popconfirm__popup", style: this.popupStyle }, h("div", { key: '15b32d88525e57064aa6c98ab5d409a86bce1a48', class: "hb-popconfirm__main" }, h("span", { key: 'a958b70e2ce984d8a87f278dcc13831778a37ddb', class: "hb-popconfirm__icon" }, this.icon), h("span", { key: 'd965d258313cf129d8d07a4085897b750cfe046b', class: "hb-popconfirm__title" }, this.title)), h("div", { key: '184c808d11c9c987d7cc8d419133f5cdc5655466', class: "hb-popconfirm__action" }, h("button", { key: '4c2f7eb3b996bd5231a1df845a6e6422a189293f', type: "button", class: "hb-popconfirm__btn hb-popconfirm__btn--cancel", onClick: this.handleCancel }, this.cancelButtonText), h("button", { key: 'de7a86643978c024e780061b775035488e879faf', type: "button", class: "hb-popconfirm__btn hb-popconfirm__btn--confirm", onClick: this.handleConfirm }, this.confirmButtonText))))));
    }
    static get is() { return "hb-popconfirm"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["popconfirm.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["popconfirm.css"]
        };
    }
    static get properties() {
        return {
            "title": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "title",
                "reflect": false,
                "defaultValue": "'\u786E\u5B9A\u6267\u884C\u6B64\u64CD\u4F5C\uFF1F'"
            },
            "confirmButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "confirm-button-text",
                "reflect": false,
                "defaultValue": "'\u786E\u5B9A'"
            },
            "cancelButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "cancel-button-text",
                "reflect": false,
                "defaultValue": "'\u53D6\u6D88'"
            },
            "placement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Placement",
                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                    "references": {
                        "Placement": {
                            "location": "import",
                            "path": "../../utils/popup-manager",
                            "id": "src/utils/popup-manager.ts::Placement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "placement",
                "reflect": false,
                "defaultValue": "'top'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "icon",
                "reflect": false,
                "defaultValue": "'\u26A0'"
            }
        };
    }
    static get states() {
        return {
            "visible": {},
            "popupStyle": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=Popconfirm.js.map
