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



type defaultProps = {
    text:"UI首付副科级和不看",//文本
    bgColor:"#746373",//背景颜色，16进制
    textColor:"fff",//文本颜色，16进制
}

type ContentData = {
    text: string,//标题
    textColor: string,//副标题
    bgColor: string,//背景颜色，16进制
} & 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-notice-';


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

    constructor(props: IPropTypes) {
        super(props);
        this.getGotoRight = this.getGotoRight.bind(this)

        this.state={
            right:0
        }
    }

    componentDidMount(): void {
        this.getGotoRight(this.props.text)
    }

    componentWillUnmount() {
        clearInterval(timer)
    }


    getGotoRight(con){
        let length = con.length*12,
            clientW = window.innerWidth-35,
            right=this.state.right

        let stopNum = length - clientW
        if(length>clientW){
            timer = setInterval(()=>{
                if(right == stopNum){
                    clearInterval(timer)
                    setTimeout(()=>{
                        this.setState({
                            right:0
                        })
                        this.getGotoRight(con)
                    },500)

                }else{
                    right++
                    this.setState({
                        right:right
                    })
                }

            },50)
        }
    }


    render() {
        let source = this.props;
        let content = source;
        return (
            <div className={''}>
                {
                    content ? <div className={CLASS + 'bg'}
                                   style={{
                                       background: content.bgColor
                                   }}>
                        <i className={'icon-tips-horn icon-base'}
                            style={{
                                backgroundColor:content.bgColor
                            }}></i>
                        <div className={CLASS + 'title'}
                           style={{
                               color: content.textColor,
                           }}
                        >
                            <div style={{
                                right:this.state.right+"px"
                            }}>{content.text}</div>
                        </div>
                    </div> : ''
                }
            </div>
        );
    }
}

export default MPro;