// 合并图片组件
import Button from 'antd/lib/button'
import React from 'react'
import { classNames } from '../../renderers/Lion/utils/utils'

interface UnionImgProps {
    unionList: any[]
    handleUnionImgShow: (show: boolean) => void
    onClose: () => void
}

const UnionImgContent: React.FC<UnionImgProps> = (props) => {
    const { unionList, handleUnionImgShow } = props
    const unionListLength = unionList.length
    return <div className="unionContentWrapper">
        <div className="imgContentWrapper">
            {
                unionList.map((imgItem, imgIndex) => {
                    return <div key={imgIndex} className={classNames(
                        "baseUnionImgWrapper",
                        unionListLength === 2 && "unionImgWrapper_2",
                        unionListLength === 3 && "unionImgWrapper_3",
                        unionListLength === 4 && "unionImgWrapper_4",
                        (unionListLength > 4 && unionListLength <= 6) && "unionImgWrapper_6",
                        (unionListLength > 6 && unionListLength <= 9) && "unionImgWrapper_9",
                        (unionListLength > 9 && unionListLength <= 12) && "unionImgWrapper_12",
                        (unionListLength > 12 && unionListLength <= 16) && "unionImgWrapper_16",
                        (unionListLength > 16 && unionListLength <= 20) && "unionImgWrapper_20"
                    )}>
                        <div className={"unionImgWrapper"}>
                            <img
                                src={imgItem.originalSrc}
                                alt={imgItem.title}
                                className={"unionImg"}
                                draggable={false}
                            />
                        </div>
                        <div className={"bottomName"}>
                            {imgItem.title}
                        </div>
                    </div>
                })
            }
        </div>
        <div className={"bottomActionWrapper"}>
            <Button onClick={() => { props.onClose() }} style={{ marginRight: '10px' }}>关闭</Button>
            <Button type='primary' onClick={() => { handleUnionImgShow(false) }}>还原</Button>
        </div>
    </div>
}

export default UnionImgContent