/**
 * 找回密码页面
 */
<template>
	<view class="find-password">
		<view v-if="isShow">
			<p class="title">请验证以下信息</p>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
				<u-form-item label="员工号" prop="number" labelWidth="80" class="form-item">
					<u--input v-model="form.number" placeholder="请输入员工号"></u--input>
				</u-form-item>
				<u-form-item label="姓名" prop="name" labelWidth="80" class="form-item">
					<u--input v-model="form.name" placeholder="请输入员姓名"></u--input>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone"  labelWidth="80" class="form-item">
					<u-button v-model="form.phone"  @click="getUserInfo" border="none">{{form.phone || '获取手机号'}}</u-button>
				</u-form-item>
			</u--form>
			<u-button type="primary" text="下一步" @click="nextGo" style="margin-top: 36rpx;"></u-button>
		</view>
		<view  v-else>
			<p class="title">请设置新密码</p>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
				<u-form-item label="密码" prop="password" labelWidth="80" class="form-item">
					<u--input v-model="form.password" placeholder="请输入密码" password></u--input>
				</u-form-item>
				<u-form-item label="确认密码" prop="confirmPassword" labelWidth="80" class="form-item">
					<u--input v-model="form.confirmPassword" placeholder="请再次输入密码" password></u--input>
				</u-form-item>
			</u--form>
			<u-button type="primary" text="完成" @click="passwordOk" style="margin-top: 36rpx;"></u-button>
		</view>
		<u-popup :show="sqShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
			<view class="popup">
				<view class="popup-title"> 微信授权</view>
				<view class="popup-content">
					申请获取你微信绑定的手机号***********？
				</view>
				<view class="popup-buttom">
					<view class="popup-jujue" @click="reject">
						拒绝
					</view>
					<view class="popup-yunxu" @click="permit">
						允许
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="jujueShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
			<view class="popup">
				<view class="popup-all-title">
					拒绝将无法进行修改密码!
				</view>
				<view class="popup-buttom">
					<view class="popup-jujue" @click="rejectAll">
						仍要拒绝
					</view>
					<view class="popup-yunxu" @click="permit">
						允许授权
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="errorShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
			<view class="popup">
				<view class="popup-error-title">
                 您的账号信息验证不通过，请重新填写。
				</view>
				<view class="popup-buttom-error">
					<view class=" popup-jujue-fanhui" @click="errorFh">
						返回
					</view>
					<view class=" popup-jujue-queren" @click="errorQr">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			form:{
				number:''  ,//员工号
				name: '', //姓名
				phone: '', //电话
			},
			rules: {
				name: [{
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change'],
				}],
				number: [{
					required: true,
					message: '请填写员工号',
					trigger: ['blur', 'change'],
				}],
				password: [{
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					{
						pattern: /^[0-9a-zA-Z]*$/g,
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字'
					},
					{
						min: 8,
						max: 15,
						message: '长度在8-15个字符之间'
					}
				],
			},
			sqShow:false,
			jujueShow:false,
			errorShow: false,
			isShow:true
			}
		},
		methods: {
			//设置密码完成
			passwordOk(){
			wx.navigateTo({
				url: '/pages/login/login'
			})
			},
			//注册失败确认
			errorQr() {
				this.errorShow = false
			},
			//注册失败返回
			errorFh() {
				this.errorShow = false
			},
			//点击下一步
			nextGo(){  
			console.log(this.form)
			this.isShow = false
			// this.errorShow = true
			},
			//任然要拒绝
			rejectAll() {
				this.jujueShow = false
			},
			//允许获取
			permit() {
				this.sqShow = false
				this.jujueShow = false
			},
			//拒绝获取
			reject() {
				this.sqShow = false
				this.jujueShow = true
			},
			open() {
			
			},
			//收起键盘
			hideKeyBorder(e) {
			      wx.hideKeyboard({
               complete: res => {
                 console.log('hideKeyboard res', res)
                }
                 });
			    },
			//关闭授权获取手机号弹窗
			close() {
				this.sqShow = false
			},
			//获取用户手机号
			 getUserInfo() {
			 this.hideKeyBorder()
			 setTimeout(()=>{
				 this.sqShow = true
				 wx.getUserInfo({
				 	success: function(res) {
				 		console.log(res)
				 	}
				 })
			 },30)
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.find-password{
		padding: 32rpx;
	}
	.title {
		font-size: 42rpx;
		font-weight: 500;
		margin-bottom: 32rpx;
			}
			.popup {
				width: 700rpx;
				height: 450rpx;
			
				.popup-title {
					text-align: center;
					font-size: 36rpx;
					margin: 35rpx;
				}
			
				.popup-content {
					width: 70%;
					margin-left: 135rpx;
					line-height: 54rpx;
				}
			
				.popup-error-title {
					margin-left: 36rpx;
					margin-right: 36rpx;
					margin-top: 50rpx;
					font-size: 38rpx
				}
			
				.popup-login {
					margin-left: 240rpx;
					margin-top: 120rpx;
					width: 180rpx;
					height: 52rpx;
					background-color: skyblue;
					border-radius: 8rpx;
					line-height: 52rpx;
					border: #000 1px solid;
					text-align: center;
					color: #fff;
				}
				.popup-buttom {
					padding: 70rpx;
					margin-top: 24rpx;
					display: flex;
					justify-content: space-between;
				}
				.popup-buttom-error{
					padding: 70rpx;
					margin-top: 54rpx;
					display: flex;
					justify-content: space-between;
				}
			
				.popup-jujue-fanhui {
					width: 160rpx;
                    height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					border-radius: 8rpx;
					background-color: gray;
					color: #fff;
				}
			
				.popup-jujue-queren {
					width: 160rpx;
					height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					border-radius: 8rpx;
					background-color: skyblue;
					color: #fff;
				}
			
				.popup-buttom view {
					width: 180rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					border-radius: 6rpx;
					border: 1px #000 solid;
				}
				.popup-all-title {
					text-align: center;
					font-size: 42rpx;
					margin-top: 142rpx;
				}
				}
</style>
