import React, { useEffect, useState } from 'react';
import { Modal, Form, Select,TreeSelect, Button } from 'antd';
import api from './service';

const OrgForm = (props) => {
  const [OrgList, setOrgList] = useState([]);
  useEffect(() => {
    function initOrgList() {
      api.gettree().then((r) => {
        setOrgList(r.data);
      });
    }
    initOrgList();
  }, [props.values]);

  return (
    <Modal
      width={640}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={`给 ${props.values.name} 授权数据`}
      visible={props.updateModalVisible}
      footer={null}
      onCancel={() => props.onCancel()}
    >
      <Form
        preserve={false}
        labelCol={{
          span: 4,
        }}
        onFinish={props.onFinish}
        initialValues={props.values}
      >
        <Form.Item
            name="orgId"
            label="选择机构"
            rules={[{ required: true, message: '选择机构' }]}
          >
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={OrgList}
            multiple
            placeholder="选择机构"
            treeDefaultExpandAll
          />
          </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{float:'right'}}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default OrgForm;
