import services from '@/services';
import { useRequest } from 'ahooks';
import React, { useMemo } from 'react';
import styles from './index.less';

interface InfoItemProps {
  value: string | number;
  label: string;
  unit: string;
}
let isUsingValue = true;
const showValue = (value: number | string) => {
  if (isUsingValue) {
    return value;
  }
  return '--';
};

const InfoItem: React.FC<InfoItemProps> = ({ value, label, unit }) => (
  <div className={styles.infoItem}>
    <div className={styles.valueWrapper}>
      <span className={styles.value}>{showValue(value)}</span>
      <span className={styles.unit}>{unit}</span>
    </div>
    <div className={styles.label}>{label}</div>
  </div>
);

interface DisposalSiteInfoProps {
  searchTime: {
    startTime: string;
    endTime: string;
  };
}

const DisposalSiteInfo: React.FC<DisposalSiteInfoProps> = ({ searchTime }) => {
  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-gdslsxkc',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );


  const infoData = useMemo(() => {
    const gds = data?.find((item) => item.lx === 'gds');
    const lsx = data?.find((item) => item.lx === 'lsx');
    return [
      {
        value: gds?.total ?? '--',
        label: '固定式建筑垃圾消纳场数量',
        unit: '个',
      },
      {
        value: lsx?.total??'--',
        label: '临时性建筑垃圾转动调配场数量',
        unit: '个',
      },
      {
        value: (gds?.zrl ?? 0) + (lsx?.zrl ?? 0),
        label: '总容量',
        unit: '万方',
      },
      {
        value: (gds?.sykr ?? 0) + (lsx?.sykr ?? 0),
        label: '剩余库容',
        unit: '万方',
      },
    ];
  }, [data]);

  return (
    <div className={styles.container}>
      <div className={styles.title}>消纳场概况</div>
      <div className={styles.content}>
        {infoData.map((item, index) => (
          <InfoItem key={index} {...item} />
        ))}
      </div>
    </div>
  );
};

export default DisposalSiteInfo;
