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

// 导入图标
import dayLogo from '@/assets/images/V-2504/RestaurantOil-logo-day.png';
import smallLogo1 from '@/assets/images/V-2504/RestaurantOil-logo-small-1.png';
import smallLogo2 from '@/assets/images/V-2504/RestaurantOil-logo-small-2.png';

interface DailyOverallSectionProps {
  deviceCount: number; // 设备总数
  alertCount: number; // 告警次数
  onlineRate: number; // 在线率
  offlineRate: number; // 离线率
}

const DailyOverallSection: React.FC<DailyOverallSectionProps> = ({
  deviceCount = 0,
  alertCount = 0,
  onlineRate = 0,
  offlineRate = 0
}) => {
  const valueStyle = {
    fontSize: '26px',
  }
  const offlineValueStyle = {
    background: 'linear-gradient(180.00deg, rgb(255, 204, 122), rgb(235, 151, 62))',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    ...valueStyle
  }
  const unitStyle = {
    fontSize: '16px',
    fontWeight: 400,
  }
  const labelStyle = {
    fontSize: '16px',
    fontWeight: 400,
    marginRight: '14px',
  }
  const commonStyle = {
    justifyContent: 'flex-end',
  }
  
  // 计算在线率和离线率百分比
  const totalDevices = onlineRate + offlineRate;
  const onlinePercent = totalDevices ? ((onlineRate / totalDevices) * 100).toFixed(2) : '0.00';
  const offlinePercent = totalDevices ? ((offlineRate / totalDevices) * 100).toFixed(2) : '0.00';
  
  // 格式化数字，如果为0，显示 "--"
  const formatValue = (value: number) => {
    return value === 0 ? undefined : value;
  };

  return (
    <div className={styles.overallSection}>
      <ModuleTitleWithTabs title="整体情况" />
      <div className={styles.content}>
        {/* 第一行卡片 */}
        <div className={styles.topCard}>
          <div className={styles.logoWrapper}>
            <img src={dayLogo} className={styles.logo} alt="Logo" />
          </div>
          <div className={styles.deviceInfoWrapper}>
            <DescriptionItem
              value={formatValue(deviceCount)}
              name="总计"
              unit="个"
              direction="horizontal"
              decimals={0}
              unitStyle={unitStyle}
              labelStyle={labelStyle}
              style={commonStyle}
            />
          </div>
          <div className={styles.alertCountWrapper}>
            <DescriptionItem
              value={formatValue(alertCount)}
              name="告警"
              unit="次"
              direction="horizontal"
              valueStyle={{ color: 'rgb(255, 79, 79)', ...valueStyle }}
              unitStyle={unitStyle}
              labelStyle={labelStyle}
              style={{ justifyContent: 'space-between' }}
            />
          </div>
        </div>

        {/* 第二行卡片 */}
        <div className={styles.bottomCards}>
          <StatCard
            showTwoValues={true}
            direction="horizontal"
            value={formatValue(onlineRate)}
            secondValue={onlinePercent === '0.0' ? '--' : parseFloat(onlinePercent)}
            label="在线"
            unit="个"
            secondUnit="%"
            secondValueDecimals={2}
            icon={smallLogo1}
            iconSize={{ width: 48, height: 48 }}
            valueDecimals={0}
            valueStyle={valueStyle}
            labelStyle={{ marginRight: '10px' }}
            secondValueStyle={valueStyle}
          />
          <StatCard
            showTwoValues={true}
            direction="horizontal"
            value={formatValue(offlineRate)}
            secondValue={offlinePercent === '0.0' ? '--' : parseFloat(offlinePercent)}
            label="离线"
            unit="个"
            secondUnit="%"
            secondValueDecimals={2}
            icon={smallLogo2}
            iconSize={{ width: 48, height: 48 }}
            valueStyle={offlineValueStyle}
            labelStyle={{ marginRight: '10px' }}
            secondValueStyle={offlineValueStyle}
            valueDecimals={0}
          />
        </div>
      </div>
    </div>
  );
};

export default DailyOverallSection; 