import { h } from "@stencil/core";
/**
 * FormItem 表单项组件
 * 表单中的每一项
 */
export class FormItem {
    el;
    /** 字段名 */
    prop = '';
    /** 标签文本 */
    label = '';
    /** 标签宽度 */
    labelWidth;
    /** 是否必填 */
    required = false;
    /** 该表单项的验证规则 */
    rules = [];
    /** 表单尺寸 */
    size = 'default';
    errors = [];
    isvalidating = false;
    componentDidLoad() {
        // 向父级 hb-form 注册
        this.el.dispatchEvent(new CustomEvent('hbFormFieldRegister', {
            detail: {
                prop: this.prop,
                validate: this.validate,
                resetValue: this.resetValue,
                getValue: this.getValue,
            },
            bubbles: true,
        }));
    }
    get formRules() {
        // 合并 prop 对应的 form rules 和自身 rules
        const form = this.el.closest('hb-form');
        const formLevelRules = form ? form.rules?.[this.prop] || [] : [];
        return [...formLevelRules, ...this.rules];
    }
    /**
     * 验证此字段
     */
    validate = async () => {
        const value = this.getValue();
        const rules = this.formRules;
        if (rules.length === 0) {
            this.errors = [];
            return [];
        }
        this.isvalidating = true;
        const errors = [];
        for (const rule of rules) {
            if (rule.required && (!value && value !== 0)) {
                errors.push(rule.message || `${this.label || this.prop}不能为空`);
                continue;
            }
            if (rule.pattern && !rule.pattern.test(value)) {
                errors.push(rule.message || `${this.label || this.prop}格式不正确`);
                continue;
            }
            if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {
                errors.push(rule.message || `${this.label || this.prop}最少${rule.min}个字符`);
                continue;
            }
            if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {
                errors.push(rule.message || `${this.label || this.prop}最多${rule.max}个字符`);
                continue;
            }
            if (rule.validator) {
                try {
                    await rule.validator(value, this.formRules);
                }
                catch (err) {
                    errors.push(err.message || rule.message || `${this.label || this.prop}验证失败`);
                }
            }
        }
        this.errors = errors;
        this.isvalidating = false;
        return errors;
    };
    resetValue = () => {
        this.errors = [];
    };
    getValue = () => {
        // 尝试从子元素中获取值
        const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-input-number, hb-textarea, hb-checkbox, hb-radio, hb-switch');
        if (input) {
            return input.modelValue;
        }
        return undefined;
    };
    render() {
        return (h("div", { key: '9ea6c55b9159936a572eef459adea96234fbe2fa', class: {
                'hb-form-item': true,
                'hb-form-item--error': this.errors.length > 0,
                'hb-form-item--validating': this.isvalidating,
            } }, this.label && (h("label", { key: '3f21b8777f7cddba09e797a706edfb9539fd2aa6', class: "hb-form-item__label", style: this.labelWidth ? { width: this.labelWidth } : undefined }, this.required && h("span", { key: 'fd89829e1469ff625d30e3b38624e9fc2a9566b4', class: "hb-form-item__required" }, "*"), this.label)), h("div", { key: '83ac6765623cf8c0c897ab945abdb0f1f0c3cde2', class: "hb-form-item__content" }, h("slot", { key: '83f01e59dc6f984141ff26dc58ebf72ff77a4fe1' }), this.errors.length > 0 && (h("div", { key: '17d938b71257dedb8154b4f019127f03b43f1910', class: "hb-form-item__error" }, this.errors[0])))));
    }
    static get is() { return "hb-form-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-item.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-item.css"]
        };
    }
    static get properties() {
        return {
            "prop": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5B57\u6BB5\u540D"
                },
                "getter": false,
                "setter": false,
                "attribute": "prop",
                "reflect": false,
                "defaultValue": "''"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6807\u7B7E\u6587\u672C"
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false,
                "defaultValue": "''"
            },
            "labelWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6807\u7B7E\u5BBD\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "label-width",
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u5FC5\u586B"
                },
                "getter": false,
                "setter": false,
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "rules": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8BE5\u8868\u5355\u9879\u7684\u9A8C\u8BC1\u89C4\u5219"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'default' | 'small'",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8868\u5355\u5C3A\u5BF8"
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "validate": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => Promise<string[]>",
                    "resolved": "() => Promise<string[]>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u9A8C\u8BC1\u6B64\u5B57\u6BB5"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "async (): Promise<string[]> => {\n    const value = this.getValue();\n    const rules = this.formRules;\n\n    if (rules.length === 0) {\n      this.errors = [];\n      return [];\n    }\n\n    this.isvalidating = true;\n    const errors: string[] = [];\n\n    for (const rule of rules) {\n      if (rule.required && (!value && value !== 0)) {\n        errors.push(rule.message || `${this.label || this.prop}\u4E0D\u80FD\u4E3A\u7A7A`);\n        continue;\n      }\n      if (rule.pattern && !rule.pattern.test(value)) {\n        errors.push(rule.message || `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`);\n        continue;\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(rule.message || `${this.label || this.prop}\u6700\u5C11${rule.min}\u4E2A\u5B57\u7B26`);\n        continue;\n      }\n      if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {\n        errors.push(rule.message || `${this.label || this.prop}\u6700\u591A${rule.max}\u4E2A\u5B57\u7B26`);\n        continue;\n      }\n      if (rule.validator) {\n        try {\n          await rule.validator(value, this.formRules);\n        } catch (err: any) {\n          errors.push(err.message || rule.message || `${this.label || this.prop}\u9A8C\u8BC1\u5931\u8D25`);\n        }\n      }\n    }\n\n    this.errors = errors;\n    this.isvalidating = false;\n    return errors;\n  }"
            },
            "resetValue": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => {\n    this.errors = [];\n  }"
            },
            "getValue": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => any",
                    "resolved": "() => any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "(): any => {\n    // \u5C1D\u8BD5\u4ECE\u5B50\u5143\u7D20\u4E2D\u83B7\u53D6\u503C\n    const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-input-number, hb-textarea, hb-checkbox, hb-radio, hb-switch');\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  }"
            }
        };
    }
    static get states() {
        return {
            "errors": {},
            "isvalidating": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=FormItem.js.map
