<template>
	<view>
		<view class="form_body" style="">
			<view class="form_body_title">
				登陆账户<br/>
				<text class="form_body_title_text">
					验证码已发送至
				</text>
				<text style="font-weight: 600;" class="form_body_title_text">{{phone}}</text>
			</view>
			<view style=" background-color: #f0f2ff; border-radius: 0;" class="form_body_input">
				<xt-verify-code style="width: 100%;" v-model="verifyCode" @confirm="confirm"></xt-verify-code>
			</view>
			<view class="switch">
				<view  @tap="switchFn">密码登录</view>
				<view style="font-size: 26rpx;color: #2866FF;" @tap="senFn">{{timer.time==0? timer.timeText:timer.time+'s'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			phone:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				value: '',
				timer:{
					time:60,
					timeText:'重新发送'
				},
				verifyCode:'',
				range: [{
					"value": 0,
					"text": ""
				}]
			}
		},
		created() {
			this.timerFn()
		},
		methods: {
			senFn(){
				if(this.timer.time!==0) return;
				this.timer.time = 60
				this.timerFn()
			},
			timerFn(){
				let that = this
				 let time = setInterval(() => {
					 console.log('定时器启动')
				        that.timer.time--;
						if(that.timer.time == 0){
							clearInterval(time)
						}
				      }, 1000);
			},
			switchFn(){
				let that = this
				uni.$emit('state',{
					state:1,
					phone:that.phone
				})
			},
			confirm(e){
				if(e){
					console.log(e)
				}
				console.log(this.verifyCode,'验证码')
			},
			sumit(){
				console.log(1)
			}
		}
	}
</script>

<style>
	.switch{
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		margin-top: 21rpx;
		margin-left:29rpx;
		display: flex;
		justify-content: space-between;
	}
.form_body_title_text{
	font-size: 28rpx;
	color: #333333;
}
</style>
