import { Button, Form, Input, InputNumber, Modal, notification } from 'antd';
import React, { useState } from 'react';
import { useMerchantCharge, useUpdateMerchantType } from '../../../service/accouting';

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

const { TextArea } = Input

const MerchantChargeModal: React.FC<any> = (props:any) => {
    const { record,form,refresh } = props
    const { getFieldDecorator,validateFieldsAndScroll,resetFields } = form
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [state,merchantCharge] = useMerchantCharge()

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    resetFields()
  };

  const handleSubmit = () => {
    validateFieldsAndScroll((error:any, values:any) => {
        if (error) return;
        merchantCharge({
          ...values,
          merchant_id:Number(record?.merchant_id),
        }).then(error=>{
            if(error){
            return notification.error({
                message:`充值失败!`,
                description:error,
              })
            }
            setIsModalOpen(false);
            refresh()
        })
    });
};

  return (
    <>
      <a onClick={showModal}>
        充值
      </a>
      <Modal title={`${record?.merchant_name}`} visible={isModalOpen} onOk={handleSubmit} cancelText='取消' okText='确认' onCancel={handleCancel}>
        <Form {...formItemLayout}>
            <Form.Item label='充值金额'>
            {getFieldDecorator('amount', {
                        initialValue: 0,
                    })(<InputNumber  min={0} precision={2}/>)}
            </Form.Item>
            <Form.Item label='备注'>
            {getFieldDecorator('remark', {
                        initialValue: '',
                    })(<TextArea  rows={4} />)}
            </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Form.create<any>()(MerchantChargeModal);