import React, { useState } from 'react';
import { Modal, Form, Input, Button, Select, TreeSelect } from 'antd';
const CreateForm = (props) => {
  const { TextArea } = Input;
  return (
    <Modal
      title={props.values.id ? '用户编辑' : '用户新增'}
      width={640}
      visible={props.modalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        layout="horizontal"
        labelCol={{
          span: 4,
        }}
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="name" label="姓名" rules={[{ required: true, max: 64 }]}>
          <Input placeholder="请输姓名" />
        </Form.Item>
        <Form.Item name="account" label="账号" rules={[{ required: true, max: 64 }]}>
          <Input placeholder="请输入账号" />
        </Form.Item>
        {props.values.id ? (
          ''
        ) : (
          <Form.Item
            hidden={props.values.id ? true : false}
            name="password"
            label="密码"
            rules={[{ required: true, max: 64 }]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>
        )}
        <Form.Item name="orgId" label="上级机构" rules={[{ required: true, max: 64 }]}>
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={props.treeDatas}
            placeholder="请选择机构"
            treeDefaultExpandAll
          />
        </Form.Item>
        <Form.Item name="remark" label="备注">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
