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


const StyleClass = {
    1: 'shop-tabs-container-gost',
    2: 'shop-tabs-container-default',
    3: 'shop-tabs-container-circle',
};

class TopGroup extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.setLeft = this.setLeft.bind(this);
        this.state = {
            style: this.props.style,
            pos: this.props.pos,
            currentIndex: 0,
            id: 'tabsWrapper' + new Date().getTime(),
            pageState: 0,
            left: 0,
            width: '100px'
        }
    }

    componentWillReceiveProps(nextProps: Readonly<any>, nextContext: any): void {

        if (nextProps.style != this.state.style) {
            this.setState({
                style: nextProps.style
            })
        }
        if (nextProps.pos != this.state.pos) {
            this.setState({
                pos: nextProps.pos
            })
        }
    }

    componentDidMount(): void {
        if (this.state.pos == 2) {
            window.addEventListener('scroll', () => {
                this.watchScroll();
            });
        }

        let innerWidth = 0;
        if (this.props.env == 'isMp') {
            innerWidth = window.innerWidth;
        } else {
            let id = this.state.id;
            let el = document.getElementById(id);
            if (el) {
                innerWidth = el.clientWidth;
            }
        }
        let w = innerWidth * 20 / 100;
        this.setState({
            width: w
        })
    }

    onClick(index, e) {
        let el = e.currentTarget;
        let width = el.clientWidth + 10;
        let left = 0;


        if (this.props.env == 'isMp') {
            el.$$getBoundingClientRect().then(res => {
                width = res.width + 10;
                left = width * (index + 0.5);
                this.setLeft(index, left);
            })
        } else {
            left = width * (index + 0.5);
            this.setLeft(index, left);

        }

        this.props.onSelected ? this.props.onSelected(index, el) : '';
    }

    setLeft(index, left) {
        var pageX = window.innerWidth;//设备的宽度
        if (pageX > 750) {
            pageX = 750;
        }

        left = left - pageX / 2;
        if (left < 0) {
            left = 0;
        }
        this.setState({
            currentIndex: index,
            left: -left
        });
    }

    watchScroll() {
        let id = this.state.id;
        let el = document.getElementById(id);
        let scrollTop = document.documentElement.scrollTop;
        if (el && el.offsetTop) {
            let oT = el.offsetTop;
            let offset = oT - scrollTop;
            let pageHeight = el.clientHeight;

            if (offset + pageHeight <= 50) {
                el.getElementsByClassName('shop-tabs-wrapper')[0].classList.remove('shop-tabs-fixed');
                el.getElementsByClassName('shop-tabs-wrapper')[0].classList.add('shop-tabs-absolute');
            } else {
                if (offset <= 0) {
                    el.getElementsByClassName('shop-tabs-wrapper')[0].classList.add('shop-tabs-fixed');
                    el.getElementsByClassName('shop-tabs-wrapper')[0].classList.remove('shop-tabs-absolute');
                } else {
                    el.getElementsByClassName('shop-tabs-wrapper')[0].classList.remove('shop-tabs-fixed');
                    el.getElementsByClassName('shop-tabs-wrapper')[0].classList.remove('shop-tabs-absolute');
                }
            }
        }
    }

    goBuy(data) {
        let proStyle = this.props.proStyle;
        this.props.goBuy ? this.props.goBuy(data) : ''
    }

    goDetail(data) {
        let proStyle = this.props.proStyle;
        this.props.onClick ? this.props.onClick(data) : ''
    }

    getProData(item, proStyle) {
        let content = [];
        if (item.proList) {
            content = item.proList;
        }
        if (item.showStyle == 1) {
            let count = 6;
            if (item.count) {
                count = Number(item.count);
            }
            content = content.slice(0, count);
        }
        let data = {};
        data['content'] = content;
        let postData = Object.assign(data, proStyle);
        postData.goBuy = this.goBuy.bind(this);
        postData.onClick = this.goDetail.bind(this);
        return postData;
    }


    render() {
        let groupList = this.props.groupList;
        let proStyle = this.props.proStyle;
        let style = this.props.style;
        let getProData = this.getProData.bind(this);
        if (groupList && groupList.length > 0) {
            return (
                <div className={'shop-tabs-container' + ' ' + StyleClass[style]} id={this.state.id}>
                    <div
                        className={'shop-tabs-wrapper shop-tabs-line' + (this.state.pos == 2 ? ' shop-tabs-wrappers-scroll' : '')}>
                        <div className={'shop-tabs-item-wrapper'}>
                            <ul className={'shop-tabs'}>
                                <div className={'shop-tabs-miniprogram'} style={{'left': this.state.left + 'px'}}>
                                    {
                                        groupList.map((item, index) => (
                                            <GroupItem key={index} name={item.name}
                                                       selected={index == this.state.currentIndex}
                                                       onSelected={this.onClick.bind(this, index)}
                                                       style={{'width': this.state.width}}
                                            ></GroupItem>
                                        ))
                                    }
                                </div>
                            </ul>
                        </div>
                    </div>
                    <div className={'shop-tabs-content'}>
                        {
                            groupList.map((item, index) => (
                                <div key={index}
                                     className={'shop-tabs-panel' + (this.state.currentIndex == index ? ' active' : '')}>
                                    {
                                        item.proList && item.proList.length > 0 ?
                                            <div>
                                                {
                                                    MUtil.transInReactNode(getProData(item, proStyle))
                                                }
                                            </div> :
                                            <div>
                                                <div className={'emptyGroup'}>该分组下暂无商品</div>
                                            </div>
                                    }
                                </div>
                            ))
                        }
                    </div>
                </div>
            );
        } else {
            return null;
        }

    }
}

export default TopGroup;