import { h } from "@stencil/core";
/**
 * Slider 滑块组件
 * 通过拖动滑块在一个固定区间内进行选择
 */
export class Slider {
    el;
    /**
     * 绑定值
     */
    modelValue = 0;
    /**
     * 最小值
     * @default 0
     */
    min = 0;
    /**
     * 最大值
     * @default 100
     */
    max = 100;
    /**
     * 步长
     * @default 1
     */
    step = 1;
    /**
     * 是否显示工具提示
     * @default true
     */
    showTooltip = true;
    /**
     * 格式化 tooltip message
     */
    formatTooltip;
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 是否为范围选择
     * @default false
     */
    range = false;
    /**
     * 是否竖向模式
     * @default false
     */
    vertical = false;
    /**
     * 高度，竖向模式时必填
     */
    height;
    dragging = false;
    currentValue = 0;
    tooltipVisible = false;
    tooltipValue = 0;
    sliderRef;
    isDragging = false;
    /**
     * 值改变事件
     */
    hbChange;
    /**
     * 值改变事件（拖拽时实时触发）
     */
    hbInput;
    componentDidLoad() {
        this.currentValue = this.modelValue;
        this.addEventListeners();
    }
    disconnectedCallback() {
        this.removeEventListeners();
    }
    addEventListeners() {
        document.addEventListener('mousemove', this.handleMouseMove);
        document.addEventListener('mouseup', this.handleMouseUp);
    }
    removeEventListeners() {
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
    }
    getPercentage(value) {
        return ((value - this.min) / (this.max - this.min)) * 100;
    }
    getValueFromPercentage(percentage) {
        const value = this.min + (percentage / 100) * (this.max - this.min);
        return Math.round(value / this.step) * this.step;
    }
    handleMouseDown = (e) => {
        if (this.disabled)
            return;
        e.preventDefault();
        this.isDragging = true;
        this.dragging = true;
        this.handleDrag(e);
    };
    handleMouseMove = (e) => {
        if (!this.isDragging)
            return;
        this.handleDrag(e);
    };
    handleMouseUp = () => {
        if (!this.isDragging)
            return;
        this.isDragging = false;
        this.dragging = false;
        this.tooltipVisible = false;
        this.hbChange.emit(this.currentValue);
    };
    handleDrag(e) {
        if (!this.sliderRef)
            return;
        const rect = this.sliderRef.getBoundingClientRect();
        const percentage = this.vertical
            ? 1 - (e.clientY - rect.top) / rect.height
            : (e.clientX - rect.left) / rect.width;
        const clampedPercentage = Math.max(0, Math.min(100, percentage * 100));
        const value = this.getValueFromPercentage(clampedPercentage);
        if (this.range) {
            const values = this.currentValue;
            // 简化处理：更新第一个值
            this.currentValue = [value, values[1] || this.max];
        }
        else {
            this.currentValue = value;
            this.tooltipValue = value;
            this.tooltipVisible = true;
        }
        this.modelValue = this.currentValue;
        this.hbInput.emit(this.currentValue);
    }
    formatValue(value) {
        if (this.formatTooltip) {
            return this.formatTooltip(value);
        }
        return String(value);
    }
    render() {
        const percentage = this.range
            ? this.getPercentage(this.currentValue[0])
            : this.getPercentage(this.currentValue);
        return (h("div", { key: 'b8ee15c3375f6786c252e6755ff6dd5d4ab0023f', class: {
                'hb-slider': true,
                'hb-slider--vertical': this.vertical,
                'hb-slider--disabled': this.disabled,
            }, style: this.vertical && this.height ? { height: this.height } : undefined }, h("div", { key: 'c75f1194e3a8a630d4ffa0cb82579fddc42e2461', class: "hb-slider__runway", ref: (el) => (this.sliderRef = el), onMouseDown: this.handleMouseDown }, h("div", { key: '5dcf4d4807e85cd4a96fd919d4b9d999f0d837d7', class: "hb-slider__bar", style: {
                [this.vertical ? 'height' : 'width']: `${percentage}%`,
                [this.vertical ? 'bottom' : 'left']: '0',
            } }), h("div", { key: 'e10dc431c839183de585debfd9991a2d75922cc9', class: {
                'hb-slider__button-wrapper': true,
                'hb-slider__button-wrapper--hover': this.tooltipVisible,
            }, style: {
                [this.vertical ? 'bottom' : 'left']: `${percentage}%`,
            } }, this.showTooltip && this.tooltipVisible && (h("div", { key: '270c0d8dd46b03fac7b4b8e62265a14158de18b7', class: "hb-slider__tooltip" }, this.formatValue(this.tooltipValue))), h("div", { key: '20772f2a08bed8c009c119b1c148ff0448c9a288', class: "hb-slider__button" })))));
    }
    static get is() { return "hb-slider"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["slider.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["slider.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number | number[]",
                    "resolved": "number | number[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "0"
            },
            "min": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "0"
                        }],
                    "text": "\u6700\u5C0F\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "min",
                "reflect": false,
                "defaultValue": "0"
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "100"
                        }],
                    "text": "\u6700\u5927\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "max",
                "reflect": false,
                "defaultValue": "100"
            },
            "step": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "1"
                        }],
                    "text": "\u6B65\u957F"
                },
                "getter": false,
                "setter": false,
                "attribute": "step",
                "reflect": false,
                "defaultValue": "1"
            },
            "showTooltip": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "true"
                        }],
                    "text": "\u662F\u5426\u663E\u793A\u5DE5\u5177\u63D0\u793A"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-tooltip",
                "reflect": false,
                "defaultValue": "true"
            },
            "formatTooltip": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(value: number) => string",
                    "resolved": "(value: number) => string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u683C\u5F0F\u5316 tooltip message"
                },
                "getter": false,
                "setter": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u7981\u7528"
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "range": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u4E3A\u8303\u56F4\u9009\u62E9"
                },
                "getter": false,
                "setter": false,
                "attribute": "range",
                "reflect": false,
                "defaultValue": "false"
            },
            "vertical": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u7AD6\u5411\u6A21\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "vertical",
                "reflect": false,
                "defaultValue": "false"
            },
            "height": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u9AD8\u5EA6\uFF0C\u7AD6\u5411\u6A21\u5F0F\u65F6\u5FC5\u586B"
                },
                "getter": false,
                "setter": false,
                "attribute": "height",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "dragging": {},
            "currentValue": {},
            "tooltipVisible": {},
            "tooltipValue": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "number | number[]",
                    "resolved": "number | number[]",
                    "references": {}
                }
            }, {
                "method": "hbInput",
                "name": "hbInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6\uFF08\u62D6\u62FD\u65F6\u5B9E\u65F6\u89E6\u53D1\uFF09"
                },
                "complexType": {
                    "original": "number | number[]",
                    "resolved": "number | number[]",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=Slider.js.map
