import * as React from "react";
import GroupItem from '../common/groupItem';
import MUtil from "../../../util/utils";


type defaultProps = {}

type ContentData = {} & defaultProps

interface LPData {
    content: Array<ContentData>,

    [propsName: string]: any
}

interface LPType {
    content: any,

    [propsName: string]: any
}

type IPropTypes = {
    source?: ContentData,
    [propsName: string]: any
}


const CLASS = 'm-tabs-';

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

    constructor(props: IPropTypes) {
        super(props);
        this.onClick = this.onClick.bind(this)

        this.state = {
            currentIndex: 0
        }
    }

    componentDidMount(): void {

    }

    componentWillReceiveProps(nextProps): void {
        if (nextProps.value != this.state.value) {
            this.setState({
                value: nextProps.value
            })
        }
    }

    onClick(item, index, e) {

        let el = e.currentTarget;
        let width = el.clientWidth + 10;
        let left = el.offsetLeft;
        left = width * (index + 0.5);

        var pageX = document.documentElement.clientWidth;//设备的宽度
        if (pageX > 750) {
            pageX = 750;
        }
        left = left - pageX / 2;
        MUtil.scrollLeft(el.parentNode, left, 50);
        this.setState({
            currentIndex: index
        });
        this.props.onSelected ? this.props.onSelected(item, index) : '';
    }

    render() {
        let source = this.props;
        let content = source.content;


        return (
            <div className={CLASS + 'wrapper shop-tabs-line'}>
                <ul className={(source.className ? source.className : "") + ' m-tabs'}>
                    {
                        content.map((item, index) => {
                            let num = content.length
                            return (
                                <GroupItem key={item.id}
                                           name={item.name}
                                           selected={item.type == this.props.type}
                                           onSelected={this.onClick.bind(this, item, index)}
                                           flag={source.flag ? source.flag : ""}
                                           width={source.flag == "more" ? "" : num}
                                ></GroupItem>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default MPro;