import React from "react";
import Api from "../../../util/Api"
import LinkWrapper from '../../../common/linkWrapper/index'


type defaultProps = {
    flex: 1,     //样式1：固定大小
    bgColor: "#fff",  //背景颜色：16进制
    textColor: "#fff",   // 文字颜色：16进制
    imgList: [
        {
            picurl: ' http://test.94mxd.com/static//images/taskposter/20191106/1/B3C4CD29CE671B6B196E6E73D4C3223E.jpg',      //图片地址
            title: '标题1',      //标题
            link: 'http://www.baidu.com'        //链接
        }
        ], //搜索热词
}

type ContentData = {
    bgColor: string,
    textColor: string,
    flex: number,
} & 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-nav-';

class PicNav extends React.Component<IPropTypes, any> {
    constructor(props) {
        super(props);

        this.state = {
            source: [],
            clientW: 0
        }
    }

    componentDidMount() {
        if (this.props.linkType == 1) {
            // let link= Util.getGoodsLink(this.props.id)
            this.setState({
                linkData: "http://www.baidu.com"
            })
        }

        if (document.getElementsByClassName('m-nav-content')[0]) {
            let clientW = document.getElementsByClassName('m-nav-content')[0].clientWidth
            this.setState({
                clientW: clientW
            })
        }

    }

    componentWillReceiveProps(nextProps, nextContext) {
        if (nextProps.linkType == 1) {
            // let link=  Util.getGoodsLink(nextProps.id)
            this.setState({
                linkData: "http://www.baidu.com"
            })
        }
    }

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

        return (
            <div className={''}>
                {
                    content ? <div style={{background: content.bgColor}}
                                   className={CLASS +'overflow'}>
                        <div className={CLASS + 'content'}>
                            {
                                content.imgList && content.imgList.length > 0 ?
                                    content.imgList.map((item, index) => {
                                        let clientW = this.state.clientW - 10 - (content.imgList.length * 10)
                                        let width = (clientW / content.imgList.length),
                                            height = (clientW / content.imgList.length) * 0.75

                                        return (
                                            <LinkWrapper
                                                {...item}
                                                className={CLASS + 'con '}
                                                style={{
                                                    color: content.textColor,
                                                    width:(100/content.imgList.length)+"%"
                                                    // borderRight: index == content.imgList.length - 1 ? "none" : "1px solid #969696"
                                                }}>
                                                <div className={CLASS + 'conChild'} key={index}
                                                     style={{
                                                         color: content.textColor ? content.textColor : "#000",
                                                         width:"100%"
                                                     }}
                                                >
                                                    <div className={CLASS+'iconP'}
                                                    >
                                                        {
                                                            item.picurl && item.picurl.length > 0 ?
                                                                <i className={CLASS+'icon'}
                                                                   style={{
                                                                       backgroundImage:"url("+(item.picurl)+")"
                                                                   }}
                                                                /> :
                                                                <i className={CLASS + 'icon' + " icon-nav-pic"}
                                                                ></i>
                                                        }
                                                    </div>

                                                    <p className={CLASS + 'title'}
                                                       style={{"color": content.textColor ? content.textColor : ""}}>{item.title ? item.title : ""}</p>
                                                </div>
                                            </LinkWrapper>
                                        )
                                    }) : ""
                            }
                        </div>


                    </div> : ''
                }
            </div>
        );
    }
}

export default PicNav;