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

const CreateForm = (props) => {
    const [orgData,setOrgData] =useState();

    useEffect(()=>{
        api.GetOrg().then(r=>{
            var arr = [];
            for (var key in r.data) {
                arr.push(<Select.Option value={key}>{r.data[key]}</Select.Option>)
            }
            setOrgData(arr);
        })
    },[props.values])

    return (
        <Modal
            title={props.values.id ? '编辑用户' : '新建用户'}
            width={640}
            visible={props.modalVisible}
            maskClosable={false}
            bodyStyle={{ padding: '32px 40px 1px 48px' }}
            footer={null}
            onCancel={() => {
                props.onCancel();
            }}
            destroyOnClose
        >
            <Form
                preserve={false}
                layout="horizontal"
                labelCol={{
                    span: 6,
                }}
                initialValues={props.values}
                onFinish={props.onFinish}
            >
                <Form.Item name="id" hidden={true}>
                    <Input />
                </Form.Item>
                <Form.Item name="sysOrgId" label="所属组织" rules={[{ required: true }]}>
                    {/* <Select placeholder="请选择所属组织">
                        {orgData}
                    </Select> */}
                    <TreeSelect
                        style={{ width: '100%' }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        treeData={props.treeDatas}
                        placeholder="请选择上级名称"
                        treeDefaultExpandAll
                    />
                </Form.Item>

                <Form.Item name="account" label="登录账户(手机号)"
                tooltip="初始密码为:123456"
                 rules={[{ required: true, max: 255,pattern: /0?(13|14|15|18|17)[0-9]{9}$/,
message: '手机号格式不正确'}]}>
                    <Input placeholder="请输入登录账户"  disabled={props.values.id?true:false} />
                </Form.Item>
                <Form.Item name="name" label="用户姓名" rules={[{ required: true, max: 255 }]}>
                    <Input placeholder="请输入用户姓名" />
                </Form.Item>
                {/* <Form.Item name="phone" label="用户手机" rules={[{ required: true,max: 20,pattern: /0?(13|14|15|18|17)[0-9]{9}$/,
message: '手机号格式不正确' }]}>
                    <Input placeholder="请输入用户手机" />
                </Form.Item> */}
                
                <Form.Item>
                <Button  htmlType="button" style={{float:'right',left:10}} onClick={props.onCancel} >
                        取消
                    </Button>
        <Button type="primary" htmlType="submit" style={{float:'right'}} >
                        保存
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default CreateForm;
