import React, { useMemo, useRef } from 'react';
import classNames from '@pansy/classnames';
import { PictureOutlined } from '@ant-design/icons';
import styles from './index.less';
import { Empty } from '@sensoro/sensoro-design';

interface PictureCardProps {
  className?: string;
  style?: React.CSSProperties;
  data?: string[];
  iconShow?: boolean;
}
const PictureCard: React.FC<PictureCardProps> = props => {
  const { className, data = [], style = {}, iconShow } = props;
  let imgLength = Number(data?.length);
  let lastImg = imgLength > 0 && data[0]['url'];
  /* eslint-disable */
  const newStyle = {
    ...style,
    backgroundImage: `url(${lastImg})`,
  } as React.CSSProperties;

  return (
    <div
      className={classNames(styles.pictureWrapper, className)}
      style={newStyle}
      key={imgLength || 0}
    >
      {imgLength > 0 && iconShow && (
        <div className={styles.iconWrapper}>
          <PictureOutlined style={{ color: '#FFFFFF' }} />
          {imgLength}
        </div>
      )}
      {imgLength === 0 && <Empty icon="image" description="暂无图片" center />}
    </div>
  );
};
PictureCard.defaultProps = {
  data: [],
  iconShow: true,
};

export default PictureCard;