import DescriptionItem from '@/components/DescriptionItem';
import services from '@/services';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

const MonitorInfo: React.FC<any> = ({ metaData }) => {
  const [dataSource, setDataSource] = useState<any>();

  const commonValueStyle = {
    fontFamily: 'D-DIN Exp',
    fontSize: '36px',
    fontWeight: '700',
    background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
  };

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

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

  useEffect(() => {
    services.DataBase.getGzInfoData({
      typeCode: 'gz-gl-zxlByName',
      params: {
        galleryName: metaData?.szdlmc,
      },
    }).then((res) => {
      if (res.code === 200) {
        setDataSource(res?.data || {});
      }
    });
  }, [metaData]);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>监测信息</span>
      </div>
      <div className={styles.content}>
        <div className={styles.monitorStats}>
          <DescriptionItem
            value={dataSource?.utilityTunnelNum}
            name="接入感知设备"
            unit="个"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
          />
          <DescriptionItem
            value={((dataSource?.utilityTunnelOnlineRate ?? 0) * 100).toFixed(
              1,
            )}
            decimals={2}
            name="设备在线率"
            unit="%"
            valueStyle={{ ...commonValueStyle, background: '#55D355' }}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
          />
        </div>
      </div>
    </div>
  );
};

export default MonitorInfo;
