import { MyPageContainer } from '@/common';
import { Apis } from '@/gen/Apis';
import { HouseBillsTypeEnum } from '@/gen/Enums';
import { ProCard } from '@ant-design/pro-components';
import { useParams, useSearchParams } from '@umijs/max';
import { Tabs } from 'antd';
import { useEffect, useState } from 'react';
import ChargeInfo from '../components/ChargeInfo';
import HasCar from '../components/HasCar';
import HasHouse from '../components/HasHouse';
import Instrument from '../components/Instrument';

export default function Show({ title = '详情' }: { title?: string } = {}) {
  const { id } = useParams<{ id: string }>();
  const [data, setShow] = useState<any>({});
  const [items, setItem] = useState<any>([]);
  const [searchParams] = useSearchParams();
  const pageType = searchParams.get('type');
  const usageType = searchParams.get('usage_type');
  const meterType = searchParams.get('meter_type');

  const loadShow = () => {
    let paramsId: any = { id: id ?? 0 };
    Apis.HouseCharge.HouseChargeStandards.Show(paramsId).then((res) => {
      setShow(res?.data);
      if (pageType === 'Meter') {
        setItem([
          {
            label: '关联仪表',
            key: '2',
            closable: false,
            children: (
              <Instrument
                item={{
                  ...res?.data,
                  usage_type: usageType,
                  meter_type: meterType,
                }}
                reload={() => loadShow()}
              />
            ),
          },
        ]);
      }
      if (pageType === 'House') {
        setItem([
          {
            label: '关联房屋',
            key: '1',
            closable: false,
            children: (
              <HasHouse
                item={{ ...res?.data, house_charge_has_houses_id: id }}
                reload={() => loadShow()}
              />
            ),
          },
        ]);
      }

      if (pageType === 'Car') {
        setItem([
          {
            label: '关联车位',
            key: '3',
            closable: false,
            children: (
              <HasCar
                item={{ ...res?.data, house_charge_has_houses_id: id }}
                reload={() => loadShow()}
              />
            ),
          },
        ]);
      }
    });
  };

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

  return (
    data?.id && (
      <MyPageContainer
        enableTabs={true}
        tabKey={`charge-standard-${id}`}
        title={`${title} - ${
          HouseBillsTypeEnum[
            data?.charge_type as keyof typeof HouseBillsTypeEnum
          ]?.text
        }`}
      >
        <ChargeInfo item={data} reload={loadShow} />
        <ProCard style={{ marginTop: 16 }}>
          <Tabs type="card" items={items} defaultActiveKey="1" size="small" />
        </ProCard>
      </MyPageContainer>
    )
  );
}
