import snippets from './snippets';

export default {
  snippets,
  componentName: 'AMForm.Item',
  docUrl: 'https://mobile.ant.design/zh/components/form#formitem',
  title: '表单项',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'name',
      title: { label: '字段名', tip: '字段名' },
      isRequired: true,
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: ['StringSetter', 'JsonSetter', 'ExpressionSetter'],
        },
      },
      supportVariable: true,
    },
    {
      name: 'label',
      title: { label: '标签', tip: '标签' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'initialValue',
      title: {
        label: '默认值',
        tip: '设置子元素默认值，如果与 Form 的 initialValues 冲突则以 Form 为准',
      },
      propType: 'string',
      setter: 'StringSetter',
      supportVariable: true,
    },
    {
      name: 'mode',
      title: {
        label: '模式',
        tip: '当选择选择器模式时，会预设onClick事件',
      },
      propType: {
        type: 'oneOf',
        value: ['default', 'picker'],
      },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '默认',
                value: 'default',
              },
              {
                title: '选择器',
                value: 'picker',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'default',
    },
    {
      name: 'help',
      title: {
        label: '标签提示信息',
        tip: '标签提示信息，当需要对标签进行解释时，可以使用这个。',
      },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'required',
      title: {
        label: '必填标记',
        tip: '必填样式设置，仅控制外观，如有设置 rules，则会根据 rules 判断',
      },
      propType: 'bool',
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      name: 'hasFeedback',
      title: {
        label: '是否展示错误反馈',
        tip: '是否展示错误反馈',
      },
      propType: 'bool',
      defaultValue: true,
    },
    {
      name: 'extra',
      title: {
        label: '扩展',
        tip: 'extra | 表单项尾部的内容',
      },
      propType: {
        type: 'oneOfType',
        value: ['node'],
      },
      setter: {
        componentName: 'SlotSetter',
      },
    },
    {
      name: 'validateTrigger',
      title: { label: '校验时机', tip: '所有字段校验触发时机' },
      propType: {
        type: 'oneOf',
        value: ['onChange', 'onBlur'],
      },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '当前值变化时',
                value: 'onChange',
              },
              {
                title: '失去焦点时',
                value: 'onBlur',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'onChange',
    },
    {
      name: 'trigger',
      title: { label: '字段收集时机', tip: '设置收集字段值变更的时机' },
      propType: {
        type: 'oneOf',
        value: ['onChange', 'onBlur', 'onConfirm'],
      },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '当前值变化时',
                value: 'onChange',
              },
              {
                title: '失去焦点时',
                value: 'onBlur',
              },
              {
                title: '点击确认时',
                value: 'onConfirm',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'onChange',
    },
    {
      name: 'noStyle',
      title: {
        label: '隐藏标签',
        tip: '为 true 时不带样式，作为纯字段控件使用',
      },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      name: 'valuePropName',
      title: {
        label: '子组件值字段',
        tip: `子节点的值的字段，如 Switch 的是 'checked'`,
      },
      propType: 'string',
      defaultValue: 'value',
      setter: 'StringSetter',
      supportVariable: true,
    },
    {
      name: 'normalize',
      title: {
        label: 'event转换器',
        tip: `设置如何将 event 的值转换成字段值，如将上传组件的fileList作为value值传出`,
      },
      propType: 'func',
    },
    {
      name: 'shouldUpdate',
      title: {
        label: '是否更新值',
        tip: `自定义字段更新逻辑`,
      },
      propType: 'func',
    },

    {
      name: 'preserve',
      title: {
        label: '删除时保留值',
        tip: '当字段被删除时保留字段值',
      },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      type: 'group',
      title: '布局',
      display: 'accordion',
      items: [
        {
          name: 'hidden',
          title: {
            label: '是否隐藏',
            tip: '是否隐藏整个字段',
          },
          propType: 'bool',
          setter: 'BoolSetter',
          supportVariable: true,
        },
        {
          name: 'layout',
          title: { label: '表单布局', tip: '表单布局' },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '水平',
                    value: 'horizontal',
                  },
                  {
                    title: '垂直',
                    value: 'vertical',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          propType: { type: 'oneOf', value: ['horizontal', 'vertical'] },
          defaultValue: 'horizontal',
        },
      ],
    },

    {
      name: 'requiredobj',
      title: { label: '必填设置', tip: '必填设置' },
      propType: {
        type: 'shape',
        value: [
          {
            name: 'required',
            title: '是否必填',
            propType: 'bool',
            setter: 'BoolSetter',
            supportVariable: true,
            extraProps: {
              setValue(target: any, value: boolean) {
                // 同步 必填标记
                target.parent.parent.setPropValue('required', value);
              },
            },
          },
          {
            name: 'showMessage',
            title: '是否自定义错误信息提示',
            propType: 'bool',
            setter: 'BoolSetter',
          },
          {
            name: 'message',
            title: '错误信息提示',
            propType: 'string',
            setter: 'StringSetter',
            supportVariable: true,
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("requiredobj")?.showMessage',
            },
          },
        ],
      },
    },
    {
      name: 'typeobj',
      title: { label: '输入类型设置', tip: '输入类型设置' },
      propType: {
        type: 'shape',
        value: [
          {
            name: 'type',
            title: '输入类型',
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    title: '字符串',
                    value: 'string',
                  },
                  {
                    title: '邮箱',
                    value: 'email',
                  },
                  {
                    title: '网址',
                    value: 'url',
                  },
                ],
              },
            },
            propType: {
              type: 'oneOf',
              value: ['string', 'number', 'email', 'url'],
            },
          },
          { name: 'message', title: '错误信息提示', propType: 'string' },
        ],
      },
    },
    {
      name: 'lenobj',
      title: { label: '长度校验设置', tip: '长度校验设置' },
      propType: {
        type: 'shape',
        value: [
          // { name: 'len', title: '固定长度', propType: 'string' },
          { name: 'max', title: '最大长度', propType: 'number' },
          { name: 'min', title: '最小长度', propType: 'number' },
          { name: 'message', title: '错误信息提示', propType: 'string' },
        ],
      },
    },
    {
      name: 'patternobj',
      title: { label: '正则设置', tip: '正则设置' },
      propType: {
        type: 'shape',
        value: [
          { name: 'pattern', title: '正则', propType: 'string' },
          { name: 'message', title: '错误信息提示', propType: 'string' },
        ],
      },
    },
    {
      name: 'validator',
      title: {
        label: '自定义校验函数',
        tip: '自定义校验，接收 Promise 作为返回值',
      },
      propType: 'func',
    },
  ],
  configure: {
    component: {
      isContainer: true,
      nestingRule: { childWhitelist: [], parentWhitelist: [] },
    },
    supports: { style: true, className: true },
    advanced: {
      callbacks: {
        onNodeRemove: (removedNode, currentNode) => {
          if (!removedNode || !currentNode) {
            return;
          }
          const { children } = currentNode;
          // 若无children,则说明当前P组件内已为空,需要删除P组件本身
          if (children && children.length === 0) {
            currentNode.remove();
          }
        },
      },
    },
  },
};