import snippets from './snippets';

export default {
  componentName: 'AMFormArray',
  docUrl: 'https://mobile.ant.design/zh/components/form#formarray',
  title: '数组表单',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'name',
      title: { label: '字段名', tip: 'name | 字段名' },
      propType: {
        type: 'string',
        isRequired: true,
      },
    },
    {
      name: 'initialValue',
      title: { label: '默认值', tip: 'initialValue | 默认值，数组格式' },
      propType: 'object',
      setter: 'JsonSetter',
      supportVariable: true,
    },
    {
      name: 'renderChildren',
      title: {
        label: '子元素',
        tip: 'renderChildren | 插槽内的物料表达式可通过this.index 获取索引',
      },
      propType: 'func',
      setter: [
        {
          componentName: 'SlotSetter',
          title: '子元素插槽',
          initialValue: {
            type: 'JSSlot',
            params: ['index'],
            value: [
              {
                componentName: 'AMForm.Item',
                props: {
                  label: '表单项',
                  hasFeedback: false,
                  validateTrigger: 'onChange',
                  trigger: 'onChange',
                  noStyle: false,
                  valuePropName: 'value',
                  preserve: true,
                  layout: 'horizontal',
                  typeobj: {
                    message: '',
                  },
                  lenobj: {
                    max: 0,
                    min: 0,
                    message: '',
                  },
                  patternobj: {
                    pattern: '',
                    message: '',
                  },
                },
                children: [
                  {
                    componentName: 'AMInput',
                    props: {
                      type: 'text',
                      placeholder: '请输入',
                      disabled: false,
                      readOnly: false,
                      onlyShowClearWhenFocus: true,
                    },
                  },
                ],
              },
            ],
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'renderAdd',
      title: {
        label: '添加按钮',
        tip: 'renderAdd | 添加按钮',
      },
      propType: {
        type: 'oneOfType',
        value: ['node'],
      },
      setter: {
        componentName: 'SlotSetter',
        title: '添加按钮插槽',
        initialValue: {
          type: 'JSSlot',
          value: [
            {
              componentName: 'AMDiv',
              props: {
                children: '添加',
              },
            },
          ],
        },
      },
    },
    {
      name: 'renderHeader',
      title: {
        label: '头部内容',
        tip: 'renderHeader | 头部内容，可以通过this.field.index 获取索引，this.operation获取操作集，包含（add、remove、move）',
      },
      propType: 'func',
      setter: {
        componentName: 'SlotSetter',
        title: '头部插槽',
        initialValue: {
          type: 'JSSlot',
          params: ['index', 'remove', 'add', 'move'],
          value: [
            {
              componentName: 'AMText',
              props: {
                type: 'inherit',
                children: {
                  type: 'JSExpression',
                  value: '`第${this.index+1}项`',
                },
              },
            },
          ],
        },
      },
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onAdd',
          description: '新增表单项',
          template: '\tonAdd(operation,${extParams}){\n\t\t// 新增表单项\n\t\t);\n\t}\n',
        },
      ],
    },
  },
  snippets,
};