import { Carousel, Flex, Image } from 'antd';
import React from 'react';
import styles from './index.less';

/** @name 图片 */
const Images: React.FC<{
  dataSource: any;
}> = (props) => {
  const { dataSource } = props;

  const beforeImage = JSON.parse(dataSource.beforeImage) as string[];
  const afterImage = JSON.parse(dataSource.afterImage) as string[];
  return (
    <div className={styles.container}>
      {beforeImage?.length == 0 && afterImage?.length == 0 ? (
        <Flex align="center" justify="center" className={styles.noImg}>
          处置中暂无图片
        </Flex>
      ) : (
        <Flex style={{ height: '100%' }}>
          <div
            className={styles.carouselContainer}
            style={{
              width: afterImage.length > 0 ? '50%' : '100%',
            }}
          >
            <span className={styles.imgTag}>处置前</span>
            <Carousel autoplay autoplaySpeed={5000}>
              {beforeImage?.map((item: any, i) => {
                return (
                  <Image
                    key={i + '前置'}
                    src={item}
                    className={styles.img}
                  ></Image>
                );
              })}
            </Carousel>
          </div>
          {afterImage.length > 0 && (
            <div style={{ width: '50%' }} className={styles.carouselContainer}>
              <span className={styles.imgTag}>处置后</span>
              <Carousel autoplay autoplaySpeed={5000}>
                {afterImage?.map((item: any, i) => {
                  return (
                    <Image
                      src={item}
                      key={i + '后置'}
                      className={styles.img}
                    ></Image>
                  );
                })}
              </Carousel>
            </div>
          )}
        </Flex>
      )}
    </div>
  );
};

export default Images;
