import React,{useEffect,useState} from 'react';
import { Modal, Form, Input, Button } from 'antd';

const PwdForm = (props) => {
    useEffect(()=>{
        console.log(props)
    })
    return (
        <Modal
            title={'变更密码'}
            width={640}
            visible={props.pwdVisible}
            bodyStyle={{ padding: '32px 40px 1px 48px' }}
            footer={null}
            maskClosable={false}
            onCancel={() => {
                props.onCancel();
            }}
            destroyOnClose
        >
            <Form
                layout="vertical"
                preserve={false}
                labelCol={{
                    span: 4,
                }}
                initialValues={props.values}
                onFinish={props.onFinish}
            >
                <Form.Item name="id" hidden={true}>
                    <Input />
                </Form.Item>
                <Form.Item name="account" label="用户账户"  rules={[{ required: true}]}>
                    <Input placeholder="请输入用户账户" disabled={true}/>
                </Form.Item>
                <Form.Item name="oPwd" label="旧密码" rules={[{ required: true}]}>
                    <Input.Password placeholder="请输入旧密码" />
                </Form.Item>
                <Form.Item name="nPwd" label="新密码" rules={[{ required: true}]}>
                    <Input.Password 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 PwdForm;
