import React, { useEffect, useRef, useState } from 'react'
import { Modal, Form, Input, DatePicker, Button } from 'antd'
import moment from 'moment'

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) {
        const startDate = values.startDate ? moment(values.startDate).format('YYYY-MM-DDT00:00:00[Z]') : undefined
        const endDate = values.endDate ? moment(values.endDate).format('YYYY-MM-DDT23:59:59[Z]') : undefined
        props.onSubmit({...values, startDate, endDate})
      }
    })
  }

  useEffect(() => {
    const vals = props.initialData || {}
    const startDate = vals.startDate ? moment(vals.startDate) : undefined
    const endDate = vals.endDate ? moment(vals.endDate) : undefined
    props.form.setFieldsValue({...vals, startDate, endDate})
  }, [props.initialData])

  return (
    <Modal title="收费信息" visible={props.visible} footer={null} maskClosable={false} onCancel={props.onCancel}>
      <Form {...formItemLayout} onSubmit={handleSubmit}>
        <Form.Item label="收费名称">
        {
          props.form.getFieldDecorator('billName', {
            rules: [
              { required: true, message: '请填写收费名称' },
            ],
          })(<Input placeholder="收费组名称" />)
        }
        </Form.Item>
        <Form.Item label="开始时间">
        {
          props.form.getFieldDecorator('startDate', {
            rules: [
              { required: true, message: '请选择开始时间' },
            ],
          })(
            <DatePicker placeholder="请选择开始时间" />
          )
        }
        </Form.Item>
        <Form.Item label="截止时间">
        {
          props.form.getFieldDecorator('endDate', {
            rules: [
              { required: true, message: '请选择截止时间' },
            ],
          })(
            <DatePicker placeholder="请选择截止时间" />
          )
        }
        </Form.Item>
        <Form.Item {...tailFormItemLayout} >
          <Button type="primary" htmlType="submit">确定</Button>
          <Button style={{ marginLeft: '24px' }} onClick={props.onCancel}>取消</Button>
        </Form.Item>
      </Form>
    </Modal>
  )
})
