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

interface LicenseCardProps {
  value: number | string;
  label: string;
  unit?: string;
}

const LicenseCard: React.FC<LicenseCardProps> = ({
  value,
  label,
  unit = '件',
}) => (
  <div className={styles.card}>
    <Space size={4} className={styles.content}>
      <span className={styles.label}>{label}</span>
      <span className={styles.value}>{value}</span>
      <span className={styles.unit}>{unit}</span>
    </Space>
  </div>
);

interface VehicleCardProps {
  total: number | string;
  online: number | string;
  label: string;
}

const VehicleCard: React.FC<VehicleCardProps> = ({ total, online, label }) => (
  <div className={styles.vehicleCard}>
    <div className={styles.section}>
      <div className={styles.row}>
        <span className={styles.value}>{total}</span>
        <span className={styles.unit}>辆</span>
      </div>
      <div className={styles.label}>{label}</div>
    </div>
    <div className={styles.section}>
      <div className={styles.row}>
        <span className={styles.value}>{online}</span>
        <span className={styles.unit}>%</span>
      </div>
      <div className={styles.label}>在线率</div>
    </div>
  </div>
);

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

const LicenseInfo: React.FC<LicenseInfoProps> = ({ searchTime }) => {
  //顶部右侧数据
  const { data: infoData, loading: infoLoading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-gfclqk',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records?.[0];
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  //顶部左侧数据
  const { data: infoLeftData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-gfzsblqk',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records?.[0];
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );
 

  let isUsingValue = true;
  // const cardData = isUsingValue
  //   ? [
  //       { value: '--', label: '办证总量' },
  //       { value: '--', label: '排放证办理' },
  //       { value: '--', label: '消纳证办理' },
  //       { value: '--', label: '临时消纳备案' },
  //       { value: '--', label: '综合利用（回填）登记' },
  //     ]
  //   : [
  //       { value: 1582, label: '办证总量' },
  //       { value: 482, label: '排放证办理' },
  //       { value: 22, label: '消纳证办理' },
  //       { value: 22, label: '临时消纳备案' },
  //       { value: 22, label: '综合利用（回填）登记' },
  //     ];

  // const vehicleData = isUsingValue
  //   ? [
  //       { total: '--', online: '--', label: '运输车辆' },
  //       { total: '--', online: '--', label: '新能源车辆' },
  //       { total: '--', online: '--', label: '燃油车辆' },
  //     ]
  //   : [
  //       { total: 1562, online: 98.56, label: '运输车辆' },
  //       { total: 1562, online: 98.56, label: '新能源车辆' },
  //       { total: 1562, online: 98.56, label: '燃油车辆' },
  //     ];

  const cardData = useMemo(() => {
    return [
      { value: infoLeftData?.zs, label: '办证总量' },
      { value: infoLeftData?.pfz, label: '排放证办理' },
      { value: infoLeftData?.xnz, label: '消纳证办理' },
      { value: infoLeftData?.lsxnbas, label: '临时消纳备案' },
      { value: infoLeftData?.zhly, label: '综合利用（回填）登记' },
    ];
  }, [infoLeftData]);

  const vehicleData = useMemo(() => {
    return [
      { total: infoData?.zs, online: infoData?.zszxl, label: '运输车辆' },
      { total: infoData?.xny, online: infoData?.ryczxl, label: '新能源车辆' },
      { total: infoData?.ryc, online: infoData?.xnyzxl, label: '燃油车辆' },
    ];
  }, [infoData]);

  return (
    <div className={styles.container}>
      <div className={styles.title}>办证总览</div>
      <div className={styles.content}>
        <Space size={30}>
          {cardData.map((item, index) => (
            <LicenseCard key={index} {...item} />
          ))}
          <div className={styles.vehicleContainer}>
            <Space size={100}>
              {vehicleData.map((item, index) => (
                <VehicleCard key={index} {...item} />
              ))}
            </Space>
          </div>
        </Space>
      </div>
    </div>
  );
};

export default LicenseInfo;
