import React from 'react'
import Util from '../../../util/utils'
import ShopPrice from "../productPrice";
import ShopOriginalPrice from "../productOriginalPrice";

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) {
        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'}>
                            {
                                data.cptCode == 9200 ? '拼团' :
                                    data.cptCode == 9100 ? <span className={'retailPrice'}>

                                         {
                                             data.showPrice || data.markPrice == 1 ?
                                                 <div className={'shop-product-price-container'}>
                                                     {/*价格*/}
                                                     <ShopPrice data={data} ></ShopPrice>


                                                     {/*划线价格*/}
                                                     {
                                                         data.cptType == 9101 || data.cptType == 9104 ||
                                                         data.cptType == 9301 || data.cptType == 9304 ||
                                                         data.cptType == 9201 || data.cptType == 9204 ?
                                                             <ShopOriginalPrice data={data}></ShopOriginalPrice> : ''
                                                     }
                                                 </div> : ''
                                         }
                                        </span> :
                                        data.cptCode == 9300 ? '砍价' :
                                            data.cptCode == 9400 ? '积分' : ''
                            }</span> : ''
                    }
                    {
                        timerType == 'big' && data.cptCode == 9200 ?
                            <span className={'shop-timer-total-num'}>({data.groupBuyNum}人团)</span> : ''
                    }

                    {
                        data.showPartNum == 1 && vars.indexOf('join') != -1 &&data.cptCode!=9100 ?
                            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-day'}>0天</span>
                                        <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> : ''
                                }
                        </span> : ''
                    }
                </div>
            );
        } else {
            return null;
        }

    }
}

export default ShopTimer;