import { MyPageContainer, usePageTabs } 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 CustomerHouse from '../components/CustomerHouse';
import CustomerInfo from '../components/CustomerInfo';

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

  // 注册标签页
  const { addTab } = usePageTabs({
    tabKey: `customer-detail-${id}`,
    tabLabel: `${data?.name}档案` || title,
  });

  const loadShow = () => {
    let paramsId: any = { id: id ?? 0 };
    Apis.Archive.HouseOccupants.Show(paramsId).then((res) => {
      setShow(res?.data);
      // 更新标签页标题
      if (res?.data?.name) {
        addTab({
          key: `customer-detail-${id}`,
          label: `${res?.data?.name}档案`,
          path: `/customer/show/${id}`,
        });
      }
    });
  };

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

  let items = [
    {
      label: '关联房屋',
      key: '1',
      closable: false,
      children: (
        <CustomerHouse
          item={{ ...data, phone: data?.phone }}
          reload={() => {
            loadShow();
          }}
        />
      ),
    },
  ];

  return (
    <MyPageContainer title={title}>
      <CustomerInfo item={data} reload={loadShow} />
      <ProCard style={{ marginTop: 16 }}>
        <Tabs type="card" items={items} defaultActiveKey="1" size="small" />
      </ProCard>
    </MyPageContainer>
  );
}