import { Button, Form, InputNumber, Modal, notification } from 'antd';
import { min } from 'moment';
import React, { useEffect, useState } from 'react';
import { useUpdateBillDetailChargeCount } from '../../../../service/accouting';

const formItemLayout = {
    labelCol: {
        sm: {span: 8},
    },
    wrapperCol: {
        sm: {span: 13},
    },
};

const UpdateChargeCount: React.FC<any> = (props:any) => {
    const { record,form,refresh } = props
    const { getFieldDecorator,validateFieldsAndScroll,resetFields } = form
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [state,updateBillRecharge] = useUpdateBillDetailChargeCount()
  const [chargeCount,setChargeCount] = useState<any>(record?.charge_count)

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

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

  const handleSubmit = () => {
    validateFieldsAndScroll((error:any, values:any) => {
        if (error) return;
        updateBillRecharge && updateBillRecharge({
          ...values,
          bill_detail_id:record?.bill_detail_id
        }).then(error=>{
            if(error){
            return notification.error({
                message:`${record?.data_api_name}设置失败`,
                description:error,
              })
            }
            setIsModalOpen(false);
            refresh()
            resetFields()
        })
    });
};

const onChargeCountChange = (values:any) => {
    setChargeCount(values+record?.charge_count)
}

  return (
    <>
      <a type="primary" onClick={showModal}>
        修改
      </a>
      <Modal title="实际计费查次修改" visible={isModalOpen} onOk={handleSubmit} cancelText='取消' okText='确认' onCancel={handleCancel}>
        <Form {...formItemLayout}>
            <Form.Item label={record?.data_api_name}>
            {getFieldDecorator('charge_count', {
                        initialValue: 0,
                    })(<InputNumber min={Number(-record?.charge_count)} onChange={onChargeCountChange}/>)}
            </Form.Item>
            <Form.Item label='修改后实际计费查次数'>
                {chargeCount}次
            </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

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