import React, { useState } from 'react';
import { Modal, Form, Input, Button, Select, DatePicker, Space, InputNumber } from 'antd';
import moment from 'moment';

const CreateForm = (props) => {
  const { RangePicker } = DatePicker;
  const { TextArea } = Input;

  const planTimes = [];
  if (props.values) {
    planTimes.push(props.values.planStartTime);
    planTimes.push(props.values.planEndTime);
  }
  props.values.planDate = planTimes;

  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={700}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
      maskClosable={false}
    >
      <Form
        layout="Horizontal"
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>

        <Form.Item name="planName" label="方案名称" rules={[{ required: true, max: 20, whitespace: true }]}>
          <Input placeholder="方案名称" />
        </Form.Item>

        <Form.Item name="planDate" label="选择时间" rules={[{ required: true }]}>
          <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>

        <Form.Item name="serviceFee" label="服务费比例" rules={[{ required: true }]}>
          <InputNumber step={0.01} min={0} max={1} defaultValue={0} precision={2} />
        </Form.Item>

        <Form.Item name="remark" label="备注" rules={[{ required: false, max: 255 }]}>
          <TextArea rows={4} placeholder="请输入备注" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
