import React from 'react';
import './index.less';
import Lazyimg from "react-lazyimg-component"
import { Popover } from 'antd';
import { TooltipPlacement } from 'antd/es/tooltip';

interface Props {
    imageList: { imageUrl: string, imageId: number }[]
    style?: React.CSSProperties
    placement?: TooltipPlacement
}

/**
 * 多图
 * @param param0 
 * @returns 
 */
const ImageXXXC: React.FC<Props> = ({ imageList, style, placement }) => {


    return (
        <Popover
            placement={placement || "right"}
            content={<div className='mediaPic mediaPicPopover'>
                <div className='mediaPic-imgList' style={[3, 6].includes(imageList.length) ? { width: '100%' } : {}}>
                    {imageList.map((item, index) => <Lazyimg
                        style={[3, 6, 9].includes(imageList.length) ? { width: 'calc(33.333% - 1px)' } : [4].includes(imageList.length) ? { width: 'calc(50% - 2px)' } : {}}
                        key={item.imageId + '_' + index}
                        animateType="transition"
                        src={item.imageUrl}
                        className={`lazy`}
                        animateClassName={['transition-enter', 'transition-enter-active']}
                    />)}
                </div>
            </div>}
            overlayClassName="mediaPicPopoverContent"
        >
            <div style={style} className='mediaPic mediaPic-C'>
                <div className='mediaPic-imgList' style={[1, 3, 4, 6].includes(imageList.length) ? { width: '100%' } : {}}>
                    {imageList.map((item, index) => <Lazyimg
                        style={[1].includes(imageList.length) ? { height: '100%' } : [3, 6, 9].includes(imageList.length) ? { width: 'calc(33.333% - 1px)' } : [4].includes(imageList.length) ? { width: 'calc(50% - 2px)' } : {}}
                        key={item.imageId + '_' + index}
                        animateType="transition"
                        src={item.imageUrl}
                        className={`lazy`}
                        animateClassName={['transition-enter', 'transition-enter-active']}
                    />)}
                </div>
            </div>
        </Popover>
    );
};

export default React.memo(ImageXXXC);