import { MyPageContainer } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard } from '@ant-design/pro-components';
import { useParams } from '@umijs/max';
import { Tabs } from 'antd';
import { useEffect, useState } from 'react';

import CarPortBillInfo from '../components/CarPortBillInfo';
import PaidBill from '../table/PaidBill';
import UnpaidBill from '../table/UnpaidBill';

export default function CarPortShow({ title = '车位账单详情' }) {
  const { id } = useParams<{ id: string }>();
  const [data, setData] = useState<any>({});

  const loadShow = () => {
    Apis.Asset.AssetCarPorts.Show({ id: Number(id) }).then((res) => {
      setData(res?.data);
    });
  };

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

  const billItem = { ...data, asset_car_ports_id: id };

  const items = [
    {
      label: '未缴账单',
      key: '1',
      closable: false,
      children: <UnpaidBill item={billItem} />,
    },
    {
      label: '已缴账单',
      key: '2',
      closable: false,
      children: <PaidBill item={billItem} />,
    },
    // {
    //   label: '退款账单',
    //   key: '4',
    //   closable: false,
    //   children: <MyRefund item={{ id, asset_car_ports_id: id }} />,
    // },
  ];

  return (
    <MyPageContainer
      title={title}
      enableTabs
      tabKey={`car-port-bill-detail-${id}`}
      tabLabel={data?.full_name || title}
    >
      <CarPortBillInfo item={data} reload={loadShow} />
      <ProCard style={{ marginTop: 16 }}>
        <Tabs type="card" items={items} defaultActiveKey="1" />
      </ProCard>
    </MyPageContainer>
  );
}
