import React from 'react'
import Util from '../../../util/utils'

const marketType = Util.marketType();

/*倒计时模板*/

class ShopTimer extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.calcNum = this.calcNum.bind(this);
        this.calcTimer = this.calcTimer.bind(this);
        this.state = {
            vars: ['name', 'join', 'tip', 'time'],
            id: 'timer' + new Date().getTime() + Math.random() * 10000,
            remainTime: null
        }
    }

    componentDidMount(): void {
        let data = this.props.data;
        if (data.remainTime) {
            this.calcTimer(data.remainTime);
            this.setState({
                remainTime: data.remainTime
            })
        }
    }

    componentWillReceiveProps(nextProps: Readonly<any>, nextContext: any): void {
        if (nextProps.data.remainTime != this.state.remainTime) {
            this.setState({
                remainTime: nextProps.data.remainTime,
                // id: 'timer' + new Date().getTime() + Math.random() * 10000,
            });
            this.calcTimer(nextProps.data.remainTime);
        }
    }

    lookMore() {
        this.props.lookMore();
    }

    calcTimer(remainTime) {
        console.log(remainTime)
        Util.calcTimerNew(remainTime, this.state.id)
    }

    calcNum(num) {
        let numNum = Util.calcNum(num);
        return numNum;
    }

    render() {
        let data = this.props.data;
        let vars = data.vars ? data.vars : this.state.vars;
        let className = 'shop-small-timer-wrapper';
        let timerType = data.timerType;
        if (timerType == 'big') {
            className = 'shop-big-timer-wrapper';
        }
        if (data.limitTime == 1) {
            return (
                <div className={className}>

                    {/*商品类型*/}
                    {
                        vars.indexOf('name') != -1 ?
                            <span className={'shop-timer-name'}>拼团</span> : ''
                    }

                    {/*拼团商品类型后面跟的文字，如：5人团*/}
                    {
                        timerType == 'big' && data.cptCode == 9200 ?
                            <span className={'shop-timer-total-num'}>({data.groupBuyNum}人团)</span> : ''
                    }

                    {/*参与人数*/}
                    {
                        data.showPartNum == 1 && vars.indexOf('join') != -1 ?
                            timerType == 'big' ?
                                <span className={'shop-timer-num'}>已参与{this.calcNum(data.partNum)}人</span> :
                                <span className={'shop-timer-num'}>{this.calcNum(data.partNum)}人</span> : ''
                    }

                    {/*倒计时*/}
                    {
                        data.limitTime == 1 ?
                            <span className={'shop-timer-remaintime'}>
                                {/*倒计时提示语*/}
                                {
                                    vars.indexOf('tip') != -1 ?
                                        <span
                                            className={'shop-timer-remaintime-tip'}>{data.tipText ? data.tipText : '距活动结束仅剩'}</span> : ''
                                }

                                {/*倒计时*/}
                                {
                                    vars.indexOf('time') != -1 ?
                                        <span className={'shop-timer-remaintime-con ' + this.state.id}
                                              id={this.state.id}>
                                        <span className={'shop-timer-time-hour'}>00</span>:
                                        <span className={'shop-timer-time-minute'}>00</span>:
                                        <span className={'shop-timer-time-second'}>00</span>:
                                        <span className={'shop-timer-time-msecond'}>0</span>
                                    </span> : ''
                                }
                        </span> : ''
                    }
                </div>
            );
        } else {
            return null;
        }

    }
}

export default ShopTimer;