<template name="uni-countdown">
	<view class="uni-countdown">
		<view class="uni-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{h}}</view>
		<view class="uni-countdown-splitor" :style="{color:splitorColor}">:</view>
		<view class="uni-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{i}}</view>
		<view class="uni-countdown-splitor" :style="{color:splitorColor}">:</view>
		<view class="uni-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{s}}</view>
	</view>
</template>
<script>
	export default {
		name: "uni-countdown",
		props: {
			bgrColor: {
				type: String,
				default: "#FFFFFF"
			},
			borderColor: {
				type: String,
				default: "#000000"
			},
			fontColor: {
				type: String,
				value: "#000000"
			},
			splitorColor: {
				type: String,
				default: "#000000"
			},
			timer: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				setTime: null,
				h: '00',
				i: '00',
				s: '00',
				leftTime: 0
			}
		},
		created: function(e) {
			var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
			var res = this.timer.match(reg);
			if (res == null) {
				//console.log('时间格式错误');
				return false;
			} else {
				var year = parseInt(res[1]);
				if (year < 1000) {
					//console.log('时间格式错误');
					return false;
				}
				var month = parseInt(res[2]);
				var day = parseInt(res[3]);
				var h = parseInt(res[4]);
				if (h < 0 || h > 24) {
					//console.log('时间格式错误');
					return false;
				}
				var i = parseInt(res[5]);
				if (i < 0 || i > 60) {
					//console.log('时间格式错误');
					return false;
				}
				var s = parseInt(res[6]);
				if (s < 0 || s > 60) {
					//console.log('时间格式错误');
					return false;
				}
				var leftTime = new Date(year, month - 1, day, h, i, s);
				this.leftTime = leftTime;
				this.countDown(this);
				this.setInterValFunc(this);
			}
		},
		beforeDestroy() {
			clearInterval(this.setTime)
		},
		methods: {
			setInterValFunc: function(obj) {
				this.setTime = setInterval(function() {
					obj.countDown(obj);
				}, 1000);
			},
			countDown: function(self) {
				var leftTime = self.leftTime - new Date();
				if (leftTime > 0) {
					var hours = parseInt(leftTime / 1000 / 60 / 60, 10);
					var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
					var seconds = parseInt(leftTime / 1000 % 60, 10);
				} else {
					var hours = 0,
						minutes = 0,
						seconds = 0;
				}
				if (hours < 10) {
					hours = '0' + hours;
				}
				if (minutes < 10) {
					minutes = '0' + minutes;
				}
				if (seconds < 10) {
					seconds = '0' + seconds;
				}
				self.h = hours;
				self.i = minutes;
				self.s = seconds;
			}
		}
	}
</script>
<style>
	.uni-countdown {
		padding: 2rpx 0;
		flex-wrap: nowrap;
		justify-content: center;
	}

	.uni-countdown-splitor {
		width: auto !important;
		justify-content: center;
		line-height: 44rpx;
		padding: 0 5rpx;
	}

	.uni-countdown-numbers {
		line-height: 44rpx;
		width: auto !important;
		padding: 0 10rpx;
		justify-content: center;
		height: 44rpx;
		border-radius: 8rpx;
		margin: 0 5rpx;
		border: 1px solid #000000;
		font-size: 22rpx;
	}
</style>
