import classNames from 'classnames';
import defaultScreenItemBgSrc from '../../../images/default_screen_bg.png';
import React from 'react';
import styles from './style.less';

interface Props {
  appName?: string;
  isSelected?: boolean;
  appPreviewImgUrl?: React.ImgHTMLAttributes<HTMLImageElement>['src'] | number | null;
  onMouseEnter?: React.DOMAttributes<HTMLDivElement>['onMouseEnter']; //应用拖动逻辑
  onClick?: React.DOMAttributes<HTMLDivElement>['onClick']; //单击应用逻辑
  isMultiExport?: boolean; //是否时批量操作
  hoverRenderNode: string | React.ReactNode;
  renderFooter: string | React.ReactNode;
}

const FileCard = (props: Props) => {
  const { onMouseEnter, onClick, isMultiExport = false, appPreviewImgUrl, hoverRenderNode, renderFooter } = props;
  return (
    <div className={styles.screenItem} onMouseEnter={onMouseEnter} onClick={onClick}>
      <div className={styles.screenItemBack} />
      <div className={styles.screenItemImgWrapper}>
        <div className={classNames(styles.screenItemImg, { [styles.disable]: isMultiExport })}>
          <div className={styles.img}>
            <img
              id="img"
              src={appPreviewImgUrl || defaultScreenItemBgSrc}
              onError={(e: any) => {
                e.target.onerror = null;
                e.target.src = defaultScreenItemBgSrc;
              }}
              style={{ objectFit: 'fill' }}
              alt="大屏背景图"
            />
          </div>
          {hoverRenderNode}
        </div>
      </div>
      <div className={styles.content}>{renderFooter}</div>
    </div>
  );
};
export default FileCard;
