import React, { useEffect, useState } from 'react'
import { Form, Modal, Button, Input, InputNumber } from 'antd'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 6,
    },
  },
}

export default Form.create()(props => {

  const handleSubmit = e => {
    e.preventDefault()
    props.form.validateFields((err, values) => {
      if (!err) {
        props.onSubmit({
          ...(props.dataSource || {}),
          ...values
        })
      }
    })
  }

  useEffect(() => {
    if (props.visible) {
      props.form.setFieldsValue(props.dataSource || {})
    }
  }, [props.dataSource, props.visible])

  return (
    <Modal  footer={null} maskClosable={false} onCancel={props.onCancel} visible={props.visible}>
      <Form onSubmit={handleSubmit} {...formItemLayout}>
        <Form.Item label="名称">
          {
            props.form.getFieldDecorator('name', {
              rules: [{required: true, message: '请填写名称'}]
            })(<Input placeholder="请填写名称" />)
          }
        </Form.Item>
        <Form.Item label="电话">
          {
            props.form.getFieldDecorator('tel', {
              rules: [{required: true, message: '请填写电话'}]
            })(<Input placeholder="请填写电话" />)
          }
        </Form.Item>
        <Form.Item label="备注">
          {
            props.form.getFieldDecorator('remark')(<Input placeholder="请填写备注" />)
          }
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">确定</Button>
          <Button onClick={props.onCancel} style={{ marginLeft: '48px' }}>取消</Button>
        </Form.Item>
      </Form>
    </Modal>
  )
})
