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 RecyclingInfoProps {
  searchTime: {
    startTime: string;
    endTime: string;
  };
}

const RecyclingInfo: React.FC<RecyclingInfoProps> = ({ searchTime }) => {
  //综合利用
  const { data: syntheticsData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-zhly',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records?.[0];
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  //资源利用概况
  const { data: resourceData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-gdslsxsl',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  const topData = useMemo(() => {
    const gds = resourceData?.find((item: any) => item.lx === 'gds');
    const lsx = resourceData?.find((item: any) => item.lx === 'lsx');
    return [
      {
        value: gds?.total ?? '--',
        label: '固定式建筑垃圾资源化利用厂',
        unit: '个',
      },
      {
        value: lsx?.total ?? '--',
        label: '临时性建筑垃圾资源化利用厂',
        unit: '个',
      },
      {
        value: (gds?.czl ?? 0) + (lsx?.czl ?? 0),
        label: '处置能力',
        unit: '万吨/年',
      },
    ];
  }, [resourceData]);

  const bottomData = useMemo(() => {
    return [
      {
        value: syntheticsData?.total,
        label: '综合利用点数量',
        unit: '个',
      },
      {
        value: syntheticsData?.czl,
        label: '综合利用处置量',
        unit: '万方',
      },
    ];
  }, [syntheticsData]);

  return (
    <div className={styles.container}>
      <div className={styles.topSection}>
        <div className={styles.title}>资源化利用厂概况</div>
        <div className={styles.content}>
          {topData.map((item, index) => (
            <InfoItem key={index} {...item} />
          ))}
        </div>
      </div>
      <div className={styles.bottomSection}>
        <div className={styles.title}>综合利用点概况</div>
        <div className={styles.content1}>
          {bottomData.map((item, index) => (
            <InfoItem key={index} {...item} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default RecyclingInfo;
