import Invoice from '@/pages/Invoice/components/Invoice';
import { postServiceInvoiceGetInvoiceRecord } from '@/services';
import { ModalForm } from '@ant-design/pro-components';
import { Form } from 'antd';
import { useEffect, useState } from 'react';

export default ({ recordId, getRecord, button }) => {
  const [data, setData] = useState<any>({});
  useEffect(() => {
    const getData = async () => {
      let ret = await postServiceInvoiceGetInvoiceRecord({
        query: {
          id: recordId,
        },
      });
      setData(ret.data);
    };
    if (recordId) {
      getData();
    }
  }, []);
  const [form] = Form.useForm();
  return (
    <ModalForm
      title="预览发票"
      trigger={button ? button : <a type="primary">预览</a>}
      onOpenChange={(open) => {
        if (open && getRecord) {
          setData(getRecord());
        }
      }}
      width={1200}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
      }}
    >
      <hr />
      <Invoice data={data} />
    </ModalForm>
  );
};