import React from 'react';
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';
import DualBackgroundCard from '../DualBackgroundCard';
import styles from './index.less';

// 导入图标
import logo1 from '@/assets/images/V-2504/RestaurantOil-logo-1.png';
import logo2 from '@/assets/images/V-2504/RestaurantOil-logo-2.png';
import logo3 from '@/assets/images/V-2504/RestaurantOil-logo-3.png';

interface OverallSectionProps {
  deviceCount: number|string;
  alertCount: number|string;
  isEnterprise?: boolean;
}

const OverallSection: React.FC<OverallSectionProps> = ({
  deviceCount = 5.98,
  alertCount = 5.98,
  isEnterprise = false
}) => {
  const getUnit = (value: number | string) => {
    const num = typeof value === 'string' ? parseFloat(value) : value;
    return num >= 10000 ? '万次' : '次';
  };

  const getValue = (value: number | string) => {
    const num = typeof value === 'string' ? parseFloat(value) : value;
    return  num >= 10000 ? parseFloat((num / 10000).toFixed(2)) : num;
  };

  const getDecimals = (value: number | string) => {
    const num = typeof value === 'string' ? parseFloat(value) : value;
    return num >= 10000 ? 2 : 0;
  };

  return (
    <div className={styles.overallSection}>
      <ModuleTitleWithTabs title="整体情况" />
      <div className={styles.overallContent}>
        <DualBackgroundCard
          icon={isEnterprise ? logo3 : logo1}
          label={isEnterprise ? "企业数量" : "设备数量"}
          value={getValue(deviceCount)}
          unit={isEnterprise ? "个" : getUnit(deviceCount)}
          valueColor="linear-gradient(180.00deg, rgb(170, 255, 246), rgb(37, 187, 255))"
          decimals={isEnterprise ? 0 : getDecimals(deviceCount)}
        />
        <DualBackgroundCard
          icon={logo2}
          label="告警次数"
          value={getValue(alertCount)}
          unit={getUnit(alertCount)}
          valueColor="linear-gradient(180.00deg, rgb(255, 118, 108), rgb(255, 79, 79))"
          decimals={getDecimals(alertCount)}
        />
      </div>
    </div>
  );
};

export default OverallSection; 