import type { ExtractPropTypes, PropType } from 'vue';
import type { InputAlign, InputConfirmType, InputLabelPosition, InputType } from '../../types/global';

/**
 * u-field 组件 Props 类型定义
 * @description 表单输入框属性
 */
export const FieldProps = {
    /** 自定义根节点样式 */
    customStyle: {
        type: [String, Object] as PropType<string | Record<string, any>>,
        default: () => ({})
    },
    /** 自定义根节点样式类 */
    customClass: {
        type: String as unknown as PropType<string>,
        default: ''
    },
    /** label左边的图标，限uView的图标名称 */
    icon: { type: String, default: '' },
    /** 输入框右边的图标名称，限uView的图标名称（默认false） */
    rightIcon: { type: String, default: '' },
    /** 方向属性 */
    arrowDirection: { type: String, default: 'right' },
    /** 是否必填，左边显示红色"*"号（默认false） */
    required: { type: Boolean, default: false },
    /** 输入框左边的文字提示 */
    label: { type: String, default: '' },
    /** 是否密码输入方式(用点替换文字)，type为text时有效（默认false） */
    password: { type: Boolean, default: false },
    /** 是否显示右侧清空内容的图标控件（默认true） */
    clearable: { type: Boolean, default: true },
    /** label的宽度，单位rpx（默认130） */
    labelWidth: { type: [Number, String] as PropType<string | number>, default: 130 },
    /** label的文字对齐方式（默认left） */
    labelAlign: { type: String as PropType<InputAlign>, default: 'left' },
    /** 输入框内容对齐方式（默认left） */
    inputAlign: { type: String as PropType<InputAlign>, default: 'left' },
    /** 左边通过icon配置的图标的颜色（默认var(--u-content-color)） */
    iconColor: { type: String, default: 'var(--u-content-color)' },
    /** 是否自动增高输入区域，type为textarea时有效（默认true） */
    autoHeight: { type: Boolean, default: true },
    /** 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息 */
    errorMessage: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
    /** 输入框的提示文字 */
    placeholder: { type: String, default: '' },
    /** placeholder的样式(内联样式，字符串)，如"color: var(--u-divider-color)" */
    placeholderStyle: { type: String, default: '' },
    /** 是否自动获得焦点（默认false） */
    focus: { type: Boolean, default: false },
    /** 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false） */
    fixed: { type: Boolean, default: false },
    /** 输入框绑定值 */
    modelValue: [Number, String],
    /** 输入框类型（text/textarea/password等，默认text） */
    type: { type: String as PropType<InputType>, default: 'text' },
    /** 是否不可输入（默认false） */
    disabled: { type: Boolean, default: false },
    /** 是否只读，禁止输入但可点击，样式不变，可触发click事件（默认false） */
    readonly: { type: Boolean, default: false },
    /** 最大输入长度，设置为 -1 的时候不限制最大长度（默认140） */
    maxlength: { type: [Number, String] as PropType<string | number>, default: 140 },
    /** 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done） */
    confirmType: { type: String as PropType<InputConfirmType>, default: 'done' },
    /** label位置（默认left）left-左边，top-上边 */
    labelPosition: { type: String as PropType<InputLabelPosition>, default: 'left' },
    /** 自定义输入框的样式，对象形式 */
    fieldStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
    /** 清除图标的大小，单位rpx（默认30） */
    clearSize: { type: [Number, String] as PropType<string | number>, default: 30 },
    /** 左侧图标样式 */
    iconStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
    /** 是否显示field的上边框（默认false） */
    borderTop: { type: Boolean, default: false },
    /** 是否显示field的下边框（默认true） */
    borderBottom: { type: Boolean, default: true },
    /** 是否自动去除输入内容首尾空格（默认true） */
    trim: { type: Boolean, default: true }
};

export type FieldProps = ExtractPropTypes<typeof FieldProps>;