import { h } from "@stencil/core";
/**
 * ImagePreview 图片预览组件
 * 点击图片后展示大图，支持缩放、旋转、多图切换
 */
export class ImagePreview {
    el;
    /** 是否显示预览（受控，可双向） */
    modelValue = false;
    /** 单图源（srcList 为空时使用） */
    src = '';
    /** 多图源列表 */
    srcList = [];
    /** 多图当前索引 */
    current = 0;
    /** 单次缩放步长 */
    zoomStep = 0.2;
    /** 最小缩放比例 */
    minZoom = 0.5;
    /** 最大缩放比例 */
    maxZoom = 3;
    /** 关闭事件 */
    hbClose;
    /** 切换事件，detail 为 { src, index } */
    hbChange;
    /** 当前缩放比例 */
    zoom = 1;
    /** 当前旋转角度 */
    rotate = 0;
    keyDownHandler = (e) => {
        if (!this.modelValue)
            return;
        if (e.key === 'Escape') {
            this.close();
        }
        else if (e.key === 'ArrowLeft') {
            this.prev();
        }
        else if (e.key === 'ArrowRight') {
            this.next();
        }
    };
    handleVisibleChange(newVal) {
        if (newVal) {
            // 打开时重置缩放与旋转
            this.zoom = 1;
            this.rotate = 0;
            document.addEventListener('keydown', this.keyDownHandler);
        }
        else {
            document.removeEventListener('keydown', this.keyDownHandler);
        }
    }
    handleCurrentChange() {
        // 切换图片时重置变换
        this.zoom = 1;
        this.rotate = 0;
    }
    componentDidLoad() {
        if (this.modelValue) {
            document.addEventListener('keydown', this.keyDownHandler);
        }
    }
    disconnectedCallback() {
        document.removeEventListener('keydown', this.keyDownHandler);
    }
    /** 实际可切换的图片列表 */
    get imageList() {
        if (this.srcList && this.srcList.length > 0) {
            return this.srcList;
        }
        return this.src ? [this.src] : [];
    }
    get currentIndex() {
        const list = this.imageList;
        if (list.length === 0)
            return 0;
        if (this.current < 0)
            return 0;
        if (this.current >= list.length)
            return list.length - 1;
        return this.current;
    }
    get currentSrc() {
        const list = this.imageList;
        if (list.length === 0)
            return '';
        return list[this.currentIndex] || '';
    }
    get isMulti() {
        return this.imageList.length > 1;
    }
    close = () => {
        this.modelValue = false;
        this.hbClose.emit();
    };
    emitChange() {
        this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });
    }
    next = () => {
        const list = this.imageList;
        if (list.length <= 1)
            return;
        this.current = (this.currentIndex + 1) % list.length;
        this.emitChange();
    };
    prev = () => {
        const list = this.imageList;
        if (list.length <= 1)
            return;
        this.current = (this.currentIndex - 1 + list.length) % list.length;
        this.emitChange();
    };
    zoomIn = () => {
        const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);
        this.zoom = Math.round(next * 100) / 100;
    };
    zoomOut = () => {
        const next = Math.max(this.zoom - this.zoomStep, this.minZoom);
        this.zoom = Math.round(next * 100) / 100;
    };
    handleReset = () => {
        this.zoom = 1;
        this.rotate = 0;
    };
    handleRotateLeft = () => {
        this.rotate = this.rotate - 90;
    };
    handleRotateRight = () => {
        this.rotate = this.rotate + 90;
    };
    /** 滚轮缩放 */
    handleWheel = (e) => {
        // TODO: 平滑缩放 + 图片中心锚点；当前实现为基础步长缩放
        e.preventDefault();
        if (e.deltaY < 0) {
            this.zoomIn();
        }
        else {
            this.zoomOut();
        }
    };
    /** 点击遮罩空白处关闭 */
    handleOverlayClick = (e) => {
        if (e.target === e.currentTarget) {
            this.close();
        }
    };
    stopAndClose = (e) => {
        e.stopPropagation();
        this.close();
    };
    render() {
        if (!this.modelValue)
            return null;
        const imgStyle = {
            transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,
        };
        return (h("div", { class: "hb-image-preview", onClick: this.handleOverlayClick }, h("div", { class: "hb-image-preview__wrapper" }, h("img", { class: "hb-image-preview__img", src: this.currentSrc, alt: "", style: imgStyle, onWheel: this.handleWheel })), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--prev", onClick: this.prev, "aria-label": "\u4E0A\u4E00\u5F20" }, "\u2039")), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--next", onClick: this.next, "aria-label": "\u4E0B\u4E00\u5F20" }, "\u203A")), h("div", { class: "hb-image-preview__toolbar", onClick: (e) => e.stopPropagation() }, h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.zoomOut, "aria-label": "\u7F29\u5C0F" }, "\uFF0D"), h("span", { class: "hb-image-preview__tool-label" }, Math.round(this.zoom * 100), "%"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.zoomIn, "aria-label": "\u653E\u5927" }, "\uFF0B"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleRotateLeft, "aria-label": "\u5DE6\u65CB" }, "\u21BA"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleRotateRight, "aria-label": "\u53F3\u65CB" }, "\u21BB"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleReset, "aria-label": "\u91CD\u7F6E" }, "\u27F2"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.stopAndClose, "aria-label": "\u5173\u95ED" }, "\u2715")), h("button", { type: "button", class: "hb-image-preview__close", onClick: this.stopAndClose, "aria-label": "\u5173\u95ED" }, "\u00D7")));
    }
    static get is() { return "hb-image-preview"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["image-preview.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["image-preview.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u9884\u89C8\uFF08\u53D7\u63A7\uFF0C\u53EF\u53CC\u5411\uFF09"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "false"
            },
            "src": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5355\u56FE\u6E90\uFF08srcList \u4E3A\u7A7A\u65F6\u4F7F\u7528\uFF09"
                },
                "getter": false,
                "setter": false,
                "attribute": "src",
                "reflect": false,
                "defaultValue": "''"
            },
            "srcList": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u591A\u56FE\u6E90\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": "\u591A\u56FE\u5F53\u524D\u7D22\u5F15"
                },
                "getter": false,
                "setter": false,
                "attribute": "current",
                "reflect": false,
                "defaultValue": "0"
            },
            "zoomStep": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5355\u6B21\u7F29\u653E\u6B65\u957F"
                },
                "getter": false,
                "setter": false,
                "attribute": "zoom-step",
                "reflect": false,
                "defaultValue": "0.2"
            },
            "minZoom": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5C0F\u7F29\u653E\u6BD4\u4F8B"
                },
                "getter": false,
                "setter": false,
                "attribute": "min-zoom",
                "reflect": false,
                "defaultValue": "0.5"
            },
            "maxZoom": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5927\u7F29\u653E\u6BD4\u4F8B"
                },
                "getter": false,
                "setter": false,
                "attribute": "max-zoom",
                "reflect": false,
                "defaultValue": "3"
            }
        };
    }
    static get states() {
        return {
            "zoom": {},
            "rotate": {}
        };
    }
    static get events() {
        return [{
                "method": "hbClose",
                "name": "hbClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u5173\u95ED\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u5207\u6362\u4E8B\u4EF6\uFF0Cdetail \u4E3A { src, index }"
                },
                "complexType": {
                    "original": "ImagePreviewChangeDetail",
                    "resolved": "ImagePreviewChangeDetail",
                    "references": {
                        "ImagePreviewChangeDetail": {
                            "location": "local",
                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/ImagePreview/ImagePreview.tsx",
                            "id": "src/components/ImagePreview/ImagePreview.tsx::ImagePreviewChangeDetail"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleVisibleChange"
            }, {
                "propName": "current",
                "methodName": "handleCurrentChange"
            }];
    }
}
//# sourceMappingURL=ImagePreview.js.map
