<template>
	<view>
	    <view class="countdown" v-if="status > 0">
			<!-- <view>
				<text v-if="status == 1">距离开始时间</text>
				<text v-if="status == 2">距离结束时间</text>
				<text v-if="status == 3">活动已结束</text>
			</view> -->
			<view class="before" v-if="time.day > 0">
				<text :style="{ color: color }">距结束</text>
			</view>
	        <view class="day" v-if="time.day > 0">
	            <text class="text" :style="{ backgroundColor: props.theme, color: color }">{{time.day}}</text>
	        </view>
			<view class="colon-text" v-if="time.day > 0" :style="{ color: color }">天</view>
	        <view class="hour">
	            <text class="text" :style="{ backgroundColor: props.theme, color: color }">{{time.hour}}</text>
	        </view>
			<view class="colon" :style="{ color: color }">:</view>
	        <view class="minute">
	            <text class="text" :style="{ backgroundColor: props.theme, color: color }">{{time.minute}}</text>
	        </view>
			<view class="colon" :style="{ color: color }">:</view>
	        <view class="second">
	            <text class="text" :style="{ backgroundColor: props.theme, color: color }">{{time.second}}</text>
	        </view>
	    </view>
	</view>
</template>

<script setup>
	import { ref, watch } from "vue";
	
	const props = defineProps({
		nowTime: {
		    type: Number,
		    default: 0
		},
		startTime: {
		    type: Number,
		    default: 0
		},
		endTime: {
		    type: Number,
		    default: 0
		},
		fillZero: {
		    type: Object,
		    default: ()=>{
		        return {
		            day    : {  count : 86400, num : 2,  def : '00' },
		            hour   : {  count : 3600,  num : 2,  def : '00' },
		            minute : {  count : 60,    num : 2,  def : '00' },
		            second : {  count : 1 ,    num : 2,  def : '00' }
		        }
		    }
		},
		color: {
			type: String,
			default: "#ffffff"
		},
		theme: {
			type: String,
			default: "#7e373d"
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue","change"]);
	
	let time = ref({
	    day: "00",
	    hour: "00",
	    minute: "00",
	    second: "00"
	});
	
	let now     = ref(0);
	let start 	= ref(0);
	let end 	= ref(0);
	let total 	= ref(0);
	let timer 	= ref(null);
	let status  = ref(0);
	
	/**
	 * @param value 0:隐藏 1:距离开始时间 2:距离结束时间 3:活动已结束
	 */
	const updateStatus = (value)=>{
		status.value = value;
	    emits("change",value);
	}
	
	const fill = (i,n)=>{
	    let str = '' + i;
	    while(str.length < n){
	        str = '0' + str;
	    }
	
	    return str;
	}
	
	const runTime = ()=>{
	    if(total.value <= 0){
	        timer.value && clearInterval(timer.value);
	        updateStatus(3); // 活动已结束
	        return ;
	    }
	
	    let dateTime = total.value;
	    for(let i in props.fillZero){
	        let data = props.fillZero[i];
	        let flag = dateTime >= data.count ? true : false;
	        if(!flag){
	            time.value[i] = data.def;
	        }
	
	        if(flag){
	            let value = Math.floor(dateTime / data.count);
	            time.value[i] = fill(value.toString(),data.num);
	            dateTime -= value * data.count;
	        }
	    }
		
	    total.value--;
	}
	
	const run = ()=>{
		now.value = props.nowTime;
		start.value = props.startTime;
		end.value = props.endTime;
		total.value = props.endTime - props.nowTime;
		
		updateStatus(0);
		if(total.value <= 0){
		    updateStatus(3); // 活动已结束
		    return ;
		}else if(props.nowTime < props.startTime){
			updateStatus(1); // 距开始仅剩
		}else if(props.nowTime > props.startTime && props.endTime > props.nowTime){
		    updateStatus(2); // 距结束仅剩
		}
		
		timer.value = setInterval(()=>{
		    runTime();
		},1000);
	}
	
	watch(()=>props.endTime,(value)=>{
		run();
	},{ deep: true, immediate: true })
	
</script>

<style lang="scss" scoped>
	.countdown {
		display: flex;
		flex-direction: row;
		view {
			.text {
				background-color: transparent;
				font-size: 26rpx;
				color: #fff;
				border-radius: 8rpx;
				padding: 2rpx 6rpx;
			}
		}
		.before {
			color: #fff;
			padding-right: 8rpx;
			font-size: 22rpx;
			position: relative;
			top: 8rpx;
			text {
				color: #fff;
				font-size: 22rpx;
			}
		}
		.colon {
			color: #fff;
			padding: 0 8rpx;
		}
		.colon-text {
			color: #fff;
			padding: 0 8rpx;
			font-size: 22rpx;
			position: relative;
			top: 8rpx;
		}
	}
</style>