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

const formItemLayout = {
    labelCol: {
        sm: {span: 2},
    },
    wrapperCol: {
        sm: {span: 16},
    },
};
const { TextArea } = Input;

const AddBillRemark: React.FC<any> = (props:any) => {
    const { billId,form,refresh } = props
    const { getFieldDecorator,validateFieldsAndScroll,resetFields } = form
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [state,addBillRemark] = useAddBillDetailRemark()

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

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

  const handleSubmit = () => {
    validateFieldsAndScroll((error:any, values:any) => {
        if (error) return;
        addBillRemark && addBillRemark({
          ...values,
          bill_id:Number(billId),
        }).then(error=>{
            if(error){
            return notification.error({
                message:`添加备注失败!`,
                description:error,
              })
            }
            setIsModalOpen(false);
            refresh()
            resetFields()
        })
    });
};

  return (
    <>
      <Button type="primary" onClick={showModal}>
        添加账单详情备注
      </Button>
      <Modal title="添加备注" visible={isModalOpen} onOk={handleSubmit} cancelText='取消' okText='确认' onCancel={handleCancel}>
        <Form {...formItemLayout}>
            <Form.Item label='备注'>
            {getFieldDecorator('remark', {
                        initialValue: '',
                    })(<TextArea  rows={4}/>)}
            </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

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