import {Button, Flex, Form, Input, Space} from "antd";
import {useForm} from "antd/es/form/Form";
import useModal from "antd/es/modal/useModal";
import {get, post} from "../../../util/AjaxUtils.ts";
import useMessage from "antd/es/message/useMessage";
import {useEffect} from "react";

type FormDataType = {
    invoiceTitle: string;
    invoicePhone: string;
    invoiceNo: string;
    invoiceBank: string;
    invoiceAddress: string;
    invoiceAccount: string;
}

interface EditProps {
    invoiceInfoId: string;
    handleOk: () => void;
    handleCancel: () => void;
}

export default function InvoiceInfoSave(props: EditProps) {
    const [messageApi, messageContext] = useMessage();
    const [modal, modalContext] = useModal();
    const [form] = useForm<FormDataType>()

    useEffect(() => {
        if (!props.invoiceInfoId) {
            return;
        }
        get<FormDataType>({
            messageApi,
            url: `/api/invoice-info/get/${props.invoiceInfoId}`,
            onSuccess({data}) {
                form.setFieldsValue(data);
            }
        })
    }, [props.invoiceInfoId]);

    return (
        <>
            <Form
                name="basic"
                layout="vertical"
                form={form}
                onFinish={(values) => {
                    modal.confirm({
                        title: '提示',
                        content: '确定保存吗',
                        okText: '确定',
                        cancelText: '取消',
                        okButtonProps: {
                            style: {
                                backgroundColor: 'var(--color-primary)'
                            }
                        },
                        onOk: () => {
                            post<any>({
                                messageApi,
                                url: `/api/invoice-info/update/${props.invoiceInfoId}`,
                                body: values,
                                onSuccess() {
                                    messageApi.success('保存成功');
                                    props.handleOk();
                                }
                            })
                        }
                    })
                }}
            >
                <Form.Item
                    label="公司名称"
                    name="invoiceTitle"
                    rules={[{required: true, message: '请输入公司名称'}]}
                >
                    <Input placeholder="请输入公司名称"/>
                </Form.Item>
                <Form.Item
                    label="纳税人识别号"
                    name="invoiceNo"
                    rules={[{required: true, message: '请输入纳税人识别号'}]}
                >
                    <Input placeholder="请输入纳税人识别号"/>
                </Form.Item>
                <Form.Item
                    label="公司地址"
                    name="invoiceAddress"
                    rules={[{required: true, message: '请输入公司地址'}]}
                >
                    <Input placeholder="请输入公司地址"/>
                </Form.Item>
                <Form.Item
                    label="公司电话"
                    name="invoicePhone"
                    rules={[{required: true, message: '请输入公司电话'}]}
                >
                    <Input placeholder="请输入公司电话"/>
                </Form.Item>
                <Form.Item
                    label="开户行"
                    name="invoiceBank"
                    rules={[{required: true, message: '请输入开户行'}]}
                >
                    <Input placeholder="请输入开户行"/>
                </Form.Item>
                <Form.Item
                    label="开户行账号"
                    name="invoiceAccount"
                    rules={[{required: true, message: '请输入开户行账号'}]}
                >
                    <Input placeholder="请输入开户行账号"/>
                </Form.Item>
                <Flex justify="center">
                    <Space size={5}>
                        <Button type="primary" htmlType="submit"
                                style={{backgroundColor: 'var(--color-primary)'}}>保存</Button>
                        <Button type="default" onClick={() => {
                            props.handleCancel();
                        }}>关闭</Button>
                    </Space>
                </Flex>
            </Form>
            {messageContext}
            {modalContext}
        </>
    )
}