import React from 'react';
import { Modal, Form, Input, Button, Select } from 'antd';
import { nanoid } from 'nanoid';

const CreateForm = (props) => {
  const { Option, OptGroup } = Select;
  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={640}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        layout="vertical"
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish} >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item label={"菜谱编码"} name="code" initialValue={nanoid(20)} rules={[{ required: true, max: 20 }]} >
          <Input />
        </Form.Item>
        <Form.Item label={"菜谱名称"} name="name" rules={[{ required: true, max: 20 }]} >
          <Input />
        </Form.Item>
        <Form.Item label={"排序"} name="sort" rules={[{ required: true }]} >
          <Input type="number" />
        </Form.Item>

        <Form.Item>
        <Button  htmlType="button" style={{float:'right',left:10}} onClick={props.onCancel} >
                        取消
                    </Button>
        <Button type="primary" htmlType="submit" style={{float:'right'}} >
                        保存
                    </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
