import React from 'react'
import router from 'umi/router'
import { Button, Form, Input, DatePicker } from 'antd'
import AddOn from './components/AddOn'

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 = values => {

  }

  const { getFieldDecorator } = props.form

  return (
    <div>
      <Form {...formItemLayout} onSubmit={handleSubmit}>
        <Form.Item label="收费组名称">
        {
          getFieldDecorator('billName', {
            rules: [
              {
                required: true,
                message: '请填写收费组名称',
              },
            ],
          })(
            <Input />
          )
        }
        </Form.Item>
        <Form.Item label="收费组说明">
        {
          getFieldDecorator('billExplain', {
            rules: [
              {
                required: true,
                message: '请填写收费组说明',
              },
            ],
          })(
            <Input />
          )
        }
        </Form.Item>
        <Form.Item label="截止时间">
        {
          getFieldDecorator('endDate', {
            rules: [
              {
                required: true,
                message: '请填写公告内容',
              },
            ],
          })(
            <DatePicker />
          )
        }
        </Form.Item>
        <Form.Item label=" " colon={false}>
          <AddOn />
        </Form.Item>
        <Form.Item {...tailFormItemLayout} >
          <Button type="primary" htmlType="submit">草稿</Button>
          <Button type="danger" style={{ marginLeft: '24px' }}>发布</Button>
          <Button style={{ marginLeft: '24px' }} onClick={() => router.go(-1)}>取消</Button>
        </Form.Item>
      </Form>
    </div>
  )
})
