<template>
	<view class="uni-countdown">
		<view v-if="showDay" class="uni-countdown__number" :style="{borderColor:borderColor, color:color}">{{d}}</view>
		<view v-if="showDay" class="uni-countdown__splitor" :style="{color:splitorColor}">天</view>
		<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color}">{{h}}</view>
		<view class="uni-countdown__splitor" :style="{color:splitorColor}">{{showColon ? ':' : '时'}}</view>
		<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color}">{{i}}</view>
		<view class="uni-countdown__splitor" :style="{color:splitorColor}">{{showColon ? ':' : '分'}}</view>
		<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color}">{{s}}</view>
		<view v-if="!showColon" class="uni-countdown__splitor" :style="{color:splitorColor}">秒</view>
	</view>
</template>
<script>
	export default {
		name: "countdown",
		props: {
			showDay: {
				type: Boolean,
				default: false
			},
			showColon: {
				type: Boolean,
				default: true
			},
			backgroundColor: {
				type: String,
				default: "#FFFFFF"
			},
			borderColor: {
				type: String,
				default: "#000000"
			},
			color: {
				type: String,
				value: "#000000"
			},
			splitorColor: {
				type: String,
				default: "#000000"
			},
			day: {
				default: 0
			},
			hour: {
				default: 0
			},
			minute: {
				default: 0
			},
			second: {
				default: 0
			}
		},
		data() {
			return {
				timer: null,
				d: '00',
				h: '00',
				i: '00',
				s: '00',
				leftTime: 0,
				seconds: 0
			}
		},
		created: function(e) {
			// this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
			// this.countDown()
			this.timer = setInterval(() => {
				
				if(this.seconds == 0){
				// console.log(123)
				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
				}
				this.seconds--
				if (this.seconds < 0) {
					this.timeUp()
					return
				}
				// console.log(this.seconds)
				this.countDown()
			}, 1000)
		}, 
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			toSeconds(day, hours, minutes, seconds) {
				return (day * 60 * 60 * 24) + (hours * 60 * 60) + (minutes * 60) + seconds
			},
			timeUp() {
				clearInterval(this.timer)
				this.$emit('timeup')
			},
			countDown() {
				let seconds = this.seconds
                let [day, hour, minute, second] = [0, 0, 0, 0]
				if (seconds > 0) {
					day = Math.floor(seconds / (60 * 60 * 24))
					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
				} else {
					this.timeUp()
				}
                if (day < 10) {
                	day = '0' + day
                }
				if (hour < 10) {
					hour = '0' + hour
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
                this.d = day
				this.h = hour
				this.i = minute
				this.s = second
			}
		},

	}
</script>
<style lang="scss">
	$countdown-height:44upx;

	.uni-countdown {
		// padding: 2upx 0;
		display: inline-flex;
		flex-wrap: nowrap;
		justify-content: center;

		&__splitor {
			justify-content: center;
			// line-height: $countdown-height;
			// padding: 0 5upx;
            font-size: 24upx;
		}

		&__number {
			// line-height: $countdown-height;
			justify-content: center;
			// height: $countdown-height;
			// border-radius: $uni-border-radius-base;
			margin: 0 5upx;
			font-size: 24upx;
			// border: 1px solid #000000;
			font-size: 24upx;
			// padding: 0 10upx;
		}
	}
</style>