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

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

        <Form.Item
          name="makeName"
          label="做法名称"
          rules={[{ required: true }]}
          defaultValue="0"
        >
          <Input placeholder="输入做法名称" />
        </Form.Item>
        <Form.Item
          name="makeKey"
          label="做法编码"
          rules={[{ required: true }]}
          defaultValue="0"
        >
          <Input placeholder="输入做法编码(只能用数字)" />
        </Form.Item>
        <Form.Item label={'是否生效'} name="status" rules={[{ required: true }]}>
          <Select placeholder="请选择状态">
            <OptGroup>
              <Select.Option value={0}>是</Select.Option>
              <Select.Option value={1}>否</Select.Option>
            </OptGroup>
          </Select>
        </Form.Item>
        <Form.Item
          name="effectiveDate"
          label="生效时间"
          rules={[{ required: true }]}
        >
          <DatePicker placeholder="输入生效时间" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default MakeCreateForm;
