import { Image } from "antd";
import { getFileUrl } from "../../utils/index";

/**
 * 在查看页面中图片预览组件
 */
const PreviewImg = (props) => {
  const { files = [], fileUrlKey = "filePath" } = props;

  const fileUrl = getFileUrl();

  return (
    <Image.PreviewGroup>
      {
        files.filter(Boolean).map(item => (
          <Image
            key={item[fileUrlKey] || item}
            src={item[fileUrlKey] ? fileUrl + item[fileUrlKey] : fileUrl + item}
            wrapperStyle={{ marginRight: 10, marginBottom: 10 }}
            width={100}
            height={100}
            alt=""
          />
        ))
      }
    </Image.PreviewGroup>
  );
};

PreviewImg.displayName = "PreviewImg";

export default PreviewImg;