import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, DatePicker, Alert } from 'antd';
import Password from 'antd/lib/input/Password';

const AlterForm = (props) => {
  const formItemLayout = {
    labelCol: {
      sm: { span: 4 },
    },
    wrapperCol: {},
  };
  const tailFormItemLayout = {
    wrapperCol: {
      sm: {
        span: 500,
        offset: 1,
      },
    },
  };

  return (
    <Modal
      title="更新密码"
      width={700}
      visible={props.AlterModalVisible}
      footer={null} //底部内容
      initialValues={props.values}
      //取消
      onCancel={() => {
        props.onCancel();
      }}
      //关闭时销毁 Modal 里的子元素
      destroyOnClose
    >
      <Form {...formItemLayout} layout="Horizontal" preserve={false} onFinish={props.onFinish}>
        <Form.Item name="oldPwd" label="旧密码" rules={[{ required: true, max: 200 }]}>
          <Password placeholder="旧密码" />
        </Form.Item>
        <Form.Item name="newPwd" label="新密码" rules={[{ required: true, max: 200 }]}>
          <Password placeholder="新密码" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
            更新
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AlterForm;
