import React from "react";
import HomeBtn from "../commen/homeBtn";
import IconHtml from "../../../common/iconHtml";

type defaultProps = {
    pageList: [
        {
            text: "首页",//背景颜色，16进制
            link: "http://www.baidu.com",//文本内容
            icon: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2974829433,756068348&fm=26&gp=0.jpg",//图标
        },
        {
            text: "购物车",//背景颜色，16进制
            link: "http://www.baidu.com",//文本内容
            icon: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2974829433,756068348&fm=26&gp=0.jpg",//图标
        },
        {
            text: "商品",//背景颜色，16进制
            link: "http://www.baidu.com",//文本内容
            icon: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2974829433,756068348&fm=26&gp=0.jpg",//图标
        },
        {
            text: "我的",//背景颜色，16进制
            link: "http://www.baidu.com",//文本内容
            icon: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2974829433,756068348&fm=26&gp=0.jpg",//图标
        }

        ]
}

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.state = {
            source: [],
        }
    }

    componentDidMount() {

    }

    goPage(href) {
        if (this.props.env == 'isMp') {
            this.props.goMpPath(href);
        } else {
            window.location.href = href
        }
    }

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

        return (
            <div className={''}>
                {
                    content ? <div className={CLASS + 'pageNav ' + CLASS + "wordPic " + CLASS + 'iconWord-pageNav'}>
                        {
                            content.useHomeBtn ?
                                <HomeBtn data={content.homeList}></HomeBtn> : ''
                        }
                        {
                            content.pageList && content.pageList.length > 0 && content.pageList.map((item, index) => {
                                let num = content.pageList.length;
                                if (content.useHomeBtn) {
                                    if (num <= 2) {
                                        num = 2;
                                    } else {
                                        num = 5;
                                    }
                                }

                                if (window.location.href.indexOf(item.link) >= 0) {
                                    item.active = true
                                } else {
                                    item.active = false
                                }
                                return (
                                    <span onClick={this.goPage.bind(this,item.link)}
                                       className={CLASS + 'every ' + (item.active ? CLASS + "active" : "")}
                                       style={{
                                           width: (100 / num) + "%",
                                           marginLeft: content.useHomeBtn && index == 2 ? (100 / num) + '%' : ''
                                       }}>
                                        <IconHtml data={item} classBefore={CLASS}></IconHtml>

                                        <span className={CLASS + "line"}>{item.text}</span>
                                    </span>
                                )
                            })
                        }
                    </div> : ''
                }
            </div>
        );
    }
}

export default WordNav;