<template>
	<view class="counDown">
		<view class="text">限时<text class="tip">抢购</text></view>
		<view class="time">{{day}}</view>
		<view class="day">天</view>
		<view class="time">{{hour}}</view>
		<view class="symbol">{{symbol}}</view>
		<view class="time">{{min}}</view>
		<view class="symbol">{{symbol}}</view>
		<view class="time">{{sec}}</view>
	</view>
</template>

<script>
export default{
	props:{
		text:{
			type:String,
			default:''
		},
		symbol:{
			type:String,
			default:'：'
		},
		endTime:{
			type:Number,
			default:0
		}
	},
	watch: {//监听时间的变化
		endTime() {
			this.countdowm()
		}
	},
	data(){
		return {
			day:'0',
			hour:'00',
			min:'00',
			sec:'00',
			endTimes:0,
		}
	},
	mounted() {
		this.endTimes=this.endTime/1000
		getApp().globalData.isTime=true
		this.countdowm()
	},
	destroyed(){
		getApp().globalData.isTime=false
	},
	methods:{
		countdowm(){
			let self = this;
			let t=self.endTimes
			t-=1000
			this.endTimes=t
			if(t>0 && getApp().globalData.isTime){
				let day = Math.floor(t/86400000);
				let hour=Math.floor((t/3600000)%24);
				let min=Math.floor((t/60000)%60);
				let sec=Math.floor((t/1000)%60);
				hour = hour < 10 ? "0" + hour : hour;
				min = min < 10 ? "0" + min : min;
				sec = sec < 10 ? "0" + sec : sec;
				self.day=day
				self.hour=hour
				self.min=min
				self.sec=sec
				setTimeout(s=>{
					self.countdowm()
				},1000)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.counDown{
	display: flex;
	color: #fa717f;
	font-size: 26rpx;
	.time{
		background: #eee2c8;
		width: 40rpx;
		text-align: center;
	}
	.text{
		margin-right: 10rpx;
		color: #1f1f1f;
		font-weight: 500;
		font-style:oblique;
		.tip{
			color: $sl-theme-red;
		}
	}
	.day{
		color: #999;
		margin: 0 10rpx;
	}
	.symbol{
		color: #999;
	}
}
</style>