import * as React from 'react';
import ModalForm from '../../../../components/modalForm';
import { Form, Input, notification } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import { useUpdateProductAlias } from '../../../../service/permission';

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

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


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

    const { merchant_data_api_id } = record
    const handleSubmit = (e: any) => {
        form.validateFieldsAndScroll((err, values) => {
            const { alias } = values
            updateAlias(alias, merchant_data_api_id).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('alias', {
                            initialValue:record.alias,
                        })(<Input maxLength={27}/>)}
                    </Form.Item>
                </Form>
            </ModalForm>
        </>
    );
};
export default Form.create<any>()(UpdateProductAlias);
