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([]);
  const [dataScopeType, setdataScopeType] = useState(0);
  useEffect(() => {
    function initOrgList() {
      api.gettree().then((r) => {
        setOrgList(r.data);
      });
    }
    initOrgList();
  }, [props.values]);
  const handleChange = (value) => {
    setdataScopeType(value)
    console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
  };

  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}
        layout="horizontal"
        labelCol={{
          span: 4,
        }}
        onFinish={props.onFinish}
        initialValues={props.values}
      >
        <Form.Item
          name="dataScopeType"
          label="授权范围"
          rules={[{ required: true, message: '请选择授权范围' }]}
        >
          <Select
            allowClear
            placeholder="请选择授权范围"
            onChange={handleChange}
          >
            <Select.Option value={1}>全部数据</Select.Option>
            <Select.Option value={2}>本部门及以下数据</Select.Option>
            <Select.Option value={3}>全部数据</Select.Option>
            <Select.Option value={4}>仅本人数据</Select.Option>
            <Select.Option value={5}>自定义数据</Select.Option>
          </Select>
        </Form.Item>
        {dataScopeType !=5 ? null: (
          <Form.Item
            name="sysOrgId"
            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;
