import * as React from "react";
import PropTypes from 'prop-types';
import Util from "../../../util/utils"
import LinkWrapper from '../../../common/linkWrapper/index'


type defaultProps = {
    bgColor: "",//背景颜色，16进制
    color: "",//文字颜色，16进制
    content: "",//文本内容
    size: 1,//文字大小，1是大，2 是中，3是小
    pos: 1,//位置， 1是居左，2是居中，3是居右
    link: "",//链接
    id: "",
    linkType: 0
}

type ContentData = {
    bgColor: string,//背景颜色，16进制
    color: string,//文字颜色，16进制
    content: string,//文本内容
    size: number,//文字大小，1是大，2 是中，3是小
    pos: number,//位置， 1是居左，2是居中，3是居右
    link: string,//链接
    id: string
    linkType: 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-word-';

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

    constructor(props: IPropTypes) {
        super(props);
        this.changeFn = this.changeFn.bind(this)
        this.keyPressFn = this.keyPressFn.bind(this)
        this.gotoSearch = this.gotoSearch.bind(this)


        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"
            })
        }
    }


    changeFn(e) {
        let value = e.target.value
        // this.props.onChange(value)
    }

    gotoSearch(flag, e) {
        if (flag) {
            // this.props.onClick(e)
        }

    }

    keyPressFn(e) {
        var keycode = e.keyCode;
        if (keycode == '13') {
            e.preventDefault();
            //请求搜索接口
            let value = e.target.value
            // this.props.onKeyPress(value)
        }
    }

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


        return (
            <div className={'textEdit'}>

                {
                    content && content.link && content.link.length > 0 ?
                        <LinkWrapper {...content}>
                            <div className={CLASS + 'bg'}
                                 style={{background: content.bgColor}}

                            >

                                <p
                                    className={CLASS + 'font ' + (content.size == 1 ?
                                        "bigFont" : content.size == 2 ?
                                            "middleFont" : content.size == 3 ?
                                                "smallFont" : "middleFont")}
                                    style={{
                                        color: content.color,
                                        textAlign: content.pos == 1 ?
                                            "left" : content.pos == 2 ?
                                                "center" : content.pos == 3 ?
                                                    "right" : "center",
                                        width: (
                                            (content.link && content.link.length > 0) ||
                                            (this.state.linkData && this.state.linkData.length > 0)) ?
                                            "calc(100% - 20px)" : "100%"
                                    }}>{content.content}</p>
                                {
                                    content.link && content.link.length > 0 ?
                                        <i className={'icon-goto-page icon-base'}></i> : ""
                                }
                                {/*{*/}
                                {/*this.state.linkData && this.state.linkData.length > 0 ?*/}
                                {/*<i className={'icon-goto-page icon-base'}></i> : ""*/}
                                {/*}*/}

                            </div>
                        </LinkWrapper> :
                        <div>
                            {
                                content ?
                                    <div className={CLASS + 'bg'}
                                         style={{background: content.bgColor}}

                                    >

                                        <p
                                            className={CLASS + 'font ' + (content.size == 1 ?
                                                "bigFont" : content.size == 2 ?
                                                    "middleFont" : content.size == 3 ?
                                                        "smallFont" : "middleFont")}
                                            style={{
                                                color: content.color,
                                                textAlign: content.pos == 1 ?
                                                    "left" : content.pos == 2 ?
                                                        "center" : content.pos == 3 ?
                                                            "right" : "center",
                                                width: (
                                                    (content.link && content.link.length > 0) ||
                                                    (this.state.linkData && this.state.linkData.length > 0)) ?
                                                    "calc(100% - 20px)" : "100%"
                                            }}>{content.content}</p>

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

export default MPro;