import React, { useState, useEffect } from 'react';
import { Form, Modal, Button, Table, message, Input, Icon, Pagination } from 'antd';
import XForm, { FieldTypes } from '../../../components/XForm';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import router from 'umi/router';
import Upload from '../../../components/uploadImage/Upload'

const { Column, ColumnGroup } = Table;

const formItemLayout = {
    labelCol: {
        xs: { span: 6 },
        sm: { span: 6 },
    },
    wrapperCol: {
        xs: { span: 18 },
        sm: { span: 18 },
    },
};

const SelectContact = props => {

    const [data, setData] = useState([]);
    const [visible, setVisible] = useState(false);
    const [group, setGroup] = useState({ groupId: undefined, groupName: '充值' })

    useEffect(() => {

    }, [props.value])



    const handleOk = (e) => {
        props.form.validateFieldsAndScroll((err, values) => {
            console.log(values, "valuesvaluesvaluesvaluesvaluesvaluesvalues")

            if (!err) {
                request({ ...apis.fund.recharge, urlData: { id: props.accountId || '' }, data: { ...values, orgId: props.orgId } }).then((data) => {
                    message.info("操作成功")
                    setVisible(false)
                    props.onClick()
                })
            }
        });


    }

    const { getFieldDecorator } = props.form;
    const regMoney = /^(\d+|\d+\.\d{1,2})$/;
    return (
        <div>
            <span onClick={() => setVisible(true)}>{group.groupName}</span>

            <Modal
                visible={visible}
                title="确认充值"
                onOk={() => handleOk()}
                onCancel={() => setVisible(false)}
                footer={[
                    <Button key="back" size="large" onClick={() => setVisible(false)}>取消</Button>,
                    <Button key="submit" type="primary" size="large" onClick={() => handleOk()}>确认</Button>,
                ]}
            >
                <div>
                    <p style={{ color: 'red' }}>请先进行线下实际充值操作后再执行线上充值存档</p>
                    <Form {...formItemLayout} >

                        <Form.Item label="充值金额" >
                            {getFieldDecorator('rechargeAmount', {
                                rules: [
                                    { required: true, message: '充值金额不能为空' },
                                    {
                                        validator: (rule, value, callback) => {
                                            callback(value < 0.01 || value > 99999.99 ? '金额最多5位整数 2位小数' : !regMoney.test(value) ? '金额最多两位小数' : undefined)
                                        }
                                    }
                                ],
                            })(<Input type='number' placeholder="支持2位小数" addonAfter="元" />)}
                        </Form.Item>

                        <Form.Item label="充值凭证" help="可上传银行转账截图等作为查账线索">
                            {getFieldDecorator('certificateList', {
                                rules: [{ required: true }],
                            })(
                                <Upload />,
                            )}
                        </Form.Item>

                    </Form>
                </div>




            </Modal>
        </div>
    )
}

const WrappedRegistrationForm = Form.create()(SelectContact);
export default WrappedRegistrationForm;