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 HouseInfo from './components/HouseInfo';
import OccupantsHistory from './table/OccupantsHistory';
import OccupantsNow from './table/OccupantsNow';
import RegistersList from './table/RegistersList';

export default function Show({ title = '房屋详情' }) {
  const { id } = useParams<{ id: string }>();
  const [data, setShow] = useState<any>({});
  const loadShow = () => {
    let paramsId: any = { id: id ?? 0 };
    Apis.Asset.AssetHouses.Show(paramsId).then((res) => {
      setShow(res?.data);
    });
  };
  useEffect(() => {
    loadShow();
  }, [id]);

  let items = [
    {
      label: '当前客户',
      key: '1',
      closable: false,
      children: data?.id ? (
        <OccupantsNow
          item={{ ...data, asset_houses_id: id }}
          reload={() => loadShow()}
        />
      ) : (
        ''
      ),
    },
    {
      label: '历史客户',
      key: '2',
      closable: false,
      children: <OccupantsHistory item={{ ...data, asset_houses_id: id }} />,
    },
    {
      label: '操作记录',
      key: '3',
      closable: false,
      children: <RegistersList item={{ ...data, asset_houses_id: id }} />,
    },
  ];

  return (
    <MyPageContainer title={title}>
      <HouseInfo item={data} />
      <ProCard>
        <Tabs type="card" items={items} />
      </ProCard>
    </MyPageContainer>
  );
}