pay-admin/src/pages/asset/dictionary/modals/HousesShow.tsx

import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import {
  AssetHousesOrientationEnum,
  AssetHousesOwnershipTypeEnum,
  AssetHousesStatusEnum,
  AssetHousesUsageEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space } from 'antd';
import { useCallback, useState } from 'react';

export default function info(props: MyBetaModalFormProps) {
  const [show, setShow] = useState<any>({});
  const [loading, setLoading] = useState(false);
  
  const getShow = useCallback(() => {
    if (loading || !props?.item?.id) return;
    
    setLoading(true);
    Apis.Asset.AssetHouses.Show({
      id: props?.item?.id,
    })
      .then((res) => {
        setShow(res?.data);
      })
      .catch(() => {
        return false;
      })
      .finally(() => {
        setLoading(false);
      });
  }, [props?.item?.id, loading]);

  // 只在弹窗打开时获取数据
  const handleOpen = useCallback(() => {
    if (!loading) {
      getShow();
    }
  }, [getShow, loading]);

  return (
    <MyModal
      title={props.title || '查看'}
      width="800px"
      onOpen={handleOpen}
      node={
        <ProCard extra={props.extra}>
          <ProDescriptions bordered>
            <ProDescriptions.Item label="房屋全名" span={2}>
              <Space>
                <span>【{show?.id}】</span>
                {show?.full_name}
              </Space>
            </ProDescriptions.Item>
            <ProDescriptions.Item label="房号">
              {show?.name}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="楼层">
              {show?.floor}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="房屋用途">
              <renderTextHelper.Tag
                Enums={AssetHousesUsageEnum}
                value={show?.usage}
                key="usage"
              />
            </ProDescriptions.Item>
            <ProDescriptions.Item label="产权性质">
              <renderTextHelper.Tag
                Enums={AssetHousesOwnershipTypeEnum}
                value={show?.ownership_type}
                key="ownership_type"
              />
            </ProDescriptions.Item>
            <ProDescriptions.Item label="建筑面积">
              {show?.built_area}m²
            </ProDescriptions.Item>
            <ProDescriptions.Item label="套内面积">
              {show?.inside_area}m²
            </ProDescriptions.Item>
            <ProDescriptions.Item label="计费面积">
              {show?.chargeable_area}m²
            </ProDescriptions.Item>
            <ProDescriptions.Item label="房屋状态">
              <renderTextHelper.Tag
                Enums={AssetHousesStatusEnum}
                value={show?.status}
                key="status"
              />
            </ProDescriptions.Item>
            <ProDescriptions.Item label="户型">
              {show?.room || ''}房{show?.hall || ''}厅{show?.bathroom || ''}卫
              {show?.kitchen || ''}厨{show?.balcony || ''}阳台
            </ProDescriptions.Item>
            <ProDescriptions.Item label="朝向">
              <renderTextHelper.Tag
                Enums={AssetHousesOrientationEnum}
                value={show?.orientation}
                key="orientation"
              />
            </ProDescriptions.Item>
          </ProDescriptions>
        </ProCard>
      }
    />
  );
}