import React, { useState, useEffect,useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Modal, Form, Input, Button, TreeSelect,InputNumber  } from 'antd';
import {
  
} from '../services';
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,
        orgId:props?.values?.orgId,
        phone:props?.values?.phone,
        sort:props?.values?.sort,
        description:props?.values?.description,
        orgName:props?.values?.orgName,

      })
      setorgId(props?.values?.orgId)
    }else{
      form.resetFields();
    }
  },[props.values])
  const handleChange=(value, label, extra)=>{
    console.log(label)
    form.setFieldsValue({
      orgName:label[0]
    })
    setorgId(value)
  }
  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 name="orgName" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item label={'场景名称'} name="name" rules={[{ required: true, max: 50 }]}>
          <Input />
        </Form.Item>

        <Form.Item label={'所属机构'} name="orgId" rules={[{ required: true }]}>
          <TreeSelect allowClear treeDefaultExpandAll treeData={props.OrgList} onChange={handleChange} value={orgId}/>
        </Form.Item>
        <Form.Item label={'电话'} name="phone" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="sort" label="排序">
              <InputNumber min={1} decimalSeparator="0"/>
        </Form.Item>
        <Form.Item label={'描述'} name="description">
          <Input />
          </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
