import GroupItem from "./groupItem";

import * as React from "react";

class DefaultGroup extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            groupList: [
                {
                    id: 0,
                    name: '全部'
                }, {
                    id: 1,
                    name: '商品组一'
                }, {
                    id: 2,
                    name: '商品组二'
                }, {
                    id: 3,
                    name: '商品组三'
                }, {
                    id: 4,
                    name: '商品组四'
                }, {
                    id: 5,
                    name: '商品组五'
                }, {
                    id: 6,
                    name: '商品组六'
                }
            ],
            currentIndex: 0
        }
    }

    componentDidMount(): void {

    }

    onClick(e) {
        this.props.onClick ? this.props.onClick(e) : ''
    }


    render() {
        return (
            <div className={'shop-group-default'}>
                <ul className={'shop-group-default shop-tabs'}>
                    {
                        this.state.groupList.map((item, index) => (
                            <GroupItem key={item.id} name={item.name}
                                       selected={index == this.state.currentIndex}
                                       onClick={this.onClick.bind(this, index)}
                            ></GroupItem>
                        ))
                    }
                </ul>
            </div>
        );
    }
}

export default DefaultGroup;