import GroupItem from "./groupItem";

import * as React from "react";
import Util from "../../../util/utils";

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

    componentDidMount(): void {

    }

    getProData(content, proStyle) {
        let data = {};
        data['content'] = content;
        let postData = Object.assign(data, proStyle);
        return postData;
    }


    render() {
        let groupList = this.state.groupList;
        let proStyle = this.props.proStyle;
        let getProData = this.getProData.bind(this);
        return (
            <div className={'shop-tabs-content'}>
                {
                    groupList.map((item, index) => (
                        <div key={index}
                             className={'shop-tabs-panel' + (this.state.currentIndex == index ? ' active' : '')}>
                            <div>
                                {Util.transInReactNode(getProData(item.proList, proStyle))}
                            </div>
                        </div>
                    ))
                }
            </div>
        );
    }
}

export default DefaultGroupPro;