import React , {forwardRef, useEffect} from 'react';
import { Modal , Form , Input , Button } from 'antd';
import './EAccount.scss';

function EducoderAccount({form , visible , onOk , email}){
  const { getFieldDecorator, validateFields , setFieldsValue } = form;

  useEffect(()=>{
    if(email){
      setFieldsValue({email})
    }
  },[email])

  function onSure(){
    validateFields((error,values)=>{
      if(!error){
        onOk(values);
      }
    })
  }
  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
  };
  return(
    <Modal 
      visible={visible}
      title="提示"
      width="500px"
      closable={false}
      footer={
        <Button type="primary" onClick={onSure}>确定</Button>
      }
      centered
    >
      <div>
        <p className="mb15 edu-txt-center" style={{maxWidth:"350px",margin:"0px auto"}}>
        为确保您能正常使用平台功能，请确认以下信息:
        </p>
        <Form {...layout}>
          <Form.Item label="邮箱">
            {getFieldDecorator("email",{
              rules:[{required:true,message:"请输入邮箱账号"}]
            })(
              <Input placeholder="请输入您的邮箱账号" width="220px"/>
            )}
          </Form.Item>
          <Form.Item label="密码">
            {getFieldDecorator("password",{
              rules:[{required:true,message:"请输入邮箱密码"}]
            })(
              <Input.Password placeholder="请输入您的邮箱密码" width="220px"/>
            )}
          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}
export default Form.create()(forwardRef(EducoderAccount));