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

const DeviceDistribution: React.FC<{
  dataSource: any[];
}> = (props) => {
  let isUsingValue = true;

  const { dataSource } = props;

  const info = useMemo(() => {
    return dataSource?.map((item) => {
      return {
        name: item.dataCodeName,
        num: item.sensorTotal,
        onlineRate: ((item.frequencyCount / item.sensorTotal) * 100).toFixed(2),
      };
    });
  }, [dataSource]);

  return (
    <div className={styles.deviceSection}>
      <div className={styles.title}>各设备类型分布</div>
      <div className={styles.header}>
        <span className={styles.type}>感知设备类型</span>
        <span className={styles.count}>设备总数</span>
        <span className={styles.percentage}> </span>
        <span className={styles.rate}>设备在线率</span>
      </div>

      <div className={styles.deviceList}>
        {info?.map((item) => (
          <Flex
            key={item.name}
            className={styles.deviceItem}
            justify="space-between"
            align="center"
          >
            <span className={styles.type}>{item.name}</span>
            <span className={styles.count}>{item.num}</span>
            <Progress
              size={{ height: 15 }}
              percent={Number(item.onlineRate)}
              showInfo={false}
              trailColor="rgba(144, 205, 229, 0.22)"
              strokeColor={{ from: '#00B9FF', to: '#79FFD1' }}
              className={styles.progress}
            />
            <span className={styles.rate}>{Number(item.onlineRate)}%</span>
          </Flex>
        ))}
      </div>
      <div className={styles.remark}>
        备注:单灯控制器与固定光照度监测关灯后不监测，在线率会变为0
      </div>
    </div>
  );
};

export default DeviceDistribution;
