//封装LabelImgText,用于显示文本+图标+值
import classNames from 'classnames';
import React, { CSSProperties, ReactElement } from 'react';
import styles from './index.less';
interface tagProps {
  label?: string; //标题
  labelWidth?: string; //label宽度
  icon?: string;
  value: string | ReactElement | any; //值显示
  valueStyle?: CSSProperties; //设置值的样式
  imgStyle?: CSSProperties; //设置图标的样式
  labelStyle?: CSSProperties;
}
const LabelImgText: React.FC<tagProps> = (props) => {
  const {
    icon,
    label,
    value,
    labelWidth,
    labelStyle = {},
    valueStyle,
    imgStyle,
  } = props;
  return (
    <div className={styles.labelText}>
      {icon && (
        <img
          src={require(`@/assets/images/${icon}.png`)}
          className={styles.icon}
          style={{ ...imgStyle }}
        />
      )}
      {label && (
        <span
          className={classNames(styles.label)}
          style={{ width: labelWidth, ...labelStyle }}
        >
          {label}
        </span>
      )}
      {value && (
        <span
          className={classNames(styles.value, styles.textEllipsis)}
          style={{ ...valueStyle }}
        >
          {value}
        </span>
      )}
    </div>
  );
};

export default LabelImgText;
