import React, { useState, useEffect,useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Modal, Form, Input, Button, TreeSelect,InputNumber  } from 'antd';
import { nanoid } from 'nanoid';
const CreateForm = (props) => {
  const [orgId,setorgId]=useState();
  const [form] = Form.useForm();
  useEffect(() => {
    console.log(props.values)
    if(props?.values?.id){
      form.setFieldsValue({
        id:props?.values?.id,
        name:props?.values?.name,
        code:props?.values?.code,
      })
      setorgId(props?.values?.orgId)
    }else{
      form.resetFields();
    }
  },[props.values])
  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"
        labelCol={{ span: 4 }}
        preserve={false}
        form={form}
        // 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: 50 }]}>
          <Input />
        </Form.Item>
        <Form.Item label={'菜谱名称'} name="name" rules={[{ required: true, max: 50 }]}>
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
