class ShowTime extends React.Component {
    constructor() {
        super();
        this.state = {
            showTimer01:'',
        }
        this.handleClick=this.handleClick.bind(this)

        this.showTimer = null;
    }

    handleClick() {
        //console.log('isRed')
        this.setState({isRed : !this.state.isRed});
        //console.log(this.state.isRed)

    }

    treat(){
        var myDate = new Date();
        //document.getElementsByClassName('year')[0].innerHTML = myDate.getFullYear();
        var year = myDate.getFullYear()

        var month = myDate.getMonth()+1;
        month =(month<10 ? "0"+month:month);

        //document.getElementsByClassName('month')[0].innerHTML = month; // 月份自動加0

        var day = myDate.getDate();
        day =(day<10 ? "0"+day:day);

        //document.getElementsByClassName('day')[0].innerHTML = day; // 日子自動加0;

        var hour = myDate.getHours();
        hour =(hour<10 ? "0"+hour:hour);

        //document.getElementsByClassName('hour')[0].innerHTML = hour; // 小時(shí)自動加0

        var minute = myDate.getMinutes();
        minute =(minute<10 ? "0"+minute:minute);

        var seconds = myDate.getSeconds();
        seconds =(seconds<10 ? "0"+seconds : seconds);

        document.getElementsByClassName('watch')[0].innerHTML=''+year+'-'+month+'-'+day+'  '+
            hour + ':' + minute + ':' + seconds
    }

    componentDidMount() {

        const _self = this; // 指向本對象的指針

        var myDate = new Date();
        //document.getElementsByClassName('year')[0].innerHTML = myDate.getFullYear();
        var year = myDate.getFullYear()

        var month = myDate.getMonth()+1;
        month =(month<10 ? "0"+month:month);

        //document.getElementsByClassName('month')[0].innerHTML = month; // 月份自動加0

        var day = myDate.getDate();
        day =(day<10 ? "0"+day:day);

       //document.getElementsByClassName('day')[0].innerHTML = day; // 日子自動加0;

        var hour = myDate.getHours();
        hour =(hour<10 ? "0"+hour:hour);

        //document.getElementsByClassName('hour')[0].innerHTML = hour; // 小時(shí)自動加0

        var minute = myDate.getMinutes();
        minute =(minute<10 ? "0"+minute:minute);

        //document.getElementsByClassName('minute')[0].innerHTML = minute; //獲取當(dāng)前分鐘數(shù)(0-59)

        var seconds = myDate.getSeconds();
        seconds =(seconds<10 ? "0"+seconds : seconds);

        _self.showTimer = setInterval(()=> this.treat(), 1000); // 1分鐘換一次數(shù)據(jù)

        document.getElementsByClassName('watch')[0].innerHTML=''+year+'-'+month+'-'+day+'  '+
            hour + ':' + minute + ':' + seconds
    }

    // 組件接收到新的props時(shí)調(diào)用，并將其作為參數(shù)nextProps使用
    componentWillReceiveProps(nextProps) {
        //
    }

    // 除了首次render之后調(diào)用componentDidMount
    // 其它render結(jié)束之后都是調(diào)用componentDidUpdate
    componentDidUpdate() {
        //this.setState({dataEq: this.props.data});
    }

    componentWillUnmount() {
        if(this.showTimer != null){
            window.clearTimeout(this.showTimer);
        }
    }


    render() {


        var watchStyle ={
            position: 'absolute',
            fontSize: 18,
            left: 1678,
            top:22,
            color: '#00C1FF',
            width: 219,
            height: 25
        }

        return (

            <div>

                {/* 整體時(shí)間 */}
                <div className={'watch'}
                     style={watchStyle}
                ></div>

            </div>


        )
    }
}

export default ShowTime;