import { MyBetaModalFormProps } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard } from '@ant-design/pro-components';
import { useParams } from '@umijs/max';
import { Badge, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import OccupantsHistory from '../table/OccupantsHistory';
import OccupantsNow from '../table/OccupantsNow';
import RegistersList from '../table/RegistersList';
import HouseInfo from './HouseInfo';
import SummaryInfo from './SummaryInfo';

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

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

  const loadTotalPayableSum = () => {
    Apis.Bill.HouseBills.SummaryShow({
      asset_houses_id: Number(id),
    })
      .then((res) => {
        setTotalPayableSum(res?.data?.total_payable_sum || 0);
      })
      .catch(() => setTotalPayableSum(0));
  };

  const loadPendingCount = () => {
    Apis.Archive.HouseRegisters.List({
      asset_houses_id: Number(id),
      status: 'Pending',
    }).then((res) => {
      setPendingCount(res?.meta?.total || 0);
    });
  };

  useEffect(() => {
    loadShow();
    loadPendingCount();
    loadTotalPayableSum();
  }, [props.item?.id]);

  let items = [
    {
      label: '当前客户',
      key: '1',
      closable: false,
      children: (
        <OccupantsNow
          item={{
            ...data,
            asset_houses_id: id,
            total_payable_sum: totalPayableSum,
          }}
          reload={() => {
            loadShow();
            loadPendingCount();
            loadTotalPayableSum();
          }}
        />
      ),
    },
    {
      label: '历史客户',
      key: '2',
      closable: false,
      children: <OccupantsHistory item={{ ...data, asset_houses_id: id }} />,
    },
    {
      label: (
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span>操作记录</span>
          {pendingCount > 0 && (
            <Badge count={pendingCount} size="small" overflowCount={99} />
          )}
        </div>
      ),
      key: '3',
      closable: false,
      children: (
        <RegistersList
          item={{ ...data, asset_houses_id: id }}
          reload={loadPendingCount}
        />
      ),
    },
  ];

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