<template>
    <!-- 倒计时 -->
    <div class="count-down-content">
        <!-- 状态 -->
        <!-- <div class="content-status">待开播</div> -->
        <!-- 开播时间 -->
        <div class="content-number"> 距离开播倒计时 <span v-if="countdownd !== '00'">{{countdownd }} 天</span>  {{countdownh}} 时 {{countdownm}} 分 {{countdowns}} 秒</div>
        <!-- 时间组件 -->
        <!-- <div class="content-time">
            <div class="time-box">
                <div class="time">{{ countdownd }}</div>
                <div class="time-text">天</div>
            </div>
            <span class="semicolon">:</span>
            <div class="time-box">
                <div class="time">{{ countdownh }}</div>
                <div class="time-text">时</div>
            </div>
            <span class="semicolon">:</span>
            <div class="time-box">
                <div class="time">{{ countdownm }}</div>
                <div class="time-text">分</div>
            </div>
            <span class="semicolon">:</span>
            <div class="time-box">
                <div class="time">{{ countdowns }}</div>
                <div class="time-text">秒</div>
            </div>
        </div> -->
    </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
    name: 'CountDown',
    props: {
        detailData: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            countdownd:'00',
            countdownh:'00',
            countdownm:'00',
            countdowns:'00',
            timer: null, //重复执行
        }
    },
    async mounted() {
        this.timer = setInterval(() => {
            this.showtime()
        })
    },
    beforeDestroy() {
    //销毁定时器
    clearInterval(this.timer)
  },
    methods: {
        dayjs,
        /**
         * @name: 
         * @msg: 倒计时
         * @return {*}
         */
        showtime() {
            var nowtime = dayjs().format('YYYY-MM-DD HH:mm:ss') //获取当前时间
            var endtime = this.detailData;  //定义结束时间
            let lefttime = dayjs(endtime).diff(nowtime)
            let leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24));  //计算天数
            let lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime / (1000 * 60 * 60) % 24)) : Math.floor((lefttime / (1000 * 60 * 60) % 24));  //计算小时数
            let leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) : Math.floor(lefttime / (1000 * 60) % 60);  //计算分钟数
            let lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(lefttime / 1000 % 60);  //计算秒数
            if (isNaN(leftd) || isNaN(lefth) || isNaN(leftm) || isNaN(lefts)) {
            return;
            }
            this.countdownd = leftd  //返回倒计时的字符串
            this.countdownh = lefth  //返回倒计时的字符串
            this.countdownm = leftm  //返回倒计时的字符串
            this.countdowns = lefts  //返回倒计时的字符串
            // 倒计时结束时，显示00:00:00
            if (lefttime < 0) {
                // clearInterval(this.timer); //清除定时器
                this.countdownd = this.countdownh = this.countdownm = this.countdowns= "00";
            }

        },
    },
}
</script>

<style lang="scss" scoped>
.count-down-content {
    width: 404rpx;
    height: 244rpx;
    font-family: PingFangSC-Regular;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .content-status {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 40rpx;
        color: #1B2330;
        text-align: center;
        line-height: 40rpx;
        margin-bottom: 24rpx;
    }

    .content-number {
        // color: rgba(96, 104, 119, 1);
        font-size: 28rpx;
        font-face: DINPro;
        font-weight: 400;
        line-height: 28rpx;
        letter-spacing: 0;
        text-align: center;
        margin-bottom: 40rpx;
    }

    .content-time {
        height: 112rpx;
        width: 100%;
        display: inline-flex;
        justify-content: space-between;

        .time-box {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            .time {
                width: 68rpx;
                height: 80rpx;
                background: rgba(154, 164, 182, 0.10);
                border-radius: 12rpx;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-family: DINPro-Medium;
                font-weight: 500;
                font-size: 36rpx;
                color: #1B2330;
                text-align: center;
                line-height: 36rpx;
            }

            .time-text {
                font-family: PingFangSC-Regular;
                font-weight: 400;
                font-size: 24rpx;
                color: #9AA4B6;
                text-align: right;
                line-height: 24rpx;
                display: inline-flex;
            }
        }

        .semicolon {
            color: #9AA4B6;
            width: 4rpx;
            padding-top: 17rpx;
        }
    }
}
</style>