import DescriptionItem from '@/components/DescriptionItem';
import { Flex } from 'antd';
import React, { useMemo } from 'react';
import styles from './index.less';

const StatsOverview: React.FC<{
  dataSource: any[];
}> = (props) => {
  const { dataSource } = props;

  const info = useMemo(() => {
    const total = dataSource.reduce((pre: number, cur: any) => {
      return pre + cur.sensorTotal;
    }, 0);

    const onLine = dataSource.reduce((pre: number, cur: any) => {
      return pre + cur.frequencyCount;
    }, 0);

    return {
      total,
      onLine: onLine,
      onLineRate: ((onLine / total) * 100).toFixed(2),
    };
  }, [dataSource]);

  const commonLabelStyle = {
    color: '#BCCEE9',
    fontSize: '20px',
    marginTop: '-4px',
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    fontSize: '20px',
  };

  return (
    <div className={styles.statsSection}>
      <div className={styles.title}>感知设备概况</div>
      <Flex
        gap={40}
        align="center"
        justify="space-between"
        style={{ padding: '0 60px 0 10px' }}
      >
        <DescriptionItem
          name="感知设备总数"
          value={info.total}
          unit="个"
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
        />
        <DescriptionItem
          name="在线"
          value={info?.onLine}
          unit="个"
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
        />
        <DescriptionItem
          name="设备在线率"
          unit="%"
          value={info.onLineRate}
          decimals={2}
          valueStyle={{ color: '#55D355' }}
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
        />
      </Flex>
    </div>
  );
};

export default StatsOverview;
