<template>
    <div class='time-down'>
        <div :class="['time-down-box',headTaskData.state==5?'flex-center':'']">
            <div class='head-text'>{{headText}}</div>
            <div v-if='this.headTaskData.state!==5' class='describe-text'>
                <span>{{describeText}}</span>
                <span>{{timeShow}}</span>
                </div>
        </div>
    </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:{
        headText(){
            switch (this.headTaskData.state) {
                case 0:
                    return `立即邀请`;
                case 1:
                    return `活动未开始`;
                case 5:
                    return `活动已结束`;
            }
        },
        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 lang='scss'>
.time-down{
    width: 100%;
    display: flex;
    justify-content: center;
    color: #FFFACC;
    .time-down-box{
        width: 5.62rem;
        height:1.12rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0rem 0.04rem 0.08rem 0rem #FF9233, 0rem 0rem 0.16rem 0rem rgba(255, 255, 255, 0.7), 0rem 0.02rem 0.06rem 0rem rgba(243, 255, 175, 0.5);
        border-radius: 0.56rem;
        border: 0.04rem solid;
        padding:0.1rem;
        box-sizing: border-box;
        .head-text{
            font-size:0.32rem;
        }
        .describe-text{
            font-size:0.24rem;
        }
    }
}
.flex-center{
    justify-content: center !important;
}
</style>
