<template>
	<view class="time_box" v-if="flag">
		<view class="black_bg" v-if="day > 0">{{day}}天{{hour}}时</view>
		<view class="black_bg" v-if="day === 0 && hour > 0">{{hour}}时{{minute}}分</view>
		<view class="black_bg" v-if="day === 0 && hour === 0">{{minute}}分{{second}}秒</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		props: {
			time: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				day: '',
				hour: '',
				minute: '',
				second: '',
				flag: true
			}
		},
		mounted() {
			let timer = setInterval(() => {
				const now = moment(new Date(), 'YYYY-MM-DD HH:mm:ss').format('x')-0,
					  end = moment(this.time, 'YYYY-MM-DD HH:mm:ss').format('x')-0,
					  du = moment.duration(end-now);
				this.day = du.days();
				this.hour = du.hours();
				this.minute = du.minutes();
				this.second = du.seconds();
				if(du.days() <=0 && du.hours() <=0 && du.minutes() <=0 && du.seconds() <= 0) {
					clearInterval(timer);
					this.flag = false;
				}
			}, 1000);
		}
	}
</script>

<style lang="less" scoped>
	.time_box {
		position: absolute;
		left: 26rpx;
		top: 40rpx;
		z-index: 10;
	}
	.black_bg {
		background:rgba(0,0,0,1);
		height: 36rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 0 20rpx;
		width: 132rpx;
		text-align: center;
	}
</style>