import * as React from "react";
import ShopListItem from '../commen/proItem';
import ProWrapper from '../commen/wrapper'
import MUtil from "../../../util/utils";

const date = new Date().getTime();

class TwoItems extends React.Component<any, any> {
    state: any;

    constructor(props) {
        super(props);
        this.state = {
            style: {
                key: 'shop-product-wrapper' + new Date().getTime(),
            }
        }
    }

    componentDidMount(): void {

    }

    goBuy(data) {
        this.props.goBuy ? this.props.goBuy(data) : ''
    }


    render() {

        let source = this.props;
        let content = this.props.content;
        return (
            <div ref={this.state.key} className={'shop-product-parent'}>
                <ProWrapper className={'shop-product-wrapper-two'}>
                    {
                        content && content.length > 0 ?
                            content.map((data, index) =>{
                                if(index%2==0){
                                    return (
                                        <ShopListItem {...MUtil.initParams(data, source)}
                                                      key={"left"+index}
                                                      style={this.state.style}
                                                      goBuy={this.goBuy.bind(this, data)}
                                                              ></ShopListItem>
                                    )
                                }

                                }) : ''
                    }
                </ProWrapper>
                <ProWrapper className={'shop-product-wrapper-two'}>
                    {
                        content && content.length > 0 ?
                            content.map((data, index) =>{
                                if(index%2!==0){
                                    return (
                                        <ShopListItem {...MUtil.initParams(data, source)}
                                                      key={"right"+index}
                                                      style={this.state.style}
                                                      goBuy={this.goBuy.bind(this, data)}
                                                              ></ShopListItem>
                                    )
                                }

                            }) : ''
                    }
                </ProWrapper>

            </div>

        )
    }
}

export default TwoItems;