import React, { useState, useEffect } from 'react';
import { Form, Modal, Button, Table, message, Input, InputNumber, 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'
import { regFenToYuan } from '@/utils/money';

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 = () => {
        props.form.validateFieldsAndScroll((err, values) => {
            console.log(values, "valuesvaluesvaluesvaluesvaluesvaluesvalues")
            if (!err) {

                request({
                    ...apis.fund.refund, urlData: { id: props.orderId }, data: {
                        orgId: props.orgId,
                        // amount: props.amount,
                        ...values,
                    }
                }).then(data => {
                    console.log(data)
                    message.success('操作成功')
                    setVisible(false)
                    // getList({ pageNum: 1, pageSize: 10, orderType: 'refund' });
                    props.onClick()
                })
            }
        });


    }

    const { getFieldDecorator } = props.form;
    const balance = regFenToYuan(props.realBalance)
    const regMoney = /^(\d+|\d+\.\d{1,2})$/;
    return (
        <>

            <Button key="back" size="large" onClick={() => setVisible(true)}>{group.groupName}</Button>
            {/* <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>

                    <Form {...formItemLayout} >
                        <Form.Item label="退款凭证">

                            <span>{regFenToYuan(props.amount)}元</span>

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

            </Modal>
        </>
    )
}

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