pay-company/src/pages/charge/standard/modals/Show.tsx

import { MyBetaModalFormProps } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import { HouseBillsTypeEnum } from '@/gen/Enums';
import { Spin } from 'antd';
import { useState } from 'react';
import HasCar from '../components/HasCar';
import HasHouse from '../components/HasHouse';
import Instrument from '../components/Instrument';

function getMeterConfig(chargeType: string) {
  switch (chargeType) {
    case HouseBillsTypeEnum.WaterFee.value:
      return { usage_type: 'WaterMeter', meter_type: 'HouseMeter' };
    case HouseBillsTypeEnum.ElectricityFee.value:
      return { usage_type: 'ElectricMeter', meter_type: 'HouseMeter' };
    case HouseBillsTypeEnum.SharedWaterFee.value:
      return { usage_type: 'WaterMeter', meter_type: 'CommonMeter' };
    case HouseBillsTypeEnum.SharedElectricityFee.value:
      return { usage_type: 'ElectricMeter', meter_type: 'CommonMeter' };
    default:
      return {};
  }
}

function getPageType(chargeType: string) {
  switch (chargeType) {
    case HouseBillsTypeEnum.PropertyFee.value:
    case HouseBillsTypeEnum.MaintenanceFund.value:
      return 'House';
    case HouseBillsTypeEnum.CarPortFee.value:
      return 'Car';
    case HouseBillsTypeEnum.WaterFee.value:
    case HouseBillsTypeEnum.ElectricityFee.value:
    case HouseBillsTypeEnum.SharedWaterFee.value:
    case HouseBillsTypeEnum.SharedElectricityFee.value:
      return 'Meter';
    default:
      return 'House';
  }
}

export default function Show(props: MyBetaModalFormProps) {
  const { item, reload, title = '详情' } = props;
  const [data, setData] = useState<any>({});
  const [loading, setLoading] = useState(false);

  const pageType = getPageType(item?.charge_type);
  const meterConfig = getMeterConfig(item?.charge_type);

  const loadShow = () => {
    setLoading(true);
    Apis.HouseCharge.HouseChargeStandards.Show({
      id: item?.id ?? 0,
    })
      .then((res) => {
        setData(res?.data || {});
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const renderContent = () => {
    if (!data?.id) return null;
    if (pageType === 'Meter') {
      return (
        <Instrument
          item={{
            ...data,
            ...meterConfig,
          }}
          reload={loadShow}
        />
      );
    }
    if (pageType === 'House') {
      return (
        <HasHouse
          item={{ ...data, house_charge_has_houses_id: item?.id }}
          reload={loadShow}
        />
      );
    }
    if (pageType === 'Car') {
      return (
        <HasCar
          item={{ ...data, house_charge_has_houses_id: item?.id }}
          reload={loadShow}
        />
      );
    }
    return null;
  };

  return (
    <MyModal
      title={`${title} `}
      width="1000px"
      onOpen={() => {
        loadShow();
      }}
      node={<Spin spinning={loading}>{renderContent()}</Spin>}
    />
  );
}