<template>
	<view>
		<view class="main">
			<view class="code">
				<uni-easyinput v-model="ret.phone" :maxlength="11" :placeholder="plad" />
				<com-zw />
				<view class="flex">
					<uni-easyinput v-model="ret.code" type="number"
						placeholder="请输入验证码" :maxlength="4"
						:clearable="false" />
					<button :class="choose == false ? 'hasChosen':'notChosen'"
						@tap.stop="send(ret.phone,clock)"
						:disabled="choose">
						{{ choose ? clock + '重新获取' : '获取验证码' }}
					</button>
				</view>
			</view>
			<u-button type="primary" @tap.stop="confirm(ret.phone,ret.code)">登录</u-button>
		</view>
	</view>
</template>
<script>
	import { reg } from '@/utils/global.js'
	export default {
		name:"phone-verify",
		props:{
			ret:{
				type:Object,
				default(){
					return {
						phone:'',
						code:''
					}
				}
			},
			plad:{type:String,default:'请输入手机号'},
		},
		data(){
			return{
				choose:false,
				isChoose:false,
				clock: 60 ,// 倒计时
			}
		},
		methods:{
			setGlobal(e,k){ // 手机号验证
				if(reg(e,k) && this.isChoose == false){
					this.choose = true
					this.setTime()
				}else if(reg(e,k) && this.isChoose == true){
					// 调用API
				}
			},
			
			send(e,k){ // 获取验证码
				this.isChoose = false
				this.setGlobal(e,k)
			},
			
			setTime(){// 倒计时函数
				if(this.clock == 0){
					this.clock = 60
					this.choose = false
					return
				}else{
					this.clock--
					if(this.clock < 10){this.clock = '0'+this.clock}
				}
				setTimeout(() => { this.setTime() },1000)
			},
			
			confirm(e,k){ // 提交
				this.isChoose = true
				this.setGlobal(e,k)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/scss/phone-verify.scss'; 
</style>