pay-admin/src/pages/archive/components/HouseInfo.tsx

import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import {
  AssetHousesOrientationEnum,
  AssetHousesOwnershipTypeEnum,
  AssetHousesStatusEnum,
  AssetHousesUsageEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space } from 'antd';
import ChangeStatus from './modals/ChangeStatus';

export default function info(props: MyBetaModalFormProps) {
  const { item } = props;

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <ProCard title="基本信息">
        <ProDescriptions bordered>
          <ProDescriptions.Item label="房屋全名" span={2}>
            <div style={{ fontWeight: 'bold' }}>{item?.full_name}</div>
          </ProDescriptions.Item>
          <ProDescriptions.Item label="房屋状态">
            <Space size="large">
              <renderTextHelper.Tag
                Enums={AssetHousesStatusEnum}
                value={item?.status}
                key="status"
              />
              <ChangeStatus
                item={props?.item}
                title="修改"
                reload={props?.reload}
              />
            </Space>
          </ProDescriptions.Item>

          <ProDescriptions.Item label="楼层">
            {item?.floor}层
          </ProDescriptions.Item>

          <ProDescriptions.Item label="房屋用途">
            <renderTextHelper.Tag
              Enums={AssetHousesUsageEnum}
              value={item?.usage}
              key="usage"
            />
          </ProDescriptions.Item>
          <ProDescriptions.Item label="产权性质">
            <renderTextHelper.Tag
              Enums={AssetHousesOwnershipTypeEnum}
              value={item?.ownership_type}
              key="ownership_type"
            />
          </ProDescriptions.Item>
          <ProDescriptions.Item label="建筑面积">
            <span style={{ fontWeight: 'bold', color: '#fa8c16' }}>
              {item?.built_area}m²
            </span>
          </ProDescriptions.Item>
          <ProDescriptions.Item label="套内面积">
            <span style={{ fontWeight: 'bold', color: '#fa8c16' }}>
              {item?.inside_area}m²
            </span>
          </ProDescriptions.Item>
          <ProDescriptions.Item label="计费面积">
            <span style={{ fontWeight: 'bold', color: '#52c41a' }}>
              {item?.chargeable_area}m²
            </span>
          </ProDescriptions.Item>

          <ProDescriptions.Item label="户型">
            <div style={{ fontSize: '14px' }}>
              {item?.room || 0}房{item?.hall || 0}厅{item?.bathroom || 0}卫
              {item?.kitchen || 0}厨{item?.balcony ? `${item.balcony}阳台` : ''}
            </div>
          </ProDescriptions.Item>
          <ProDescriptions.Item label="朝向">
            <renderTextHelper.Tag
              Enums={AssetHousesOrientationEnum}
              value={item?.orientation}
              key="orientation"
            />
          </ProDescriptions.Item>
        </ProDescriptions>
      </ProCard>
    </Space>
  );
}