<template>
	<view>
		<text :style="{ color: isActive ? activeColor : color, 'font-size': fontSize }">
			{{ msg }}
		</text>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: true
		},
		color: {
			type: String,
			default: "#000"
		},
		activeColor: {
			type: String,
			default: "#666"
		},
		fontSize: {
			type: String,
			default: '28rpx'
		},
		timer: {
			type: Number,
			default: 60
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue","change"]);
	
	let code 	 = ref(props.timer);
	let isActive = ref(false);
	let timer 	 = ref();
	let msg      = ref('获取验证码');
	
	const start = ()=>{
		clearInterval(timer.value);
		timer.value = setInterval(() => {
		    code.value--;
		    isActive.value = true;
		    msg.value = code.value + "秒后重发";
		    if(code.value <= 0) {
				clearInterval(timer.value);
				emits("update:modelValue", true);
		        isActive.value = false;
				code.value = props.timer;
		        msg.value = "重新获取";
		    }else{
				emits("update:modelValue", false);
			}
		}, 1000);
	}
	
	const stop = ()=>{
		clearInterval(timer.value);
		emits("update:modelValue", true);
		isActive.value = false;
		code.value = props.timer;
		msg.value  = "获取验证码";
	}
	
	defineExpose({
		start,stop
	});
</script>

<style lang="scss" scoped>
	
</style>