import React from 'react';
import { connect } from 'dva';
import { Alert, Button, Form, Input, message, Row } from 'antd';
import styles from './changePW.less';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const colProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 24,
  xl: 24,
  style: {},
};

const ChangePW = ({
                    changePW,
                    dispatch,
                    form: {
                      setFieldsValue,
                      getFieldDecorator,
                      validateFieldsAndScroll,
                    },
                  }) => {
  function handleOk() {
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return;
      }
      if (values.newPwd !== values.newPwd2) {
        message.error('两次密码不一致', 3);
        return;
      }
      dispatch({ type: 'changePW/changePW', payload: values });
      setFieldsValue({ oldPwd: '', newPwd: '', newPwd2: '', });
    });
  }

  return (
    <div className="content-inner">
      <Alert message="密码需8位以上数字和字母的组合" type="warning" showIcon/>

      <Form className={styles.form}>
        <FormItem label="旧密码" {...formItemLayout}>
          {getFieldDecorator('oldPwd', {
            rules: [
              {
                required: true,
                message: '请输入旧密码',
              },
            ],
          })(<Input type="password" />)}
        </FormItem>

        <FormItem label="新密码" {...formItemLayout}>
          {getFieldDecorator('newPwd', {
            rules: [
              {
                required: true,
                message: '请输入新密码',
              },
            ],
          })(<Input type="password" />)}
        </FormItem>

        <FormItem label="确认新密码" {...formItemLayout}>
          {getFieldDecorator('newPwd2', {
            rules: [
              {
                required: true,
                message: '请再次输入新密码',
              },
            ],
          })(<Input type="password" />)}
        </FormItem>

        <Row>
          <Button type="primary" onClick={handleOk} loading={null}>
            重置密码
          </Button>
        </Row>
      </Form>
    </div>
  );
};

export default connect(({ changePW }) => ({ changePW }))(Form.create()(ChangePW));
