import { Form, Select } from 'antd';
const { Option } = Select;
const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const prefixSelector = (
  <Form.Item name="prefix" noStyle>
    <Select style={{ width: 70 }}>
      <Option value="86">+86</Option>
      <Option value="87">+87</Option>
    </Select>
  </Form.Item>
);

const onclick = (form: any) => {
  console.log(form.getFieldValue());

  form.resetFields();
};

const normFile = (e: any) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

const formData = {
  itemColumn: [
    {
      key: '1',
      type: 'input',
      label: 'input',
      name: 'input',
      placeholder: 'please input',
      addonBefore: prefixSelector,
      rules: [{ required: true, message: 'Please input your password!' }],
    },
    {
      key: '2',
      type: 'inputPassword',
      label: 'Password',
      name: 'Password',
      placeholder: 'please input',
      rules: [{ required: true, message: 'Please input your password!' }],
    },
    {
      key: '3',
      type: 'checkbox',
      name: 'checkbox',
      wrapperCol: { offset: 0, span: 16 },
      label: 'checkbox',
      options: [
        {
          key: 'checkbox-1',
          valuePropName: 'checked',
          name: 'checkbox1',
          value: 'checkbox1',
        },
        {
          key: 'checkbox-2',
          valuePropName: 'checked',
          name: 'checkbox2',
          value: 'checkbox2',
        },
      ],
    },
    {
      key: '4',
      type: 'radio',
      name: 'radio',
      wrapperCol: { offset: 0, span: 16 },
      label: 'radio',
      options: [
        {
          key: 'radio-1',
          value: 'radio-1',
        },
        {
          key: 'radio-2',
          value: 'radio-2',
        },
      ],
    },
    {
      key: '5',
      type: 'select',
      name: 'select',
      wrapperCol: { offset: 0, span: 16 },
      label: 'select',
      options: [
        {
          key: 'demo-1',
          value: 'demo-1',
        },
        {
          key: 'demo-2',
          value: 'demo-2',
        },
      ],
    },
    {
      key: '6',
      type: 'treeSelect',
      name: 'treeSelect',
      wrapperCol: { offset: 0, span: 16 },
      label: 'treeSelect',
      treeData: [
        {
          title: 'Light',
          value: 'light',
          children: [{ title: 'Bamboo', value: 'bamboo' }],
        },
      ],
    },
    {
      key: '7',
      type: 'cascader',
      name: 'cascader',
      wrapperCol: { offset: 0, span: 16 },
      label: 'cascader',
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
            },
          ],
        },
      ],
    },
    {
      key: '8',
      type: 'datePicker',
      name: 'datePicker',
      wrapperCol: { offset: 0, span: 16 },
      label: 'datePicker',
    },
    {
      key: '9',
      type: 'rangePicker',
      name: 'rangePicker',
      wrapperCol: { offset: 0, span: 16 },
      label: 'rangePicker',
    },
    {
      key: '10',
      type: 'inputNumber',
      name: 'inputNumber',
      rules: [{ required: true, message: 'Please input your number!' }],
      wrapperCol: { offset: 0, span: 16 },
      label: 'inputNumber',
    },
    {
      key: '11',
      type: 'textArea',
      name: 'textArea',
      wrapperCol: { offset: 0, span: 16 },
      label: 'textArea',
      row: 4,
    },
    {
      key: '12',
      type: 'switch',
      name: 'switch',
      valuePropName: 'checked',
      wrapperCol: { offset: 0, span: 16 },
      label: 'switch',
    },
    {
      key: '13',
      type: 'upload',
      name: 'upload',
      valuePropName: 'fileList',
      listType: 'picture-card',
      url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      wrapperCol: { offset: 0, span: 16 },
      label: 'upload',
      normFile: normFile,
    },
    {
      key: '18',
      type: 'button',
      wrapperCol: { offset: 8, span: 16 },
      columns: [
        {
          key: 'button-1',
          btnType: 'primary',
          htmlType: 'submit',
          value: 'Submit',
        },
        {
          key: 'button-2',
          htmlType: 'button',
          value: 'reset',
          onclick: onclick,
        },
      ],
    },
  ],
  config: {
    name: 'basic',
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
    style: { maxWidth: 600 },
    initialValues: {},
    onFinish: onFinish,
    onFinishFailed: onFinishFailed,
    autoComplete: 'off',
  },
};

export default formData;