import React from "react";
import HomeBtn from "../commen/homeBtn";

type defaultProps = {
    pageList: [
        {
            text: "首页",//背景颜色，16进制
            link: "http://www.baidu.com",//文本内容
        },
        {
            text: "购物车",//背景颜色，16进制
            link: "http://www.baidu.com",//文本内容
        },
        {
            text: "商品",//背景颜色，16进制
            link: "http://www.baidu.com",//文本内容
        },
        {
            text: "我的",//背景颜色，16进制
            link: "http://www.baidu.com",//文本内容
        }

        ]
}

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;
        let clientW = document.documentElement.clientWidth || document.body.clientWidth
        if (clientW > 750) {
            clientW = 750
        }
        return (
            <div className={''}>
                {
                    content ? <div className={CLASS + 'pageNav ' + CLASS + 'word-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) + '%' : '',
                                              fontSize: "16px",
                                          }}>{item.text}</span>
                                )
                            })
                        }
                    </div> : ''
                }
            </div>
        );
    }
}

export default WordNav;