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

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

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

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

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

  const handleSubmit = () => {
    validateFieldsAndScroll((error:any, values:any) => {
        if (error) return;
        updateMerchantPrice({
          ...values,
          merchant_data_api_id:record?.merchant_data_api_id,
        }).then(error=>{
            if(error){
            return notification.error({
                message:`修改商户单价失败!`,
                description:error,
              })
            }
            setIsModalOpen(false);
            refresh()
        })
    });
};

  return (
    <>
      <a onClick={showModal}>
        价格配置
      </a>
      <Modal title={`${record?.merchant_data_api_name}价格配置`} visible={isModalOpen} onOk={handleSubmit} cancelText='取消' okText='确认' onCancel={handleCancel}>
      <Form {...formItemLayout}>
            <Form.Item label='单价'>
            {getFieldDecorator('unit_price', {
                        initialValue: record?.unit_price,
                    })(<InputNumber  min={0} precision={2}/>)}
            </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

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