<template>
	<view>
		<view class="" style="height: 100rpx;"></view>
		<view class="titleText">
			输入验证码
		</view>
		<view class="titlelabel">
			4位验证码已发送至 <text>{{phone}}</text>
		</view>
		<view class="codeBody">
			<valid-code ref="validCode" @finish="getInpCode"></valid-code>
		</view>
		<view v-if="action === 'can'" class="code_time" @click="getCode">
			重新发送
		</view>
		<view v-else-if="action === 'wait'" class="code_time nocheck">
			重新发送({{codeint}})
		</view>
		<view v-else-if="action === 'sending'" class="code_time">
			发送中...
		</view>
	</view>
</template>

<script>
	import validCode from '@/components/p-valid-code/p-valid-code.vue'
	import {
		mapGetters
	} from 'vuex'
	const resendTime = 120
	export default {
		components: {
			validCode
		},
		computed: {
			...mapGetters(['sendTimes']),
			
		},
		data() {
			return {
				phone: '',
				action: 'wait',
				codeint: resendTime,
				defCount:5,
				
			}
		},
		onLoad({
				phone,count
			}) {
			this.phone = phone;
			this.count=count;
			this.setTimer();
		},
		onShow() {
			let diffCount=this.defCount-this.count
			if(this.count>=2){
				uni.showToast({
					title:`今日验证码已获取${this.count}次，还有${diffCount}次获取机会`,
					icon:'none',
					duration:3000
				})	
				
			}
			
			this.$refs.validCode.clear()
		},
		methods: {
			getInpCode: function(e) {
				uni.$emit('setSMS', e)
			},
			setTimer() {
				var sendCode = setInterval(() => {
					this.codeint -= 1;
					if (this.codeint <= 0) {
						this.action = 'can'
						this.codeint = resendTime;
						clearInterval(sendCode);
						return;
					}
				}, 1000)
			},
			getCode: function() {
				if (this.action !== 'can') {
					return;
				}
				this.action = 'sending';
				let nextCount=this.sendTimes*1+1;
				let realCount=this.defCount-nextCount
				if(nextCount>1 && nextCount<=this.defCount){
					uni.showToast({
						title:`今日验证码已获取${nextCount}次，还有${realCount}次获取机会`,
						icon:'none',
						duration:3000
					})	
					this.$store.dispatch('UpdateUserSendTimes',nextCount);
					uni.$emit('accountsendValidate', () => {
						this.action = 'wait';
						this.setTimer()
					})
				}
				else {
						uni.showToast({
							title:`今日验证码已获取${this.defCount}次，请明日再来`,
							icon:'none',
							duration:3000
						})
						this.action='can';
				}
				
				
			}
		}
	}
</script>

<style>
	.code_time {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #1B66FF;
		margin: 0 auto;
		width: 80%;
		margin-top: 30rpx;
	}

	.codeBody {

		width: 80%;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.titlelabel text {
		color: #151515;
	}

	.titlelabel {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		margin: 0 auto;
		width: 80%;
	}

	.titleText {
		font-family: PingFangSC-Medium;
		font-size: 46rpx;
		color: #333333;
		font-weight: bold;
		width: 80%;
		margin: 0 auto;
		padding: 30rpx 0;
	}

	.nocheck {
		opacity: 0.6;
	}
</style>
