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

let stopScroll = false;

class LeftGroup extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.updateSelected = this.updateSelected.bind(this);

        this.state = {
            style: this.props.style,
            pos: this.props.pos,
            currentIndex: 0,
            id: 'tabsWrapper' + new Date().getTime() + Math.random() * 10,
            pageState: 0
        }
    }

    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 {
        let id = this.state.id;
        let el = document.getElementById(id);
        if(el){
            let minHeight = el.getElementsByClassName('shop-tabs')[0].clientHeight;
            el.style.minHeight = minHeight + 'px';
        }


        window.addEventListener('scroll', () => {
            this.watchScroll();
        });
    }

    updateSelected(index){
        if(this.state.currentIndex == index)
            return;
        else{
            this.setState({
                currentIndex : index
            })
        }
    }

    // 点击左侧分组，自动定位到右侧对应分组商品
    onClick(index, e) {
        stopScroll = true;
        let id = this.state.id;
        let el = document.getElementById(id);
        let topRange = 0;
        if (this.props.topRange) {
            topRange = this.props.topRange;
        }
        let panels = el.getElementsByClassName('shop-tabs-panel');
        let oT = el.offsetTop;
        let num = 0;
        for (let i = 0; i < index; i++) {
            num += panels[i].clientHeight;
        }
        let scrollTop = oT + num + 10 - topRange;

        //判断为安卓还是ios系统
         var u= navigator.userAgent;
        let scol= document.body;
         if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1){
             scol =  document.body
         }else if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
             scol = document.documentElement
         }
        MUtil.scrollTop(scol, scrollTop, 50,)
        this.setState({
            currentIndex: index
        });
         // console.log(this.state.currentIndex,'点击左侧的id')

        setTimeout(() => {
            stopScroll = false;
        }, 500);
        this.props.onSelected ? this.props.onSelected(index, el) : '';

    }

    watchScroll() {
        MUtil.groupFixed(this.props.topRange, (index) => {
            if (!stopScroll) {
                this.setState({
                    currentIndex: index
                });
            }
        });
    }

    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;
        data['goBuy'] = this.props.goBuy;
        let postData = Object.assign(data, proStyle);
        return postData;
    }


    render() {
        let groupList = this.props.groupList;
        let proStyle = this.props.proStyle;
        let getProData = this.getProData.bind(this);
        let length = 0;
        for (let i = 0; i < groupList.length; i++) {
            if (groupList[i].proList) {
                length += groupList[i].proList.length;
            }
        }

        if (groupList && groupList.length > 0) {
            return (
                <div className={'shop-tabs-container-left'}
                     id={this.state.id}
                >
                    <div className={'shop-tabs-wrapper shop-tabs-line'}>
                        <ul className={'shop-tabs shop-tabs-left'}>
                            {
                                groupList.map((item, index) => (
                                    <GroupItem key={item.id} name={item.name}
                                               selected={index == this.state.currentIndex}
                                               onSelected={this.onClick.bind(this, index)}
                                    >
                                        {
                                            index == this.state.currentIndex ?
                                                <div>
                                                    <span className={'shop-tabs-radius-top'}></span>
                                                    <span className={'shop-tabs-radius-bottom'}></span>
                                                </div> : ''
                                        }
                                    </GroupItem>
                                ))
                            }
                        </ul>
                    </div>

                    <div className={'shop-tabs-content shop-tabs-content-left'}>
                        {
                            groupList.map((item, index) => (
                                <div key={index}
                                     className={'shop-tabs-panel' + (this.state.currentIndex == index ? ' active' : '')}>
                                    {
                                        item.proList && item.proList.length > 0 ?
                                            <div>
                                                <p className={'shop-tabs-title'}>{item.name}</p>
                                                {
                                                    Util.transInReactNode(getProData(item, proStyle))
                                                }
                                            </div> :
                                            item.request ?
                                                <div>
                                                    <p className={'shop-tabs-title'}>{item.name}</p>
                                                    <div className={'emptyGroup'}>该分组下暂无商品</div>
                                                </div> : ''
                                    }
                                </div>
                            ))
                        }
                    </div>
                </div>
            );
        } else {
            return null;
        }
    }
}

export default LeftGroup;