import  React from 'react';

require('./NoticeBar.less');

const noticeArray = [
    {
        msg: '11111111111111111111111111',
        link: 'www.baidu.com'
    }  ,    {
        msg: '22222222222222222222222222',
        link: 'www.baidu.com'
    }   ,    {
        msg: '333333333333333333333333',
        link: 'www.baidu.com'
    }   ,    {
        msg: '44444444444444444444444444',
        link: 'www.baidu.com'
    }   ,    {
        msg: '55555555555555555555555555',
        link: 'www.baidu.com'
    }   ,    {
        msg: '66666666666666666666666666',
        link: 'www.baidu.com'
    }   ,    {
        msg: '7777777777777777777777777777',
        link: 'www.baidu.com'
    }
];


class  NoticeBar extends  React.Component {


    componentDidMount() {

        const width = document.getElementById("erl-notice-content").offsetWidth;

        console.log(width);

        let keyf = '@keyframes myfirst {from {right: -' + width +
            'px;}\n' +
            'to{right: 0px;}\n' + '@-webkit-keyframes myfirst {from {right: -' + width +
            'px;}\n' +
            'to{right: 0px;}\n';
        let style = document.createElement('style');

        style.type = 'text/css';


        alert(keyf);

        style.innerHTML = keyf;

        document.getElementById('erl-notice-content').appendChild(style);

       /* setTimeout( () => {
            const width = document.getElementById("erl-notice-content").offsetWidth;
            let keyf = '@keyframes myfirst {from {right: -' + width +
                'px;}\n' +
                'to{right: 0px;}\n' + '@-webkit-keyframes myfirst {from {right: -' + width +
                'px;}\n' +
                'to{right: 0px;}\n';
            let style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = keyf;
            document.getElementsByTagName('head')[0].appendChild(style);
        }, 100)*/
    }





    getNotice() {
        let note = '';
        for(let item of noticeArray) {
            note = note + item.msg + ''
        }
        return note
    }


    render(){
        const notice = this.getNotice();
        return <p className="notice-bar">
            <span id = "erl-notice-content">
                { notice }
            </span>
        </p>
    }
}
export default NoticeBar