text: import React from 'react';
  import { connect } from 'dva';
  import { Form, Input, Button, Alert, Divider } from 'antd';
  import router from 'umi/router';
  import { digitUppercase } from '@/utils/utils';
  import styles from './style.less';
  
  const formItemLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 19,
    },
  };
  
  @connect(({ form, loading }) => ({
    submitting: loading.effects['form/submitStepForm'],
    data: form.step,
  }))
  @Form.create()
  class Step2 extends React.PureComponent {
    render() {
      const { form, data, dispatch, submitting } = this.props;
      const { getFieldDecorator, validateFields } = form;
      const onPrev = () => {
        router.push('/form/step-form/info');
      };
      const onValidateForm = e => {
        e.preventDefault();
        validateFields((err, values) => {
          if (!err) {
            dispatch({
              type: 'form/submitStepForm',
              payload: {
                ...data,
                ...values,
              },
            });
          }
        });
      };
      return (
        <Form layout="horizontal" className={styles.stepForm}>
          <Alert
            closable
            showIcon
            message="After confirming the transfer, the funds will be directly credited to the other party's account and cannot be returned."
            style={{ marginBottom: 24 }}
          />
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="payment account">
            {data.payAccount}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="Accounts receivable">
            {data.receiverAccount}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="Payee Name">
            {data.receiverName}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="transfer amount">
            <span className={styles.money}>{data.amount}</span>
            <span className={styles.uppercase}>（{digitUppercase(data.amount)}）</span>
          </Form.Item>
          <Divider style={{ margin: '24px 0' }} />
          <Form.Item {...formItemLayout} label="Payment password" required={false}>
            {getFieldDecorator('password', {
              initialValue: '123456',
              rules: [
                {
                  required: true,
                  message: 'A password is required to make a payment',
                },
              ],
            })(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
          </Form.Item>
          <Form.Item
            style={{ marginBottom: 8 }}
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: {
                span: formItemLayout.wrapperCol.span,
                offset: formItemLayout.labelCol.span,
              },
            }}
            label=""
          >
            <Button type="primary" onClick={onValidateForm} loading={submitting}>
              submit
            </Button>
            <Button onClick={onPrev} style={{ marginLeft: 8 }}>
              Previous
            </Button>
          </Form.Item>
        </Form>
      );
    }
  }
  
  export default Step2;
  