<template>
	<view class="Countdown">
		<view v-if="remainingTime === 0" @click="startCountdown">获取验证码</view>
		<view v-else>{{ remainingTime }}s 后重新获取</view>
	</view>
</template>

<script>
	export default {
		name: 'Countdown',
		data() {
			return {
				remainingTime: 0,
				timer: null
			}
		},
		methods: {
			startCountdown() {
				this.$emit('start')
			},
			start() {
				this.remainingTime = 60;
				this.timer = setInterval(() => {
					this.remainingTime--;
					if (this.remainingTime === 0) {
						clearInterval(this.timer);
					}
				}, 1000);
			}
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	}
</script>

<style lang="scss" scoped>
	.Countdown{
		font-size: 26rpx;
	}
</style>