import React from 'react'

var timerArr: any = {
    day: '0',
    hour: '00',
    minute: '00',
    second: '00',
};

class DistriTimer extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            timer: {
                day: '0',
                hour: '00',
                minute: '00',
                second: '00',
            },
            vars: ['name', 'join', 'tip', 'time'],
            key: 'timer' + new Date().getTime()
        }
    }

    componentDidMount(): void {

    }

    calcTimer(remainTime) {

        // let nowTime = new Date().getTime();
        // let remainTime = time - nowTime;
        let day: any = Math.floor(remainTime / (24 * 60 * 60));
        let hour: any = Math.floor((remainTime - day * 24 * 60 * 60) / (60 * 60));
        let minute: any = Math.floor((remainTime - day * 24 * 60 * 60 - hour * 60 * 60) / (60));
        let second: any = Math.floor(remainTime - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60);

        if (isNaN(day) || day <= 0) {
            day = 0;
        }
        if (isNaN(hour) || hour <= 0) {
            hour = 0;
        }
        if (isNaN(minute) || minute <= 0) {
            minute = 0;
        }
        if (isNaN(second) || second <= 0) {
            second = 0;
        }
        if (String(hour).length < 2) {
            hour = '0' + String(hour);
        }
        if (String(minute).length < 2) {
            minute = '0' + String(minute);
        }
        if (String(second).length < 2) {
            second = '0' + String(second);
        }
        let data = {
            day: day,
            hour: hour,
            minute: minute,
            second: second
        };

        if (remainTime <= 0) {
            return false;
        }

        let className = this.state.key;
        let el = document.getElementsByClassName(className);
        if (el && el[0]) {
            let dayCon = "<span class='dDayWrapper'>" +
                "<span class='dDay'>" + data.day + "</span>" +
                "<span>天</span>" +
                "</span>";
            let html = "<span class='dTime'>" + data.hour + "</span>:" +
                "<span class='dTime'>" + data.minute + "</span>:" +
                "<span class='dTime'>" + data.second + "</span>";
            if (data.day) {
                html = dayCon + html;
            }
            el[0].innerHTML = html;

            setTimeout(() => {
                remainTime = remainTime - 1;
                this.calcTimer(remainTime)
            }, 1000);
        }


    }

    render() {
        let props = this.props;
        let timer = this.state.timer;
        let vars = this.props.vars ? this.props.vars : this.state.vars;
        return (
            <div className={'distriTimer' + (this.props.className ? ' ' + this.props.className : '')}>
                <div className={'dJoinWrapper'}>
                    {
                        vars.indexOf('name') != -1 ?
                            <p className={'dName' + (vars.indexOf('join') != -1 && props.showPartNum == 1 ? '' : ' only_dName')}>分销</p> : ''
                    }
                    {
                        vars.indexOf('join') != -1 && props.showPartNum == 1 ?
                            <p className={'dJoinCount'}>已参与{props.partNum}人</p> : ''
                    }

                </div>
                {
                    props.limitTime == 1 ?
                        <div className={'dTimeWrapper'}>
                            <span className={'dArrow'}></span>
                            {this.calcTimer(props.remainTime)}
                            {
                                vars.indexOf('tip') != -1 ?
                                    <p className={'dTimeTip'}>
                                        {this.props.tipText ? this.props.tipText : '距活动结束仅剩'}
                                    </p> : ''
                            }
                            {
                                vars.indexOf('time') != -1 ?
                                    <p className={'dTimeCon ' + this.state.key}>
                                        {
                                            timer.day ?
                                                <span className={'dDayWrapper'}>
                                                    <span className={'dDay'}>{timer.day}</span>
                                                    <span>天</span>
                                                </span> : ''
                                        }

                                        <span className={'dTime'}>{timer.hour}</span>:
                                        <span className={'dTime'}>{timer.minute}</span>:
                                        <span className={'dTime'}>{timer.second}</span>
                                    </p> : ''
                            }


                        </div> : ''

                }

            </div>

        );
    }
}

export default DistriTimer;