
import React from 'react';
import './index.less';

import IconFont from '../../../themeComponents/IconFont';
import ImageView from '../../../components/ImageView'


/**
 * @desc 单一图片卡片
 * @param {boolean} active 是否选中
 * @param {boolean} hoverScale 图片hover是否需要放大
 * @param {string} imgUrl 图片地址
 * @param {string} relativeIcon 关联图标
 * @param {node} checkboxItem checkbox
 */
const ImageCard = props => {
  let {active = false, hoverScale = false, imgUrl = '', relativeIcon = '', checkboxItem = undefined,imageNum,hasImageNum} = props;
  return (
    <div className={`lm-card-image-box ${active ? 'active' : ''} ${hoverScale && imgUrl ? 'img-hover-scale' : ''}`}>
      {hasImageNum && <span className='image-box-number'>{imageNum}</span>}
      <ImageView src={imgUrl} />
      {relativeIcon && <IconFont className="relative-icon" type={relativeIcon} />}
      {checkboxItem}
    </div>
  );
};

export default ImageCard;
