import { MyPageContainer, usePageTabs } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard } from '@ant-design/pro-components';
import { useParams } from '@umijs/max';
import { Space, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import AssetInfo from '../modals/AssetInfo';
import AssetUpdate from '../modals/AssetUpdate';
import BindCompany from '../modals/BindCompany';
import Activities from '../table/Activities';
import Announcement from '../table/Announcement';
import AssetAccounts from '../table/AssetAccounts';
import MyAssetBuildings from '../table/AssetBuildings';
import AssetGrid from '../table/AssetGrid';
import ChargeStandard from '../table/ChargeStandard';
import ConvenienceServices from '../table/ConvenienceServices';

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: data?.name || title || '项目详情',
  });

  const loadShow = () => {
    let paramsId: any = { id: id ?? 0 };
    Apis.Asset.AssetProjects.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: <AssetInfo item={data} reload={() => loadShow()} />,
    // },
    {
      label: '楼栋管理',
      key: 'asset_buildings',
      closable: false,
      children: <MyAssetBuildings item={data} />,
    },
    {
      label: '楼栋划分',
      key: 'grid',
      closable: false,
      children: <AssetGrid item={data} />,
    },
    {
      label: '收费标准',
      key: 'charge_standard',
      closable: false,
      children: <ChargeStandard item={data} />,
    },
    {
      label: '收款账号',
      key: 'asset_accounts',
      closable: false,
      children: <AssetAccounts item={data} />,
    },
    {
      label: '项目公告',
      key: 'announcement',
      closable: false,
      children: <Announcement item={data} />,
    },
    {
      label: '项目活动',
      key: 'activities',
      closable: false,
      children: <Activities item={data} />,
    },
    {
      label: '便民服务',
      key: 'convenience_services',
      closable: false,
      children: <ConvenienceServices item={data} />,
    },
  ];
  return (
    <MyPageContainer title={data?.name || title || '项目详情'}>
      <ProCard
        title={`${data?.name} ${
          data?.alias_name ? `（${data?.alias_name}）` : ''
        }`}
        extra={
          <Space>
            <AssetInfo
              item={{ ...data, type: 'primary' }}
              title="查看"
              reload={loadShow}
            />
            <AssetUpdate item={data} title="项目" reload={loadShow} />
            <BindCompany item={data} title="机构" reload={loadShow} />
          </Space>
        }
      >
        <div>* 您可在以下页签中对应管理：楼栋管理、楼栋划分、收款账号；</div>
      </ProCard>
      <ProCard>
        <Tabs type="card" items={data?.id ? items : []} />
      </ProCard>
    </MyPageContainer>
  );
}