import * as React from "react";
import PropTypes from 'prop-types';
import {url} from "inspector";
import {connect} from "net";


type defaultProps = {}

type ContentData = {} & 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-official-';


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

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


        this.state = {
            showFlag: false,
            value: props.value || ""
        }
    }

    componentDidMount(): void {

    }

    componentWillReceiveProps(nextProps): void {

    }

    click(){
        if(this.props.onClick){
            this.props.onClick()
        }
    }


    render() {
        let source = this.props;
        let content = source;
        return (
            <div className={'lib-pro lib-pro2'}>
                {
                    content&&content.appId&&content.appId.length>0?
                        <div className={CLASS + 'bg'}>
                            <p className={CLASS + "title"}>店铺关联的公众号</p>
                            <div className={CLASS + "con clearfix"}>
                                <div className={CLASS + "left"}>
                                    {
                                        content.headimgurl?
                                            <i className={'icon-official-icon'}
                                               style={{
                                                   backgroundImage:'url('+(content.headimgurl?content.headimgurl:"")+')'
                                               }}
                                            ></i>:
                                            <i className={'icon-official-icon'}></i>
                                    }
                                    <div className={CLASS + "leftcon"}>
                                        <p className={CLASS + "name"}>{content.nickname?content.nickname:"公众号名称"}</p>
                                        <span className={CLASS + "desc"}>{content.signature?content.signature:"公众号描述"}</span>
                                    </div>
                                </div>
                                <div className={CLASS + "right"}>
                                    <div className={CLASS + "btn"} onClick={this.click.bind(this)}>关注</div>
                                </div>
                            </div>
                        </div>:""
                }
            </div>
        );
    }
}

export default MPro;