<template>
	<view class="bindPhone">
		<view class="phoneInput">
			<input class="form-input" maxlength="11" placeholder-class="form-input-placeholder" v-model="bindForm.phone" placeholder="请输入手机号" />
		</view>
		<view class="phoneInput flex-between mat15">
			<input class="form-input" maxlength="6" placeholder-class="form-input-placeholder" v-model="bindForm.code" placeholder="请输入验证码" />
			<text class="code_hr"></text>
			<text @click="getCode">{{codeCenter}}</text>
		</view>
		<view class="mat40">
			<navigator url="/pages/user/user" open-type="switchTab">
				<button class="cu-btn block bg-blue margin-tb-sm lg round" @click="bindPhoneClick">立即绑定</button>
			</navigator>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			bindForm: {
				phone: '',
				code: ''
			},
			codeCenter: '获取验证码',
			bindPhoneDisabled: true,
			totalTime: 60
		}
	},
	methods: {
		//发送验证码
		async getCode() {
			if(!this.bindForm.phone) return uni.showToast({title: '请先输入手机号',icon: 'none'})
			let pattern = /^1[3456789]\d{9}$/
			if (!pattern.test(this.bindForm.phone)) return uni.showToast({title: '请输入正确的手机号',icon: 'none'})
			let res = await this.$http.get('/api-hrms/hrms/user/info',{ phone: this.bindForm.phone })
			this.codeCenter = this.totalTime + 's后重新发送';
			let clock = window.setInterval(() => {
				this.totalTime--;
				this.codeCenter = this.totalTime + 's后重新发送';
				if (this.totalTime < 0) {
					window.clearInterval(clock);
					this.codeCenter = '重新发送验证码';
					this.totalTime = 60;
				}
			}, 1000);
		},
		// 绑定手机号码
		async bindPhoneClick() {
			if(!this.bindForm.phone) return uni.showToast({title: '请先输入手机号',icon: 'none'})
			let pattern = /^1[3456789]\d{9}$/
			if (!pattern.test(this.bindForm.phone)) return uni.showToast({title: '请输入正确的手机号',icon: 'none'})
			if(!this.bindForm.code) return uni.showToast({title: '请先输入手机号验证码',icon: 'none'})
			let res = await this.$http.get('/api-hrms/hrms/user/binding',this.bindForm)
			uni.showToast({title: '绑定成功'})
		},
	}
}
</script>

<style lang="scss" scoped>
.bindPhone{
	padding: 200rpx 90rpx 0 90rpx;
	.phoneInput{
		border: 2rpx solid #E6E6E6;
		border-radius: 40rpx;
		height: 80rpx;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
	}
	.code_hr{
		width: 2rpx;
		height: 40rpx;
		background-color: #f5f5f5;
	}
}
</style>
