//封装LabelCountText,用于显示文本
import { Flex } from 'antd';
import classNames from 'classnames';
import React, { CSSProperties, ReactElement } from 'react';
import CountNum from '../CountNum';
import styles from './index.less';
interface tagProps {
  label: string; //标题
  unit: string; //单位
  labelWidth?: string; //label宽度
  icon?: string;
  value: string | ReactElement | any; //值显示
  style?: CSSProperties; //样式
  onClick?: () => void; //点击事件
}
const LabelCountText: React.FC<tagProps> = (props) => {
  const { icon, label, value, labelWidth, unit, style, onClick } = props;
  return (
    <Flex
      className={classNames(styles.labelText, onClick ? styles.pointer : '')}
      onClick={onClick}
      style={{ ...style }}
    >
      {icon && (
        <img
          src={require(`@/assets/images/${icon}.png`)}
          className={styles.icon}
        />
      )}
      <div>
        <span className={styles.label} style={{ width: labelWidth }}>
          {label}
        </span>
        <CountNum
          style={{ marginTop: '-2px' }}
          unit={unit}
          value={value}
          valueStyle={{
            color: '#32404D',
            fontSize: '22px',
          }}
          unitStyle={{
            color: '#74757B',
            fontSize: '14px',
          }}
        />
      </div>
    </Flex>
  );
};

export default LabelCountText;
