import * as React from "react";
import PropTypes from 'prop-types';


type defaultProps = {
    title: '标题',//标题
    subtitle: '阿房女',//副标题
    bgColor: '#fff',//背景颜色，16进制
    pos: 1,//位置，1：居左，2：居中，3：居右
    linkText: '方法好v',  //链接文本
    link: 'http://www.baidu.com',//导航链接
}

type ContentData = {
    title: string,//标题
    subtitle: string,//副标题
    bgColor: string,//背景颜色，16进制
    pos: number,//位置，1：居左，2：居中，3：居右
    linkText: string,  //链接文本
    link: string,//导航链接
} & 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-title-';

class MPro extends React.Component<IPropTypes, any> {
    state: any;

    constructor(props: IPropTypes) {
        super(props);

        this.state = {
            linkData: ""
        }
    }

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

    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={'lib-pro lib-pro2'}>
                {
                    content && (content.title || content.subtitle) ? <div className={CLASS + 'bg'}
                                                                          style={{
                                                                              background: content.bgColor,
                                                                              textAlign: content.pos == 1 ?
                                                                                  "left" : content.pos == 2 ?
                                                                                      "center" : content.pos == 3 ?
                                                                                          "right" : "center"
                                                                          }}>
                        <p className={CLASS + 'title'}>
                            {content.title}
                            {
                                content.linkText ?
                                    <a
                                        className={CLASS + 'href'}
                                        href={
                                            content.linkType == 2 ?
                                                content.link :
                                                content.linkType == 1 ?
                                                    this.state.linkData : ""
                                        }
                                        style={{
                                            color:content.color
                                        }}
                                    >
                                        {"-" + content.linkText}
                                    </a> : ''
                            }
                        </p>
                        {
                            content.subtitle ? <span className={CLASS + 'subtitle'}>{content.subtitle}</span> : ""
                        }

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

export default MPro;