import QueueAnim from 'rc-queue-anim';
import PropTypes from 'prop-types';
import { Image } from 'antd';

let dataArray = [
    { image: 'http://questnet.cn/image/sr/1.png' },
    { image: 'http://questnet.cn/image/sr/2.png' },
    { image: 'http://questnet.cn/image/sr/3.png' },
    { image: 'http://questnet.cn/image/sr/4.png' },
    { image: 'http://questnet.cn/image/sr/5.png' },
    { image: 'http://questnet.cn/image/sr/6.png' },
    { image: 'http://questnet.cn/image/sr/7.png' },
    { image: 'http://questnet.cn/image/sr/8.png' },
    { image: 'http://questnet.cn/image/sr/9.png' },
    { image: 'http://questnet.cn/image/sr/10.png' },
    { image: 'http://questnet.cn/image/sr/11.png' },
    { image: 'http://questnet.cn/image/sr/12.png' },
    { image: 'http://questnet.cn/image/sr/13.png' },
    { image: 'http://questnet.cn/image/sr/14.png' },
    { image: 'http://questnet.cn/image/sr/15.png' },
];
class PicDetailsDemo extends React.Component {
    static propTypes = {
        className: PropTypes.string,
    };

    static defaultProps = {
        className: 'pic-details-demo',
    };

    constructor(props) {
        super(props);
        this.state = {
            picOpen: {},
        };
    }

    render() {
        return (
            <div>
                <QueueAnim type="bottom" className={`${this.props.className}-title`}>
                    <h3 style={{color: '#a16767'}}>BIRTHDAY PARTY</h3>
                    <h1 key="h1" style={{marginTop: 15, fontSize: 44, fontWeight: 'normal'}}>员工生日会</h1>
                    <p>公司每月月底会给当月员工举办生日会</p>
                </QueueAnim>
                <QueueAnim
                    component="div"
                    className={`${this.props.className}-image-wrapper`}
                    interval={0}
                    type="bottom"
                >
                    {
                        dataArray.map((item, index) => {
                            if(this.props.isMobile && index + 1 === 15) {
                                return null
                            }
                            return <Image src={item.image} key={index} preview={false}/>
                            // return <img src={item.image} key={index}/>
                        })
                    }
                </QueueAnim>
            </div>
        );
    }
}
export default PicDetailsDemo