<template>
    <div
        :class="[
            'head-task',
            headTaskData.state === 3 ? 'state-complete' : '',
            headTaskData.state === 1 ? 'state-no-start' : ''
        ]"
    >
        <p class="head-task-state">{{ headText }}</p>
        <p class="head-task-btn" v-if="headTaskData.state === 3">
            <span @click="receiveAward">点击领取奖励</span>
        </p>
        <p v-if="headTaskData.state === 1" class="head-task-time">{{ timeShow }}</p>
        <dia-log v-if="isShowDialog" @close="isShowDialog = false" :imgPath="headTaskData.completeImg"></dia-log>
    </div>
</template>
<script>
import diaLog from './dialog';
export default {
    components: {
        diaLog
    },
    props: {
        headTaskData: {
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            timeData: {
                days: '00',
                hours: '00',
                mins: '00',
                secs: '00'
            },
            orderTimer: null, //定时器
            isShowDialog: false
        };
    },
    computed: {
        headText() {
            switch (this.headTaskData.state) {
                case 0:
                    return `还差${this.headTaskData.all_num - this.headTaskData.invite_num}人即可完成任务`;
                case 1:
                    return `活动未开始`;
                case 3:
                    return `你已经邀请${this.headTaskData.invite_num}人`;
            }
        },
        timeShow() {
            return `${this.timeData.days ? this.timeData.days + '天' : ''}
                    ${this.timeData.hours}:
                    ${this.timeData.mins}:
                    ${this.timeData.secs}开始`;
        }
    },
    mounted() {
        // 未开始
        if (this.headTaskData.state == 1) {
            this.countTimeGo();
        }
    },
    methods: {
        timeCountDown() {
            //倒计获取
            let that = this;
            let leftTime = that.headTaskData.beginTime - 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);

            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;
        },
        receiveAward() {
            if (this.headTaskData.completeType == 0) {
                this.isShowDialog = true;
            } else {
                window.location.href = this.headTaskData.completeUrl;
            }
        }
    }
};
</script>
<style scoped lang="scss">
* {
    margin: 0;
}
.head-task {
    text-align: center;
    font-weight: 500;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 0.32rem;
    box-sizing: border-box;
    margin-bottom: 0.4rem;
    .head-task-state {
        font-size: 0.4rem;
        padding-top: 0.4rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff5cc;
        line-height: 0.56rem;
    }
    .head-task-btn {
        font-size: 0.28rem;
        margin-top: 0.4rem;
        width: 2.32rem;
        height: 0.56rem;
        background: #ffffff;
        border-radius: 0.4rem;
        font-weight: 500;
        color: #ff781f;
        line-height: 0.56rem;
    }
    .head-task-time {
        padding-top: 0.08rem;
        font-size: 0.28rem;
        font-weight: 500;
        color: #fff5cc;
    }
    .head-task-text {
        font-size: 0.35rem;
        font-weight: 400;
    }
}
.state-complete {
    justify-content: space-between;
}
.state-no-start {
    flex-direction: column;
    margin-bottom: 0.16rem !important;
}
</style>
