@ywfe/materials-design/lowcode/_base/json-form-base-props.ts

YwDesign for lowcode

import { getPropValueWithPath, getPropsByDependence, hideProp, uuid } from '../_utils';
import { IPublicTypeFieldConfig } from '@alilc/lowcode-types';

// const primaryKeyConfig = {
//   name: 'primaryKey',
//   title: { label: '编号', tip: 'primaryKey | 编号' },
//   // display: 'none',
//   condition: hideProp,
//   defaultValue: (val: any) => {
//     if (val) return val;
//     return mockId();
//   },
//   setter: 'StringSetter',
// };
// 基础组件
const baseComponent = [
  {
    label: '输入框',
    value: 'Input',
  },
  {
    label: '长文本输入框',
    value: 'TextArea',
  },
  {
    label: '选择器',
    value: 'Select',
  },
  {
    label: '搜索框',
    value: 'SearchSelect',
  },
  {
    label: '级联选择器',
    value: 'CascaderSelect',
  },
  {
    label: '类目选择器',
    value: 'CategorySelect',
  },
  {
    label: '开关',
    value: 'Switch',
  },
  {
    label: '复选框',
    value: 'Checkbox',
  },
  {
    label: '单选按钮',
    value: 'RadioGroup',
  },
  {
    label: '复选组合',
    value: 'CheckboxGroup',
  },
  {
    label: '数字输入框',
    value: 'NumberPicker',
  },
  {
    label: '数字范围输入框',
    value: 'NumberRangePicker',
  },
  {
    label: '时间',
    value: 'TimePicker',
  },
  {
    label: '日期时间',
    value: 'DateTimePicker',
  },
  {
    label: '日期',
    value: 'DatePicker',
  },
  {
    label: '月份',
    value: 'MonthPicker',
  },
  {
    label: '时间范围',
    value: 'TimeRangePicker',
  },
  {
    label: '日期范围',
    value: 'DateRangePicker',
  },
  // {
  //   label: 'DateRangeGroup',
  //   value: 'DateRangeGroup',
  // },
  {
    label: '月范围',
    value: 'MonthRangePicker',
  },
  {
    label: '日期时间范围',
    value: 'DateTimeRangePicker',
  },
  {
    label: '树选择器',
    value: 'TreeSelect',
  },
];

// 预览组件
const previewComponent = [
  {
    label: '文本',
    value: 'PreviewText.Input',
  },
  {
    label: '选择项',
    value: 'PreviewText.Select',
  },
  {
    label: '树选择项',
    value: 'PreviewText.TreeSelect',
  },
  {
    label: '级联选择项',
    value: 'PreviewText.Cascader',
  },
  {
    label: '日期',
    value: 'PreviewText.DatePicker',
  },
  {
    label: '日期范围',
    value: 'PreviewText.DateRangePicker',
  },
  {
    label: '时间',
    value: 'PreviewText.TimePicker',
  },
  {
    label: '时间范围',
    value: 'PreviewText.TimeRangePicker',
  },
  {
    label: '数字',
    value: 'PreviewText.NumberPicker',
  },
];

const formItemListProps = {
  name: 'component',
  title: { label: '表单项组件', tip: 'component | 表单项组件' },
  defaultValue: 'Input',
  // important: true,
  supportVariable: false,
  setter: {
    componentName: 'SelectSetter',
    props: {
      options: [
        ...baseComponent,
        {
          label: 'InputGroup',
          value: 'InputGroup',
        },
        {
          label: 'RCArrayTable',
          value: 'RCArrayTable',
        },
        {
          label: 'RCArrayItems',
          value: 'RCArrayItems',
        },
        {
          label: 'FormGrid',
          value: 'FormGrid',
        },
        {
          label: 'FormGroup',
          value: 'FormGroup',
        },
        // {
        //   label: 'OrgSeletor',
        //   value: 'OrgSeletor',
        // },
        // {
        //   label: 'EmpSelector',
        //   value: 'EmpSelector',
        // },
        {
          label: '自定义组件',
          value: '',
        },
      ],
    },
  },
  extraProps: {
    // setValue: (target, value) => {
    // console.log('value', value);
    // // 组件补充
    // switch (value) {
    //   case 'Upload':
    //     target.parent.setPropValue('customComponent', {
    //       type: 'JSSlot',
    //       params: ['props', 'value', 'field', 'schema'],
    //       value: [
    //         {
    //           componentName: 'YwUpload',
    //           id: `node_${uuid()}`,
    //           props: {
    //             isOss: true,
    //             securityType: 'public',
    //             ossDir: '/common',
    //             onChange: {
    //               type: 'JSExpression',
    //               value: '(res)=>{ this.field.setValue(res[0]?.url || "")}',
    //             },
    //           },
    //         },
    //       ],
    //       id: `node_${uuid()}`,
    //     });
    //     break;
    //   case '':
    //   default:
    //     break;
    // }
    // },
  },
};

export const customComponentProps = {
  title: { label: '自定义组件', tip: 'customComponent | 自定义组件' },
  name: '_render',
  supportVariable: false,
  defaultValue: null,
  setter: {
    componentName: 'SlotSetter',
    title: '自定义组件插槽',
    hideParams: true,
    initialValue: {
      type: 'JSSlot',
      params: ['props', 'value', 'field', 'schema'],
      value: [],
    },
  },
  condition: (target: any) => {
    return !getPropValueWithPath(target, '.component');
  },
};

// export const writeOnlyProps = {
//   title: { label: '是否只写', tip: 'writeOnly | 自定义组件' },
//   name: 'writeOnly',
//   supportVariable: false,
//   condition: (target: any) => {
//     return [
//       'Input',
//       'Select',
//       'TreeSelect',
//       'DatePicker',
//       'DateRangePicker',
//       'TimePicker',
//       'TimeRangePicker',
//       'NumberPicker',
//     ].includes(getPropValueWithPath(target, '.component'));
//   },
//   extraProps: {
//     setValue: () => {},
//   },
// };
const labelConfig = {
  name: 'title',
  title: { label: '标题', tip: 'title｜ 标题' },
  display: 'inline',
  defaultValue: '表单项',
  isRequired: true,
  supportVariable: false,
  setter: {
    componentName: 'StringSetter',
    // props: {
    //   options: window.TitleOptions,
    // },
  },
  important: true,
};

const nameConfig = {
  name: 'name',
  title: {
    label: '表单关联字段',
    tip: 'name | 表单关联字段',
  },
  important: false,
  supportVariable: false,
  defaultValue: uuid(),
  setter: {
    componentName: 'MixedSetter',
    props: {
      setters: [
        {
          componentName: 'StringSetter',
        },
        {
          componentName: 'SelectSetter',
          props: {
            options: (window as any)?.NameOptions || [],
            showSearch: true,
          },
        },
      ],
    },
  },
};

const typeConfig = {
  name: 'type',
  title: { label: '类型', tip: 'type | 类型' },
  supportVariable: false,
  setter: {
    componentName: 'SelectSetter',
    props: {
      options: [
        {
          label: 'string',
          value: 'string',
        },
        {
          label: 'object',
          value: 'object',
        },
        {
          label: 'array',
          value: 'array',
        },
        {
          label: 'void',
          value: 'void',
        },
      ],
    },
    initialValue: 'string',
  },
  extraProps: {
    setValue: (target, value) => {
      target.parent.setPropValue('decorator', value === 'void' ? 'void' : 'FormItem');
    },
  },
};

export const sizeConfig = {
  name: 'size',
  title: {
    label: '尺寸',
    tip: 'size | 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。',
  },
  setter: {
    componentName: 'RadioGroupSetter',
    props: {
      options: [
        { label: '小', value: 'small' },
        { label: '中', value: 'medium' },
        { label: '大', value: 'large' },
      ],
    },
  },
  defaultValue: 'medium',
};

export const layoutConfig = {
  items: [
    {
      name: 'labelCol',
      title: { label: '标签宽度', tip: 'labelCol | 标签宽度' },
      setter: {
        componentName: 'NumberSetter',
        initialValue: 6,
      },
    },
    {
      name: 'wrapperCol',
      title: { label: '表单项宽度', tip: 'wrapperCol | 表单项宽度' },
      setter: {
        componentName: 'NumberSetter',
        initialValue: 10,
      },
    },
  ],
};

// const childFormConfig = {
//   name: 'childForm',
//   title: '开启子表单',
//   setter: {
//     componentName: 'SlotSetter',
//     initialValue: {
//       type: 'JSSlot',
//       visible: false,
//       value: [
//         {
//           componentName: 'ChildForm',
//           props: {
//             primaryKey: String(Math.floor(Math.random() * 10000)),
//             placeholder: '请在右侧面板添加表单项+',
//             placeholderStyle: {
//               height: '38px',
//               color: '#0088FF',
//               background: '#d8d8d836',
//               border: 0,
//               gridArea: 'span 4 / span 4',
//             },
//             columns: 3,
//             labelCol: {
//               fixedSpan: 4,
//             },
//             labelAlign: 'top',
//             emptyContent: '添加表单项',
//           },
//           children: [...new Array(3).keys()].map((item) => ({
//             componentName: 'FormInput',
//             props: {
//               formItemProps: {
//                 primaryKey: String(Math.floor(Math.random() * 10000) + item),
//                 label: '表单项',
//                 size: 'medium',
//                 device: 'desktop',
//                 fullWidth: true,
//               },
//               placeholder: '请输入',
//             },
//           })),
//         },
//       ],
//     },
//   },
// };

// const enumComponentsList = ['RadioGroup', 'Select', 'CheckboxGroup'];

const enumConfig: any = {
  name: 'enum',
  display: 'block',
  title: { label: '枚举', tip: 'enum | 枚举出表单项可选择的值' },
  supportVariable: false,
  condition: (target: any) => {
    const index = +target.parent.key;
    const { items } = target.node.propsData;
    if (enumComponentsList.indexOf(items[index].component) > -1) {
      return true;
    }
    return false;
  },
  defaultValue: null,
  setter: {
    componentName: 'MixedSetter',
    props: {
      setters: [
        {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'label',
                      display: 'inline',
                      title: { label: '名称', tip: 'label | 名称' },
                      setter: 'StringSetter',
                      important: true,
                      supportVariable: false,
                    },
                    {
                      name: 'value',
                      display: 'inline',
                      title: { label: '值', tip: 'value | 值' },
                      setter: {
                        componentName: 'MixedSetter',
                        props: {
                          setters: ['StringSetter', 'NumberSetter'],
                        },
                      },
                      important: true,
                    },
                  ],
                },
              },
              initialValue: () => {
                return {
                  label: '选项',
                  value: `id-${uuid()}`,
                };
              },
            },
          },
        },
        {
          componentName: 'JsonSetter',
        },
      ],
    },
  },
};

// const FormSchemaReaction = {
//   componentName: 'ObjectSetter',
//   props: {
//     config: {
//       items: [
//         {
//           name: 'dependencies',
//           title: {
//             label: '依赖字段',
//             tip: 'dependencies | 可以通过dependencies属性，设置关联字段。当关联字段的值发生变化时，会触发校验与更新',
//           },
//           supportVariable: false,
//           setter: {
//             componentName: 'StringSetter',
//             // dataSource: [],
//           },
//         },
//         {
//           name: 'target',
//           title: { label: '目标字段', tip: 'target | 主动联动配置项' },
//           supportVariable: false,
//           setter: {
//             componentName: 'StringSetter',
//             // dataSource: [],
//           },
//         },
//         {
//           name: 'effects',
//           title: { label: '生命周期', tip: 'effects | 执行生命周期' },
//           supportVariable: false,
//           setter: {
//             componentName: 'SelectSetter',
//             props: {
//               options: [
//                 {
//                   label: 'onFieldValueChange',
//                   value: 'onFieldValueChange',
//                 },
//                 {
//                   label: 'onFieldInputValueChange',
//                   value: 'onFieldInputValueChange',
//                 },
//                 {
//                   label: 'onFieldMount',
//                   value: 'onFieldMount',
//                 },
//                 {
//                   label: 'onFieldInit',
//                   value: 'onFieldInit',
//                 },
//               ],
//             },
//           },
//         },
//         {
//           name: 'fulfill',
//           title: { label: '满足条件', tip: 'fulfill | 满足条件' },
//           supportVariable: false,
//           setter: {
//             componentName: 'ObjectSetter',
//             props: {
//               config: {
//                 items: [
//                   {
//                     name: 'state',
//                     title: { label: '表单项状态', tip: 'state | 表单项状态' },
//                     setter: {
//                       componentName: 'ObjectSetter',
//                       props: {
//                         config: {
//                           items: [
//                             {
//                               name: 'value',
//                               title: { label: '值', tip: 'value | 值' },
//                               setter: 'StringSetter',
//                               supportVariable: false,
//                             },
//                             {
//                               name: 'visible',
//                               title: { label: '是否可见', tip: 'visible | 是否可见' },
//                               setter: 'StringSetter',
//                               supportVariable: false,
//                             },
//                             {
//                               name: 'disabled',
//                               title: { label: '是否禁用', tip: 'visible | 是否禁用' },
//                               setter: 'StringSetter',
//                               supportVariable: false,
//                             },
//                           ],
//                         },
//                       },
//                     },
//                   },
//                   {
//                     name: 'schema',
//                     title: { label: '表单项配置项', tip: 'schema | 表单项配置项' },
//                     supportVariable: false,
//                     setter: {
//                       componentName: 'SelectSetter',
//                       props: {
//                         options: [
//                           {
//                             label: 'x-component',
//                             value: 'x-component',
//                           },
//                         ],
//                       },
//                     },
//                   },
//                   {
//                     name: 'run',
//                     title: { label: '执行函数', tip: 'schema | 执行函数' },
//                     supportVariable: false,
//                     setter: {
//                       componentName: 'FunctionSetter',
//                     },
//                   },
//                 ],
//               },
//             },
//           },
//         },
//         {
//           name: 'otherwise',
//           title: { label: '否则', tip: 'otherwise | 否则' },
//           setter: {
//             componentName: 'ObjectSetter',
//             props: {
//               config: {
//                 items: [
//                   {
//                     name: 'state',
//                     title: { label: '表单项状态', tip: 'state | 表单项状态' },
//                     supportVariable: false,
//                     setter: {
//                       componentName: 'SelectSetter',
//                       props: {
//                         options: [
//                           {
//                             label: 'visible',
//                             value: 'visible',
//                           },
//                           {
//                             label: 'value',
//                             value: 'value',
//                           },
//                           {
//                             label: 'disabled',
//                             value: 'disabled',
//                           },
//                         ],
//                       },
//                     },
//                   },
//                   {
//                     name: 'schema',
//                     title: { label: '表单项配置项', tip: 'schema | 表单项配置项' },
//                     supportVariable: false,
//                     setter: {
//                       componentName: 'SelectSetter',
//                       props: {
//                         options: [],
//                       },
//                     },
//                   },
//                   {
//                     name: 'run',
//                     title: { label: '执行函数', tip: 'schema | 执行函数' },
//                     supportVariable: false,
//                     setter: {
//                       componentName: 'FunctionSetter',
//                     },
//                   },
//                 ],
//               },
//             },
//           },
//         },
//       ],
//     },
//   },
// };

export const descriptionProps = {
  title: { label: '描述', tip: 'description | 描述' },
  name: 'description',
  setter: 'StringSetter',
};

export const defaultValueProps = {
  title: { label: '默认值', tip: 'defaultValue | 默认值' },
  name: 'defaultValue',
  setter: {
    componentName: 'CustomJsonSetter',
    props: { btnText: '去配置', titleText: '配置数据' },
  },
  supportVariable: false,
};

export const readOnlyProps = {
  title: { label: '只读', tip: 'readOnly | 只读' },
  name: 'readOnly',
  setter: 'BoolSetter',
  supportVariable: false,
};
export const requiredProps = {
  title: { label: '必填', tip: 'required | 必填' },
  name: 'required',
  setter: 'BoolSetter',
  supportVariable: false,
};
export const disabledProps = {
  title: { label: '禁用', tip: 'disabled | 禁用' },
  name: 'disabled',
  setter: 'BoolSetter',
};

export const previewProps = {
  title: { label: '预览态', tip: '_preview | 预览态' },
  name: '_preview',
  setter: 'BoolSetter',
  condition: (target) => {
    return previewComponent
      .map((v) => v.value.split('.')[1])
      .includes(getPropValueWithPath(target, '.component'));
  },
};
// export const minItemsProps = {
//   title: { label: '最小条目数', tip: 'minItems | 最小条目数' },
//   name: 'minItems',
//   setter: 'NumberSetter',
//   supportVariable: false,
//   condition: (target: any) => {
//     return selectComponentsList.includes(getPropValueWithPath(target, '..component'));
//   },
// };
// export const maxItemsProps = {
//   title: { label: '最大条目数', tip: 'maxItems | 最大条目数' },
//   name: 'maxItems',
//   setter: 'NumberSetter',
//   supportVariable: false,
//   condition: (target: any) => {
//     return selectComponentsList.includes(getPropValueWithPath(target, '..component'));
//   },
// };
export const rulesProps = {
  title: { label: '校验规则', tip: 'rules | 校验规则' },
  name: 'rules',
  setter: {
    componentName: 'CustomJsonSetter',
    props: { btnText: '去配置', titleText: '配置数据' },
  },
  supportVariable: false,
};
export const decoratorProps = {
  name: 'decorator',
  title: { label: '表单装饰器', tip: 'decorator | 表单装饰器 默认通用，带字段校验布局配置等' },
  defaultValue: 'FormItem',
  setter: {
    componentName: 'RadioGroupSetter',
    props: {
      options: [
        {
          label: '通用',
          value: 'FormItem',
        },
        {
          label: '无',
          value: 'void',
        },
      ],
    },
  },
  supportVariable: false,
};
export const propsProps = {
  title: { label: '属性配置', tip: 'props | 属性配置' },
  name: 'props',
  setter: {
    componentName: 'CustomJsonSetter',
    props: { btnText: '去配置', titleText: '配置数据' },
  },
  extraProps: {
    setValue: (target, value) => {
      target.parent.setPropValue('decorator', value ? 'FormItem' : null);
    },
  },
  supportVariable: false,
  condition: (target: any) => {
    return getPropValueWithPath(target, '.decorator') === 'FormItem';
  },
};

export const getDataSourceProps = {
  title: { label: '动态数据源', tip: 'getDataSource | 动态数据源' },
  name: 'getDataSource',
  supportVariable: false,
  setter: {
    componentName: 'MixedSetter',
    props: {
      setters: [
        {
          componentName: 'SchemaFunctionSetter',
          props: {
            title: 'getDataSource',
            async: true,
            properties: {
              input: {
                type: 'object',
                properties: {
                  value: {
                    type: 'string',
                  },
                },
                required: ['value'],
              },
              body: {
                type: 'array',
                items: [
                  {
                    type: 'Function',
                    properties: {
                      template: 'RequestFunction',
                      variable: 'requestRes',
                      extraProps: {},
                    },
                  },
                  {
                    type: 'Function',
                    properties: {
                      template: 'TransformFunction',
                      variable: 'transformRes',
                      extraProps: {
                        source: '{{requestRes}}',
                        rules: {
                          data: [
                            '$.list',
                            {
                              label: '$.name',
                              value: '$.code',
                            },
                          ],
                        },
                      },
                    },
                  },
                ],
              },
              output: 'transformRes.data',
            },
          },
        },
      ],
    },
  },
};

// 拥有枚举选项组件
const enumComponentsList = ['RadioGroup', 'Select', 'CheckboxGroup', 'CheckboxGroup', 'RadioGroup'];
// 拥有select独有属性的组件
const selectComponentsList = ['Select', 'SearchSelect', 'CascaderSelect'];
// 业务选择器
const bizSelectorComponentsList = ['OrgSelector', 'EmpSelector'];
// 数字类型组件配置
const numberComponentsList = ['NumberPicker', 'NumberRangePicker'];
// 级联组件
const cascaderComponentsList = ['CascaderSelect', 'CategorySelect'];
// 拥有子组件的组件 复杂类型
const childComponentList = [
  'FormGroup',
  'RCArrayTable',
  'RCArrayItems',
  'ArrayCards',
  'InputGroup',
];

// const arrayComponentList = ['RCArrayTable', 'RCArrayItems'];
// 类input组件
const inputComponentsList = ['Input', 'NumberRangePicker'];

const inputComponentsProps = [
  {
    name: 'prefix',
    title: { label: '前缀', tip: 'prefix | 前缀' },
    supportVariable: false,
    setter: 'StringSetter',
  },
  {
    name: 'suffix',
    title: { label: '后缀', tip: 'suffix | 后缀' },
    supportVariable: false,
    setter: 'StringSetter',
  },
];
// TextArea专用componentProps
const textAreaComponentProps = [
  {
    title: { label: '显示文字个数', tip: 'showCount | 显示文字个数' },
    name: 'showCount',
    supportVariable: false,
    setter: 'BoolSetter',
  },
  {
    title: { label: '最长文字数量', tip: 'maxLength | 最长文字数量' },
    name: 'maxLength',
    supportVariable: false,
    setter: 'NumberSetter',
  },
];

const enumComponentProps = [
  {
    name: 'dict',
    title: { label: '字典数据源', tip: 'dict | 字典数据源' },
    supportVariable: true,
  },
];

const selectComponentProps = [
  {
    name: 'mode',
    title: { label: '设置Select的模式', tip: 'mode | 设置Select的模式' },
    supportVariable: false,
    setter: {
      componentName: 'SelectSetter',
      props: {
        hasClear: true,
        options: [
          {
            label: '多选 | multiple',
            value: 'multiple',
          },
          {
            label: '标签 | tags',
            value: 'tags',
          },
          {
            label: '单选 | single',
            value: 'single',
          },
        ],
      },
    },
  },
  {
    title: {
      label: '字段映射',
      tip: 'fieldNames | 自定义options中label value children的字段',
    },
    name: 'fieldNames',
    setter: {
      componentName: 'ObjectSetter',
      props: {
        config: {
          items: [
            {
              name: 'label',
              title: { label: '名称', tip: 'label | options中的名称' },
              propType: 'string',
              setter: 'StringSetter',
              supportVariable: false,
              isRequired: true,
            },
            {
              name: 'value',
              title: { label: '值', tip: 'value | options中的值' },
              propType: 'string',
              setter: 'StringSetter',
              supportVariable: false,
              isRequired: true,
            },
            {
              name: 'children',
              title: { label: '当前节点的子节点', tip: 'children | 当前节点的子节点' },
              propType: 'string',
              supportVariable: false,
              setter: 'StringSetter',
            },
          ],
        },
      },
    },
  },
  {
    title: { label: '最多显示多少个标签', tip: 'maxTagCount | 最多显示多少个标签' },
    name: 'maxTagCount',
    setter: 'NumberSetter',
    supportVariable: false,
  },
  {
    title: { label: '可搜索', tip: 'showSearch | 可搜索' },
    name: 'showSearch',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    name: 'optionFilterProp',
    title: { label: '搜索过滤属性', tip: 'optionFilterProp | 搜索时过滤对应的option属性' },
    supportVariable: false,
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          {
            label: 'label',
            value: 'label',
          },
          {
            label: 'value',
            value: 'value',
          },
        ],
      },
    },
  },
  {
    title: {
      label: '节点文本',
      tip: 'labelInValue | 如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性',
    },
    name: 'labelInValue',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  getDataSourceProps,
];
const cascaderComponentsProps = [
  {
    title: { label: '支持多选节点', tip: 'multiple | 支持多选节点' },
    name: 'multiple',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    title: {
      lable: '选中即发生改变',
      tip: 'changeOnSelect | 通过changeOnSelect设置是否选中即发生改变,允许只选中父节点，该属性仅在单选模式下有效',
    },
    name: 'changeOnSelect',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    title: 'loadData',
    name: 'loadData',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    title: {
      lable: '动态加载选项',
      tip: 'loadData | 用于动态加载选项，无法与 showSearch 一起使用',
    },
    name: 'loadData',
    supportVariable: false,
    setter: {
      componentName: 'FunctionSetter',
      props: {
        template: '(item) => item.label || item.value',
      },
    },
  },
];
const bizSelectorComponentProps = [
  ...selectComponentProps,
  {
    title: { label: '最小条目数', tip: 'minItems | 最小条目数' },
    name: 'minItems',
    setter: 'NumberSetter',
    supportVariable: false,
  },
  {
    title: { label: '最大条目数', tip: 'maxItems | 最大条目数' },
    name: 'maxItems',
    setter: 'NumberSetter',
    supportVariable: false,
  },
];
const numberComponentProps = [
  {
    name: 'formatter',
    title: { label: '格式化数据', tip: 'formatter | 格式化数据' },
    supportVariable: false,
    propType: 'func',
    setter: [
      {
        componentName: 'FunctionSetter',
        props: {
          template: 'formatter(value) { return "value + 1"}',
        },
      },
    ],
  },
  {
    name: 'formatter',
    title: { label: '格式化数据', tip: 'formatter | 格式化数据' },
    supportVariable: false,
    propType: 'func',
    setter: [
      {
        componentName: 'FunctionSetter',
        props: {
          template: 'formatter(value) { return "value + 1"}',
        },
      },
    ],
  },
];
const styleProps = {
  title: { label: '组件样式', tip: 'style | 组件样式' },
  name: 'style',
  setter: {
    componentName: 'CustomJsonSetter',
    props: { btnText: '去配置', titleText: '配置数据' },
  },
  supportVariable: false,
};

const arrayComponentProps = [
  {
    title: { label: '是否有边框', tip: 'bordered | 建议关闭' },
    name: 'bordered',
    setter: 'BoolSetter',
    supportVariable: false,
  },
];
export const componentPropsProps = {
  title: { label: '组件属性配置', tip: 'componentProps | 组件属性配置' },
  name: 'componentProps',
  display: 'accordion',
  setter: {
    componentName: 'MixedSetter',
    props: {
      setters: [
        {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                styleProps,
                {
                  name: 'placeholder',
                  title: { label: '空数据占位符', tip: 'placeholder | 空数据占位符' },
                  setter: 'StringSetter',
                  supportVariable: false,
                },
                {
                  title: { label: '是否支持清空', tip: 'allowClear | 是否支持清空' },
                  name: 'allowClear',
                  setter: 'BoolSetter',
                  supportVariable: false,
                },
                // 枚举相关字段
                ...getPropsByDependence(enumComponentProps, enumComponentsList, '..component'),
                // select类似组件配置项
                ...getPropsByDependence(selectComponentProps, selectComponentsList, '..component'),
                // 级联相关字段
                ...getPropsByDependence(
                  cascaderComponentsProps,
                  cascaderComponentsList,
                  '..component',
                ),
                // 类input组件配置
                ...getPropsByDependence(inputComponentsProps, inputComponentsList, '..component'),

                ...getPropsByDependence(numberComponentProps, numberComponentsList, '..component'),
                ...getPropsByDependence(
                  bizSelectorComponentProps,
                  bizSelectorComponentsList,
                  '..component',
                ),
                // TextArea Props
                ...getPropsByDependence(textAreaComponentProps, ['TextArea'], '..component'),
                ...getPropsByDependence(arrayComponentProps, ['RCArrayTable'], '..component'),
                // {
                //   title: { label: '人员接口配置', tip: 'getDataSource | 人员接口配置' },
                //   name: 'getDataSource',
                //   defaultValue: () => ({
                //     type: 'JSFunction',
                //     schema: {
                //       title: 'getDataSource',
                //       type: 'JSFunction',
                //       name: 'getDataSource',
                //       async: true,
                //       properties: {
                //         input: {
                //           type: 'object',
                //           properties: {
                //             value: {
                //               type: 'string',
                //               defaultValue: '',
                //             },
                //           },
                //           required: ['value'],
                //         },
                //         body: {
                //           type: 'array',
                //           items: [
                //             {
                //               type: 'Function',
                //               properties: {
                //                 template: 'RequestFunction',
                //                 variable: 'result',
                //                 extraProps: {
                //                   apiId: 'API_88_59650_323217f643c3e3f1fe7532e72ac01bb0748c97be',
                //                   params: { keyword: '{{value}}' },
                //                 },
                //               },
                //             },
                //           ],
                //         },
                //       },
                //       required: ['input', 'body'],
                //     },
                //   }),
                //   setter: {
                //     componentName: 'FunctionSetter',
                //   },
                //   condition: (target: any) => {
                //     return ['EmpSelector'].includes(getPropValueWithPath(target, '..component'));
                //   },
                // },
                // {
                //   name: 'getOrgList',
                //   title: { label: '组织架构接口配置', tip: 'getOrgList | 组织架构接口配置' },
                //   supportVariable: false,
                //   defaultValue: () => ({
                //     type: 'JSFunction',
                //     schema: {
                //       title: 'getOrgList',
                //       type: 'JSFunction',
                //       name: 'getOrgList',
                //       async: true,
                //       properties: {
                //         input: {
                //           type: 'object',
                //           properties: {
                //             params: {
                //               type: 'object',
                //               defaultValue: {},
                //             },
                //           },
                //           required: ['params'],
                //         },
                //         body: {
                //           type: 'array',
                //           items: [
                //             {
                //               type: 'Function',
                //               properties: {
                //                 template: 'RequestFunction',
                //                 variable: 'result',
                //                 returnResult: '0',
                //                 extraProps: {
                //                   apiId: 'API_88_59642_323217f643c3e3f1fe7532e72ac01bb0748c97be',
                //                   params: {},
                //                 },
                //               },
                //             },
                //           ],
                //         },
                //       },
                //       required: ['input', 'body'],
                //     },
                //   }),
                //   setter: {
                //     componentName: 'FunctionSetter',
                //   },
                //   condition: (target: any) => {
                //     return ['EmpSelector'].includes(getPropValueWithPath(target, '..component'));
                //   },
                // },
                // {
                //   title: {
                //     label: '通过部门id查询下级用户',
                //     tip: 'getUserListForOrg | 通过部门id查询下级用户',
                //   },
                //   name: 'getUserListForOrg',
                //   defaultValue: () => ({
                //     type: 'JSFunction',
                //     schema: {
                //       title: 'getUserListForOrg',
                //       type: 'JSFunction',
                //       name: 'getUserListForOrg',
                //       async: true,
                //       properties: {
                //         input: {
                //           type: 'object',
                //           properties: {
                //             params: {
                //               type: 'object',
                //               defaultValue: {},
                //             },
                //           },
                //           required: ['params'],
                //         },
                //         body: {
                //           type: 'array',
                //           items: [
                //             {
                //               type: 'Function',
                //               properties: {
                //                 template: 'RequestFunction',
                //                 variable: 'result',
                //                 extraProps: {
                //                   apiId: 'API_88_59658_323217f643c3e3f1fe7532e72ac01bb0748c97be',
                //                   params: { orgId: '{{params.orgIds}}' },
                //                 },
                //               },
                //             },
                //           ],
                //         },
                //       },
                //       required: ['input', 'body'],
                //     },
                //   }),
                //   setter: {
                //     componentName: 'FunctionSetter',
                //   },
                //   condition: (target: any) => {
                //     return ['EmpSelector'].includes(getPropValueWithPath(target, '..component'));
                //   },
                // },
              ],
            },
            defaultValue: {},
          },
        },
        {
          componentName: 'CustomJsonSetter',
          props: { btnText: '去配置', titleText: '配置数据' },
        },
      ],
    },
  },
};

export const reactionsProps = {
  title: { label: '联动逻辑', tip: 'reactions | 联动逻辑' },
  name: 'reactions',
  setter: {
    componentName: 'CustomJsonSetter',
    props: { btnText: '去配置', titleText: '配置数据' },
  },
  supportVariable: false,
  // display: 'accordion',
  // setter: [
  //   {
  //     componentName: 'ArraySetter',
  //     props: {
  //       itemSetter: FormSchemaReaction,
  //     },
  //     initialValue: [],
  //   },
  //   FormSchemaReaction,
  //   {
  //     componentName: 'FunctionSetter',
  //   },
  // ],
};
export const tooltipProps = {
  title: { label: '提示信息', tip: 'tooltip | 提示信息' },
  name: 'tooltip',
  setter: 'StringSetter',
  supportVariable: false,
  condition: hideProp,
};

export const visibleProps = {
  title: { label: '显示', tip: 'visible | 是否显示' },
  name: 'visible',
  supportVariable: true,
};

export const childrenProps = {
  title: { label: '子组件', tip: 'children | 子组件' },
  name: 'children',
  setter: {
    componentName: 'CustomJsonSetter',
    props: { btnText: '去配置', titleText: '配置数据' },
  },
  supportVariable: false,
  condition: (target: any) => {
    return childComponentList.includes(getPropValueWithPath(target, '.component'));
  },
};

export const arrayTableItemsProps = {
  type: 'object',
  setter: {
    componentName: 'ObjectSetter',
    props: {
      config: {
        items: [
          {
            name: '_children',
            condition: false,
            title: { label: '表格项配置', tip: 'children | 表格项配置' },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        labelConfig,
                        nameConfig,
                        typeConfig,
                        disabledProps,
                        previewProps,
                        requiredProps,
                        {
                          name: 'width',
                          title: { label: '列宽', tip: 'width | 列宽' },
                          supportVariable: false,
                          setter: 'NumberSetter',
                        },
                        defaultValueProps,
                        decoratorProps,
                        propsProps,
                        {
                          name: 'component',
                          title: { label: '表单项组件', tip: 'component | 表单项组件' },
                          defaultValue: 'Input',
                          // important: true,
                          supportVariable: false,
                          setter: {
                            componentName: 'SelectSetter',
                            props: {
                              options: [
                                ...baseComponent,
                                {
                                  label: '删除',
                                  value: 'RCArrayTable.Remove',
                                },
                                {
                                  label: '上移',
                                  value: 'RCArrayTable.MoveUp',
                                },
                                {
                                  label: '下移',
                                  value: 'RCArrayTable.MoveDown',
                                },
                                {
                                  label: '自定义组件',
                                  value: '',
                                },
                              ],
                            },
                          },
                        },
                        customComponentProps,
                        componentPropsProps,
                      ],
                    },
                  },
                  initialValue: {
                    title: '标题',
                    name: uuid(),
                    component: 'PreviewText.Input',
                    props: {
                      feedbackLayout: 'terse',
                    },
                  },
                },
              },
            },
          },
        ],
      },
    },
  },
  extraProps: {
    setValue: (target, value = []) => {
      const children = value.map((v) => {
        const { title = '标题', width, ...rest } = v;
        return {
          type: 'void',
          component: 'RCArrayTable.Column',
          decorator: 'void',
          componentProps: { title, align: 'left', width },
          children: [rest],
        };
      });
      target.parent.setPropValue('items', {
        type: 'object',
        decorator: 'void',
        children,
      });
      return children;
    },
  },
  condition: (target: any) => {
    return ['RCArrayTable'].includes(getPropValueWithPath(target, '.component'));
  },
};
export const arrayItemsItemsProps = {
  type: 'object',
  setter: {
    componentName: 'ObjectSetter',
    props: {
      config: {
        items: [
          // {
          //   name: '_type',
          //   title: { label: '配置项类型', tip: '_type | 配置项类型' },
          //   setter: {
          //     componentName: 'RadioGroupSetter',
          //     props: {
          //       options: [
          //         {
          //           title: '简单字符串',
          //           value: 'string',
          //         },
          //         {
          //           title: '复杂对象',
          //           value: 'object',
          //         },
          //       ],
          //     },
          //   },
          // },
          {
            name: '_children',
            condition: false,
            title: { label: '子表单项配置', tip: 'children | 子表单项配置' },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        labelConfig,
                        nameConfig,
                        typeConfig,
                        disabledProps,
                        previewProps,
                        requiredProps,
                        defaultValueProps,
                        decoratorProps,
                        propsProps,
                        {
                          name: 'component',
                          title: { label: '表单项组件', tip: 'component | 表单项组件' },
                          defaultValue: 'Input',
                          // important: true,
                          supportVariable: false,
                          setter: {
                            componentName: 'SelectSetter',
                            props: {
                              options: [
                                ...baseComponent,
                                {
                                  label: '删除',
                                  value: 'RCArrayItems.Remove',
                                },
                                {
                                  label: '上移',
                                  value: 'RCArrayItems.MoveUp',
                                },
                                {
                                  label: '下移',
                                  value: 'RCArrayItems.MoveDown',
                                },
                                {
                                  label: '自定义组件',
                                  value: '',
                                },
                              ],
                            },
                          },
                        },
                        componentPropsProps,
                      ],
                    },
                  },
                  initialValue: {
                    name: uuid(),
                    component: 'Input',
                    props: {
                      feedbackLayout: 'terse',
                    },
                  },
                },
              },
            },
          },
        ],
      },
    },
  },
  extraProps: {
    setValue: (target, value = []) => {
      // const children = value.map((v) => {
      //   const { title = '标题', ...rest } = v;
      //   console.log('rest', rest);
      //   return {
      //     type: 'void',
      //     component: 'Space',
      //     decorator: null,
      //     children: [rest],
      //   };
      // });
      target.parent.setPropValue('items', {
        type: 'void',
        component: 'Space',
        decorator: 'void',
        children: value,
      });
    },
  },
  condition: (target: any) => {
    return ['RCArrayItems'].includes(getPropValueWithPath(target, '.component'));
  },
};

// gpt相关项
// const gptProps = {
//   name: 'getTableData',
//   title: '数据请求',
//   supportVariable: false,
//   gpt: {
//     type: 'api',
//     name: '数据请求',
//     description: '数据请求',
//     funcParams: ['value', 'field'], // 配置函数的参数名字
//   },
//   setter: {
//     componentName: 'DatasourceSetter',
//   },
// };

export const BaseFormItemProps = [
  formItemListProps,
  customComponentProps,
  // primaryKeyConfig,
  labelConfig,
  nameConfig,
  typeConfig,
  requiredProps,
  disabledProps,
  previewProps,
  defaultValueProps,
  visibleProps,
  descriptionProps,
  rulesProps,
  propsProps,
  decoratorProps,
  enumConfig,
  arrayTableItemsProps,
  arrayItemsItemsProps,
  componentPropsProps,
  reactionsProps,
  childrenProps,
];

export const tableFormItemProps = [
  formItemListProps,
  nameConfig,
  typeConfig,
  descriptionProps,
  defaultValueProps,
  requiredProps,
  disabledProps,
  previewProps,
  decoratorProps,
  propsProps,
  rulesProps,
  reactionsProps,
  componentPropsProps,
  enumConfig,
];

export const FormItemsProps: IPublicTypeFieldConfig[] = [
  {
    name: 'items',
    title: { label: '表单项配置', tip: 'items | 表单项配置' },
    extraProps: {
      display: 'accordion',
      // defaultCollapsed: true,
    },
    setter: {
      componentName: 'MixedSetter',
      props: {
        setters: [
          {
            componentName: 'ArraySetter',
            props: {
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  descriptor: 'name',
                  config: {
                    items: BaseFormItemProps,
                  },
                },
                // initialValue: () => {
                //   const mockProps: any = {};
                //   BaseFormItemProps.forEach((item) => {
                //     if (item.defaultValue) {
                //       if (typeof item.defaultValue === 'function') {
                //         mockProps[item.name] = item.defaultValue();
                //       } else {
                //         mockProps[item.name] = item.defaultValue;
                //       }
                //     }
                //   });
                //   return {
                //     component: 'Input',
                //     ...mockProps,
                //   };
                // },
              },
            },
          },
          {
            componentName: 'CustomJsonSetter',
            props: { btnText: '去配置', titleText: '配置数据' },
          },
        ],
      },
    },
  },
];