<script setup>
	/**
	 * 获取验证码组件
	 */

	import {
		ref,
		onMounted,
		onBeforeUnmount,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'

	// 传入参数
	const props = defineProps({
		// 内容
		event: {
			type: String,
			default: 'register',
		},
		// 倒计时
		count: {
			type: Number,
			default: 60,
		},
		// 手机号
		phone: {
			type: String,
			default: '',
		},
	})
	// 时间
	const time = ref(60)
	// 定时器
	const timer = ref(null)
	// 进度 1获取验证码 2秒后获取 3重新获取验证码
	const plan = ref(1)

	onMounted(() => {
		// 赋值倒计时
		time.value = props.count
	})

	onBeforeUnmount(() => {
		// 设置进度
		plan.value = 1

		// 清除定时器
		clearInterval(timer.value)
	})

	// 获取验证码
	function getCode() {
		// 判断有无手机号
		if (!props.phone) {
			// if (!props.phone.match(util.reg.tel)) {
			util.alert('手机号不正确')
			return false;
		}

		// 判断当前进度
		if (plan.value == 2) {
			// 弹窗提示
			util.alert('请稍后获取验证码')
			return false;
		}

		// 设置进度
		plan.value = 2;

		// 定时器
		timer.value = setInterval(() => {
			// 清除定时器
			if (time.value > 0) {
				// 减少时间
				time.value--
			} else {
				// 设置进度
				plan.value = 3

				time.value = props.count

				// 清除定时器
				clearInterval(timer.value)
			}
		}, 1000);

		// 发送验证码
		api.login.getCaptcha({
			query: [props.phone, props.event],
			path: [props.phone, props.event],
		}).then(rs => {
			console.log(rs)
			// 返回成功
			if (rs.code == 200) {
				// 弹窗提示
				util.alert('验证码已发送')
			} else {
				//弹窗提示用户
				util.alert(rs.msg)

				// 设置进度
				plan.value = 3

				// 清除定时器
				clearInterval(timer.value)
			}
		})
	}

	// 恢复初始化
	function clear() {
		clearInterval(timer.value) // 清除定时器
		plan.value = 1;
		time.value = 60;
	}
</script>

<template name="getSms">
	<view class="getCode" @click="getCode">
		<text v-show="plan == 1">发送</text>
		<text v-show="plan == 2">（{{time}}s）</text>
		<text v-show="plan == 3">重新发送</text>
	</view>
</template>

<style lang="scss">
	// 获取验证码
	.getCode {
		white-space: nowrap;
		text-align: center;
	}
</style>