import type { Component } from "vue"
import type { FormItemRule } from "element-plus/es/components/form/src/types"

export type VbFormItem = {
  id?: string | (() => string)
  field: string
  label?: string
  show?: boolean | ((v?: any) => boolean)
  required?: boolean
  itemClass?: string
  class?: string
  itemStyle?: string
  style?: string
  type?: string
  component?:
    | "slot"
    | "Slot"
    | "innerText"
    | "text" //innerText
    | "VbSelect"
    | "VS" //VbSelect
    | "VbSelect"
    | "Dict" //DictSelect
    | "DictSelect"
    | "VS" //VbSelect
    | "VbSelectTree"
    | "VST" //VbSelectTree
    | "I" //ElInput
    | "S" //ElSelect
    | "C" //ElCheckboxGroup
    | "R" //ElRadioGroup
    | "D" //ElDatePicker
    | Component
  innerText?: string //component 为 innerText 时，优先显示的文本，否则会显示当前的字段值
  span?: number
  labelWidth?: number
  size?: "large" | "default" | "small"
  placeholder?: string
  rules?: Array<string | Array<FormItemRule> | FormItemRule> //全局规则的KEY 或 自定义的规则
  ruleFormat?: Array<Array<string | number> | undefined> //数组索引对应rules顺序,对应的rule是自定义的（或者没有format数据）要填undefined  eg: [[0,1],undfiend,["名称"]]
  data?:
    | Array<{
        label: string
        value: string | number
        class?: string
        style?: string
        disabled?: boolean | ((v: any) => boolean)
      }>
    | (() => Array<{
        label: string
        value: string | number
        class?: string
        style?: string
        disabled?: string | ((v: any) => boolean)
      }>)
  itemProps?: any // 注入到 el-form-item 的属性
  props?: any // 当 component 为渲染组件时，注入到渲染组件当中的属性
  listeners?: any // 当 component 为渲染组件时，注入到渲染组件当中的事件
}

export type VbFormRowItem = {
  children: VbFormItem[]
  gutter?: number
  className?: string
}