import { MyBetaModalFormProps } from '@/common';
import { Apis } from '@/gen/Apis';
import CancelledBill from '@/pages/bills/summary/table/CancelledBill';
import PaidBill from '@/pages/bills/summary/table/PaidBill';

import UnpaidBill from '@/pages/bills/summary/table/UnpaidBill';
import { ProCard } from '@ant-design/pro-components';
import { useParams } from '@umijs/max';
import { Tabs } from 'antd';
import { useEffect, useState } from 'react';

export default function Show(props: MyBetaModalFormProps) {
  const { id } = useParams<{ id: string }>();
  const [data, setShow] = useState<any>({});

  const loadShow = () => {
    let paramsId: any = { asset_houses_id: id ?? 0 };
    Apis.HouseOrder.HousePrepayments.Show(paramsId).then((res) => {
      setShow(res?.data);
    });
  };

  useEffect(() => {
    loadShow();
  }, [id]);

  let items = [
    {
      label: '欠费账单',
      key: '1',
      closable: false,
      children: <UnpaidBill item={{ ...data, asset_houses_id: id }} />,
    },
    {
      label: '已付账单',
      key: '2',
      closable: false,
      children: <PaidBill item={{ ...data, asset_houses_id: id }} />,
    },
    {
      label: '作废账单',
      key: '3',
      closable: false,
      children: <CancelledBill item={{ ...data, asset_houses_id: id }} />,
    },
  ];

  return (
    <>
      {/* <SummaryInfo item={{ ...data, id: id }} reload={loadShow} /> */}
      <ProCard style={{ marginTop: 16 }}>
        <Tabs type="card" items={items} defaultActiveKey="1" size="small" />
      </ProCard>
    </>
  );
}
