import { h } from "@stencil/core";
/**
 * TimeSelect 时间选择组件
 * 可用于时间选择
 */
export class TimeSelect {
    el;
    /**
     * 绑定值
     */
    modelValue;
    /**
     * 输入框占位文本
     */
    placeholder = '请选择时间';
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 输入框尺寸
     */
    size = 'default';
    /**
     * 是否可清空
     * @default false
     */
    clearable = false;
    /**
     * 开始时间
     * @default '09:00'
     */
    start = '09:00';
    /**
     * 结束时间
     * @default '18:00'
     */
    end = '18:00';
    /**
     * 间隔时间
     * @default 60
     */
    step = 60;
    /**
     * 最小时间
     */
    minTime;
    /**
     * 最大时间
     */
    maxTime;
    isOpen = false;
    inputValue = '';
    /**
     * 值改变事件
     */
    hbChange;
    componentDidLoad() {
        this.updateInputValue();
        document.addEventListener('click', this.handleDocumentClick);
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleDocumentClick);
    }
    handleDocumentClick = (e) => {
        if (!this.isOpen)
            return;
        const target = e.target;
        if (!this.el.contains(target)) {
            this.isOpen = false;
        }
    };
    handleValueChange() {
        this.updateInputValue();
    }
    updateInputValue() {
        this.inputValue = this.modelValue || '';
    }
    generateTimeOptions() {
        const options = [];
        const [startHour, startMinute] = this.start.split(':').map(Number);
        const [endHour, endMinute] = this.end.split(':').map(Number);
        const startMinutes = startHour * 60 + startMinute;
        const endMinutes = endHour * 60 + endMinute;
        for (let minutes = startMinutes; minutes <= endMinutes; minutes += this.step) {
            const hour = Math.floor(minutes / 60);
            const minute = minutes % 60;
            const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
            if (this.minTime && timeStr < this.minTime)
                continue;
            if (this.maxTime && timeStr > this.maxTime)
                continue;
            options.push(timeStr);
        }
        return options;
    }
    handleInputClick = () => {
        if (this.disabled)
            return;
        this.isOpen = !this.isOpen;
    };
    handleClear = (e) => {
        e.stopPropagation();
        this.modelValue = undefined;
        this.inputValue = '';
        this.isOpen = false;
        this.hbChange.emit(undefined);
    };
    handleSelect = (time) => {
        this.modelValue = time;
        this.inputValue = time;
        this.isOpen = false;
        this.hbChange.emit(time);
    };
    render() {
        const timeOptions = this.generateTimeOptions();
        const showClear = this.clearable && this.modelValue;
        return (h("div", { key: '763924d65773a88baf74f9a680887bb0f5f11915', class: {
                'hb-time-select': true,
                'hb-time-select--open': this.isOpen,
                'hb-time-select--disabled': this.disabled,
                [`hb-time-select--${this.size}`]: true,
            } }, h("div", { key: '4b11ea13620be04784c2fab4720829733ec4b192', class: "hb-time-select__input-wrapper", onClick: this.handleInputClick }, h("input", { key: '9c398769a1d886640b83e71f3b962dc56bc8e26a', type: "text", class: "hb-time-select__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true }), h("span", { key: '7258097816864a711ca573fc9276bcdf0cc3a99b', class: "hb-time-select__suffix" }, showClear && (h("span", { key: 'cf39db893b847f992075b15c4d80ea7a13af0a7f', class: "hb-time-select__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: '98b70c62d0443b93387de1204a816f8f5fd01629', class: "hb-time-select__arrow" }, "\u25BC"))), this.isOpen && (h("div", { key: '49e548e8674505db8d3bd426eb3a909c8f4861d7', class: "hb-time-select__dropdown" }, h("ul", { key: '72233e92a5b7384d7cce618a86b36a06f173ecd2', class: "hb-time-select__menu" }, timeOptions.map((time) => (h("li", { class: {
                'hb-time-select__menu-item': true,
                'hb-time-select__menu-item--selected': time === this.modelValue,
            }, onClick: () => this.handleSelect(time) }, time))))))));
    }
    static get is() { return "hb-time-select"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["time-select.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["time-select.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5360\u4F4D\u6587\u672C"
                },
                "getter": false,
                "setter": false,
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "'\u8BF7\u9009\u62E9\u65F6\u95F4'"
            },
            "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"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'default' | 'small'",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5C3A\u5BF8"
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "clearable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u53EF\u6E05\u7A7A"
                },
                "getter": false,
                "setter": false,
                "attribute": "clearable",
                "reflect": false,
                "defaultValue": "false"
            },
            "start": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'09:00'"
                        }],
                    "text": "\u5F00\u59CB\u65F6\u95F4"
                },
                "getter": false,
                "setter": false,
                "attribute": "start",
                "reflect": false,
                "defaultValue": "'09:00'"
            },
            "end": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'18:00'"
                        }],
                    "text": "\u7ED3\u675F\u65F6\u95F4"
                },
                "getter": false,
                "setter": false,
                "attribute": "end",
                "reflect": false,
                "defaultValue": "'18:00'"
            },
            "step": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "60"
                        }],
                    "text": "\u95F4\u9694\u65F6\u95F4"
                },
                "getter": false,
                "setter": false,
                "attribute": "step",
                "reflect": false,
                "defaultValue": "60"
            },
            "minTime": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5C0F\u65F6\u95F4"
                },
                "getter": false,
                "setter": false,
                "attribute": "min-time",
                "reflect": false
            },
            "maxTime": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5927\u65F6\u95F4"
                },
                "getter": false,
                "setter": false,
                "attribute": "max-time",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "inputValue": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=TimeSelect.js.map
