import React from 'react';
import { Carousel, Modal } from 'antd-mobile';
import styles from './preView.less';

/**
 * 图片预览函数
 * @param {*} urls 图片地址数组
 * @param {*} e 点击事件，用于阻止冒泡
 */
const perView = (urls, e) => {
  if (e) e.stopPropagation();
  Modal.alert(
    '预览',
    <Carousel
      className={styles.spaceCarousel}
      frameOverflow="visible"
      cellSpacing={10}
      slideWidth={0.8}
      infinite
    >
      {urls.map(val => (
        // eslint-disable-next-line jsx-a11y/anchor-is-valid
        <a
          key={val}
          // eslint-disable-next-line no-script-url
          href="javascript:void(0);"
          style={{
            display: 'block',
            position: 'relative',
            minHeight: 200,
            boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
          }}
        >
          <img
            key={val}
            src={val}
            alt=""
            style={{ width: '100%', verticalAlign: 'top' }}
          />
        </a>
      ))}
    </Carousel>,
    [
      { text: '关闭' },
    ],
  );
};

export default perView;