import ProCard from '@ant-design/pro-card';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import BasicInfo from './components/BasicInfo.jsx';
import ReimbursementPerson from './components/ReimbursementPerson';
import InvoiceDetail from './components/InvoiceDetail.jsx';
import { Button } from 'antd';
import { useRef } from 'react';

export default (props) => {
  const { location } = props;
  const { id } = location.query;
  const detailRef=useRef();
  const addDetail=()=>{
    detailRef.current.refrash();
  }
  return (
    <PageHeaderWrapper extra={[<Button key='addDetail' onClick={addDetail}>生成明细</Button>]}>
      <ProCard tabs={{ type: 'card' }} style={{ minHeight: '700px' }}>
        <ProCard.TabPane key={1} tab="基本信息">
          <BasicInfo invoiceId={id} />
          报销明细
          <InvoiceDetail ref={detailRef} invoiceId={id} />
        </ProCard.TabPane>
        <ProCard.TabPane key={2} disabled={!id} tab="报销人员">
          <ReimbursementPerson invoiceId={id} />
        </ProCard.TabPane>
      </ProCard>
    </PageHeaderWrapper>
  );
};
