<template>
    <div class='time-show'>
        <span>{{describeText}}</span>
        <span style='margin-left:0.16rem'>{{timeData.days}}天</span>
        <span class='rect first-rect'>{{timeData.hours}}</span>
        <span class='colon'>:</span>
        <span class='rect'>{{timeData.mins}}</span>
        <span class='colon'>:</span>
        <span class='rect'>{{timeData.secs}}</span>
    </div>    
</template>
<script>
export default {
    props:{
        headTaskData:{
            default:()=>{
                return {};
            }
        }
    },
    data() {
        return {
            timeData: {
                days: '00',
                hours: '00',
                mins: '00',
                secs: '00'
            },
            orderTimer: null, //定时器
        }
    },
     mounted() {
        // 未开始
        if (this.headTaskData.state !== 3) {
            this.countTimeGo();
        }
    },
    computed:{
         describeText(){
            switch (this.headTaskData.state) {
                case 0:
                    return `活动倒计时:`;
                case 1:
                    return `距离活动开始还剩:`;
            }
        },
        timeShow() {
            return `${this.timeData.days ? this.timeData.days + '天' : ''}
                    ${this.timeData.hours}:
                    ${this.timeData.mins}:
                    ${this.timeData.secs}`;
        }
    },
    methods:{
        timeCountDown() {
            //倒计获取
            let that = this;
            let leftTime;
            // 距离活动开始
            if(this.headTaskData.state==1){
                  leftTime = that.headTaskData.beginTime - new Date().getTime();
            }

            // 距离活动结束 
            if(this.headTaskData.state==0){
               leftTime= that.headTaskData.endTime - new Date().getTime();
            }
            //管理台48小时和24小时
            let days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
            let hours = parseInt((leftTime / 1000 / 60 / 60) % 24, 10); //计算剩余的小时
            let mins = parseInt((leftTime / 1000 / 60) % 60, 10); //计算剩余的分钟
            let secs = parseInt((leftTime / 1000) % 60, 10); //计算剩余的秒数
            days = that.checkTime(days);
            hours = that.checkTime(hours);
            mins = that.checkTime(mins);
            secs = that.checkTime(secs);
            debugger;
            if (days >= 0 || hours >= 0 || mins >= 0 || secs >= 0) {
                that.timeData = {
                    days,
                    hours,
                    mins,
                    secs
                };
            }
            if (days <= 0 && hours <= 0 && mins <= 0 && secs <= 0) {
                //为零时停止计时？
                window.clearInterval(that.orderTimer);
                that.orderTimer = null;
                // that.showTime = '00:00:00'
                that.timeData = {
                    days: '00',
                    hours: '00',
                    mins: '00',
                    secs: '00'
                };
                location.reload();
            }
        },
        countTimeGo() {
            //开始倒数计数计数
            let that = this;
            that.orderTimer = setInterval(function() {
                that.timeCountDown();
            }, 1000);
        },
        checkTime(i) {
            //将0-9的数字前面加上0，例1变为01
            if (i < 10 && i >= 0) {
                i = '0' + i;
            }
            return i;
        },
    }
}
</script>
<style scoped>
.time-show{
    width:100%;
    display: flex;
    justify-content: center;
    font-size: 0.24rem;     
    font-weight: 500;
    color: #FF8A22;
    margin-top:0.2rem;
}
.rect{
    width: 0.32rem;
    height: 0.32rem;
    background: #FF8A22;
    border-radius: 0.04rem;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.first-rect{
    margin-left:0.08rem;
}
.colon{
    margin:0 0.05rem 0 0.05rem;
    font-weight: 600;
}
</style>