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

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

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

  return (
    <Modal  footer={null} maskClosable={false} onCancel={props.onCancel} visible={props.visible}>
      <Form onSubmit={handleSubmit}>
        <Form.Item label="收费说明" required>
          {
            props.form.getFieldDecorator('priceExplain')(<Input placeholder="简要描述即可" />)
          }
        </Form.Item>
        <Form.Item label="收费金额" required>
          {
            props.form.getFieldDecorator('price')(<InputNumber prefix="￥" placeholder="请填写金额比如: 100.00" min={0} style={{width: '100%'}} />)
          }
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">确定</Button>
          <Button onClick={props.onCancel} style={{ marginLeft: '48px' }}>取消</Button>
        </Form.Item>
      </Form>
    </Modal>
  )
})
