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 BasicInfo from '../components/BasicInfo';
import BillInfo from '../components/BillInfo';
import MeterInfo from '../components/MeterInfo';
import Parking from '../components/Parking';
import WordorderInfo from '../components/WordorderInfo';

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

  // 注册当前页面为标签页
  // const { addTab } = usePageTabs({
  //   tabKey: `asset-show-${id}`,
  //   tabLabel: '详情',
  //   autoAdd: false,
  // });

  const loadShow = () => {
    let paramsId: any = { id: id ?? 0 };
    Apis.Asset.AssetHouses.Show(paramsId).then((res) => {
      setShow(res?.data);
      // 更新标签页名称为API返回的name
      // if (res?.data?.name) {
      //   addTab({
      //     key: `asset-show-${id}`,
      //     label: res.data.name,
      //     path: `/asset/${id}`,
      //   });
      // }
    });
  };
  useEffect(() => {
    loadShow();
  }, [id]);

  let items = [
    {
      label: '基本信息',
      key: 'info',
      closable: false,
      children: <BasicInfo item={{ id }} reload={() => loadShow()} />,
    },
    {
      label: '账单信息',
      key: 'bills',
      closable: false,
      children: <BillInfo item={{ id }} />,
    },
    {
      label: '仪表信息',
      key: 'meters',
      closable: false,
      children: <MeterInfo item={data} />,
    },
    {
      label: '报修工单',
      key: 'wordorders',
      closable: false,
      children: <WordorderInfo item={data} />,
    },
    {
      label: '车位',
      key: 'parkings',
      closable: false,
      children: <Parking item={data} />,
    },
  ];
  return (
    <MyPageContainer
      title={data?.name || title || '房屋详情'}
      enableTabs={false}
      tabKey="asset-show"
      tabLabel={data?.name || title || '房屋详情'}
    >
      <ProCard>
        <Tabs type="card" items={data?.id ? items : []} />
      </ProCard>
    </MyPageContainer>
  );
}
