import type { VNode, Reactive, Ref } from "vue";

export type ChildrenFn = ((names: Record<string, any>, model: Reactive<any>) => IFormItem[]);
export interface IFormItem {
  label: string;
  icon?: string;
  prop: string;
  type:
    // 内置类型--分组
    | "group"
    | "input"
    | "select"
    | "inputNumber"
    | "image"
    | "checkboxGroup"
    | "radioGroup"
    // 背景选择
    | "backgroundSelect"
    // 边框选择
    | "boderSelect"
    // 边框圆角选择
    | "boderRadiusSelect"
    // 阴影选择
    | "shodowSelect"
    // 内边距选择
    | "paddingSelect"
    // 旋转选择
    | "rotateSelect"
    // 透明度选择
    | "opacitySelect"
    // 颜色选择
    | "colorSelect"
    // 配色方案
    | "colorScheme"
    // 字体样式
    | "fontStyle"
    // 位置
    | "position"
    // 滑块
    | "slider"
    // 分割线
    | "divider"
    // 联动
    | 'dependency'
  rules?: any[];
  defaultValue?: any;
  // 分组表单项
  children?: IFormItem[] | ChildrenFn;
  // 组件属性
  fieldProps?: any;
  // 自定义渲染
  render?: (form: any) => VNode;
  // 提示内容
  tip?: string;
  // 联动表单字段名
  name?: string[]; 
  // 格式化数据
  format?: (formatModel: Ref<Record<string, any>>, value: any) => void;
  // 值转表单值
  valueToForm?: (value: any, model?: Record<string, any>) => any;
}


/**
 * 联动表单
 * type: 'dependency',
 * name: ['name1', 'name2'], // 用户需要监听变化的字段
 * // 动态返回children
 * children: ({name1, name2}) => {
 *  ...处理逻辑
 *  return [...其他表单项]
 * }
 *  */