import * as React from 'react';
import ModalForm from '../../../../components/modalForm';
import { Form, InputNumber, notification } from 'antd';
import { useUpdateOrderPrice } from '../../../../service/merchantOrder';
import { FormComponentProps } from 'antd/es/form';

const formItemLayout = {
    labelCol: {
        sm: { span: 6 },
    },
    wrapperCol: {
        sm: { span: 18 },
    },
};

interface UpdatePriceProps {
    record: any,
    refresh: () => void
}


const UpdateOrderPriceModalForm: React.FC<FormComponentProps & UpdatePriceProps> = props => {
    const [visible, setVisible] = React.useState(false)
    const { record, refresh, form } = props;
    const [state, updatePrice] = useUpdateOrderPrice()
    const { getFieldDecorator } = form;

    const { order_no } = record
    const handleSubmit = (e: any) => {
        form.validateFieldsAndScroll((err, values) => {
            const { price } = values
            updatePrice({ price, order_no }).then((error) => {
                if (error) {
                    return notification.error({
                        message: '更新价格失败',
                        description: error,
                    })
                }
                setVisible(false)
                refresh()
            })
        });

    };
    return (
        <>
            <a onClick={() => { setVisible(true) }}>修改价格</a>
            <ModalForm
                visible={visible}
                onCancel={() => setVisible(false)}
                onOk={handleSubmit}
                loading={state.loading}
            >
                <Form {...formItemLayout}>
                    <Form.Item label='总金额'>
                        {getFieldDecorator('price', {
                            initialValue:Number(record.price * record.count).toFixed(2)
                        })(<InputNumber min={0} />)}
                    </Form.Item>
                </Form>
            </ModalForm>
        </>
    );
};
export default Form.create<any>()(UpdateOrderPriceModalForm);
