import React from "react";
import MUtil from "../../../util/utils";

type defaultProps = {
    data: {
        cptCode: 8400, //组件代码
        cptType: 8401, //tab切换tab切换
        usePage: [1, 2],//数组，1：店铺主页，2：个人中心，3：商品分组，4：商品列表，5：微页面
        homeList: {
            icon: "",//图标
            activeIcon: '',//选中图标
            type: 1,//图标类型，1：自己上传的图标，2：图标库图标
            activeType: 1,//高亮图标类型，1：自己上传的图标，2：图标库图标
        },//主窗口
        pageList: [
            {
                icon: "",//图标
                link: "",//导航链接
                linkType: '',//链接类型
                type: 1,//图标类型，1：自己上传的图标，2：图标库图标
                activeType: 1,//高亮图标类型，1：自己上传的图标，2：图标库图标
                target: 1,//1:独立窗口
            }], //子窗口

    }
}

type ContentData = {
    content: {}
} & 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-pageNav-';

class WordNav extends React.Component<IPropTypes, any> {
    constructor(props) {
        super(props);
        this.watchScroll = this.watchScroll.bind(this);
        this.gotoTop = this.gotoTop.bind(this);
        this.state = {
            showAll: false,
            data: this.props
        }
    }

    componentDidMount() {
        this['windowTop'] = 0;
        this['showPage'] = true;
        document.addEventListener('scroll', this.watchScroll)
    }

    componentWillReceiveProps(nextProps: Readonly<IPropTypes>, nextContext: any): void {
        if (nextProps != this.state.data) {
            let data = nextProps;
            this.setState({
                data: data
            });
        }
    }

    getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    watchScroll() {
        let data = this.state.data;
        let sc = this.getScrollTop();
        let el = document.getElementsByClassName('m-floating-nav')[0];
        if (el && data) {
            if (data.mode == 2) {
                if (sc > this['windowTop']) {
                    this['showPage'] = false;
                    el.classList.add("m-floating-nav-hide");
                    el.classList.remove("m-floating-nav-show");
                } else {
                    this['showPage'] = true;
                    el.classList.remove("m-floating-nav-hide");
                    el.classList.add("m-floating-nav-show");
                }
                this['windowTop'] = sc;
                setTimeout(() => {
                    this.setState({
                        showAll: false
                    })
                }, 100)
            } else {
                el.classList.remove("m-floating-nav-hide");
                el.classList.remove("m-floating-nav-show");
            }
        }

    }

    showAll() {
        let showAll = this.state.showAll;
        this.setState({
            showAll: !showAll
        })
    }

    resetClass(className) {
        let icon = className.substr(0, 5);
        let newClass = className;
        if (icon != 'icon-') {
            className = className.replace(/^icon/, 'icon-')
        }

        return className;
    }

    getIconHtml(item) {
        return (
            item.type == 1 ?
                <i className={'m-floating-nav-icon'}
                   style={{
                       backgroundImage: "url(" + (item.icon) + ")"
                   }}></i> :
                item.type == 2 ?
                    <span className={
                        "icon m-floating-nav-icon-style "
                        + CLASS + "icon "
                        + CLASS + "iconColor "
                        + 'iconfont '
                        + this.resetClass(item.icon)
                    }></span> : ""
        )
    }

    getActiveIconHtml(item) {
        return (
            item.activeType == 1 ?
                <i className={'m-floating-nav-icon active'}
                   style={{
                       backgroundImage: "url(" + (item.activeIcon) + ")"
                   }}></i> :
                item.activeType == 2 ?
                    <span className={
                        "icon m-floating-nav-icon-style " +
                        CLASS + "icon " +
                        CLASS + "iconColor "
                        + 'iconfont '
                        + this.resetClass(item.activeIcon)
                    }></span>
                    : ""
        )
    }

    onClick(data) {
        if (data.linkType == 101) {
            this.showCustomer();
        } else if (data.linkType == 102) {
            if (this.props.env == 'isMp') {
                this.gotoTop();
            } else {
                window.scrollTo({top: 0})
                // MUtil.scrollTop(document.documentElement, 0, 50)
            }
        } else {
            if (this.props.env == 'isMp') {
                this.props.goMpPath(data.link);
            } else {
                window.location.href = data.link;
            }
        }
    }

    showCustomer() {
        this.props.showCustomer();
    }

    gotoTop() {
        this.props.gotoTop();
    }

    render() {
        let data = this.state.data;
        let pageList = data.pageList;
        let homeList = data.homeList;
        let normalList = [], targetList = [];
        let href = window.location.href;
        for (let i = 0; i < pageList.length; i++) {
            let item = pageList[i];
            if (item.selected == 1) {
                if (item.link == '' || href.indexOf(item.link) == -1) {
                    if (item.target == 1) {
                        normalList.push(item);
                    } else {
                        targetList.push(item);
                    }
                }
            }
        }
        let normalListLen = normalList.length;
        let targetListLen = targetList.length;
        let totalLen = normalListLen + targetListLen;
        let y = 55;

        if (totalLen > 0) {
            return (
                <div className={'m-floating-nav' + (this.state.showAll ? ' m-floating-nav-active' : '')}>
                    {/*主按钮*/}
                    {/*当主窗口中包含2个及以上子窗口时，手机端页面才展示主窗口，点击可展开主窗口，再次点击将收起主窗口*/}
                    {
                        normalList && normalList.length > 0 && totalLen >= 2 ?
                            <div
                                className={'m-floating-nav-home'}
                                onClick={this.showAll.bind(this)}>
                                <span className={'m-floating-nav-item m-floating-nav-home-normalIcon'}>
                                    {this.getIconHtml(homeList)}
                                </span>
                                <span className={'m-floating-nav-item m-floating-nav-home-activeIcon'}>
                                    {this.getActiveIconHtml(homeList)}
                                </span>
                            </div> : ''
                    }

                    {/*收缩悬浮窗*/}
                    {
                        normalList && normalList.length > 0 && normalList.map((item, index) => {
                            if (item.target == 1) {
                                let showItem = false;
                                if (totalLen == 1) {
                                    showItem = true;
                                }
                                return (
                                    <div
                                        className={'m-floating-nav-item' + (showItem ? ' m-floating-nav-item-show' : '')}
                                        onClick={this.onClick.bind(this, item)}
                                        style={
                                            this.state.showAll ?
                                                {transform: 'translateY(-' + (y * (index + 1)) + 'px)'} : {}
                                        }
                                    >
                                        {this.getIconHtml(item)}
                                    </div>
                                )
                            }
                        })
                    }

                    {/*独立悬浮窗*/}
                    {
                        targetList && targetList.length > 0 && targetList.map((item, index) => {
                            if (item.target == 2) {
                                return (
                                    <div className={'m-floating-nav-item m-floating-nav-item-show'}
                                         onClick={this.onClick.bind(this, item)}
                                         style={
                                             this.state.showAll ?
                                                 {transform: 'translateY(-' + (y * (index + 1 + normalListLen)) + 'px)'} :
                                                 (
                                                     normalListLen > 0 ?
                                                         {transform: 'translateY(-' + (y * (index + 1)) + 'px)'} :
                                                         {transform: 'translateY(-' + (y * index) + 'px)'}
                                                 )

                                         }
                                    >
                                        {this.getIconHtml(item)}
                                    </div>
                                )
                            }
                        })
                    }
                </div>
            );
        } else {
            return null;
        }

    }
}

export default WordNav;