content: import React from 'react'
  import PropTypes from 'prop-types'
  import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
  import city from '../../utils/city'
  
  const FormItem = Form.Item
  
  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  }
  
  const modal = ({
    visible,
    type,
    item = {},
    onOk,
    onCancel,
    form: {
      getFieldDecorator,
      validateFields,
      getFieldsValue,
    },
  }) => {
    function handleOk () {
      validateFields((errors) => {
        if (errors) {
          return
        }
        const data = {
          ...getFieldsValue(),
          key: item.key,
        }
        data.address = data.address.join(' ')
        onOk(data)
      })
    }
  
    const modalOpts = {
      title: `${type === 'create' ? 'Create User' : 'Update User'}`,
      visible,
      onOk: handleOk,
      onCancel,
      wrapClassName: 'vertical-center-modal',
    }
  
    return (
      <Modal {...modalOpts}>
        <Form layout="horizontal">
          <FormItem label="Name" hasFeedback {...formItemLayout}>
            {getFieldDecorator('name', {
              initialValue: item.name,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem label="NickName" hasFeedback {...formItemLayout}>
            {getFieldDecorator('nickName', {
              initialValue: item.nickName,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem label="Gender" hasFeedback {...formItemLayout}>
            {getFieldDecorator('isMale', {
              initialValue: item.isMale,
              rules: [
                {
                  required: true,
                  type: 'boolean',
                },
              ],
            })(
              <Radio.Group>
                <Radio value>Male</Radio>
                <Radio value={false}>Female</Radio>
              </Radio.Group>
            )}
          </FormItem>
          <FormItem label="Age" hasFeedback {...formItemLayout}>
            {getFieldDecorator('age', {
              initialValue: item.age,
              rules: [
                {
                  required: true,
                  type: 'number',
                },
              ],
            })(<InputNumber min={18} max={100} />)}
          </FormItem>
          <FormItem label="Phone" hasFeedback {...formItemLayout}>
            {getFieldDecorator('phone', {
              initialValue: item.phone,
              rules: [
                {
                  required: true,
                  pattern: /^1[34578]\d{9}$/,
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem label="Email" hasFeedback {...formItemLayout}>
            {getFieldDecorator('email', {
              initialValue: item.email,
              rules: [
                {
                  required: true,
                  pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem label="Address" hasFeedback {...formItemLayout}>
            {getFieldDecorator('address', {
              initialValue: item.address && item.address.split(' '),
              rules: [
                {
                  required: true,
                },
              ],
            })(<Cascader
              size="large"
              style={{ width: '100%' }}
              options={city}
              placeholder="Pick an address"
            />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }
  
  modal.propTypes = {
    form: PropTypes.object.isRequired,
    visible: PropTypes.bool,
    type: PropTypes.string,
    item: PropTypes.object,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
  }
  
  export default Form.create()(modal)
  