<template>
	<view>
		 <div class="accounmt">   
		    <p style="font-size:23px;color:#333333;margin-top:0">设置交易密码</p>
		    <div class="linex"></div>
		    <p style="color:#A6A6A6;font-size:12px">*请确保交易密码与登录密码不同!</p>
		    <p style="color:#A6A6A6;font-size:12px;margin:5px 0">*密码必须为 6-16 位，字母、数字或字符的组合。</p>
		    <p style="color:#A6A6A6;font-size:12px;margin-bottom: 30px;">
		        <span>*如果您收不到手机验证码，请先去</span>
		        <span style="color:#1989fa">个人信息</span>
		        <span>页面验证工作手机。</span>
		    </p>
			<view  style="padding: 0 10px;">
				<u-form :model="transactionform"  ref="transactionform" label-position='left' label-width='200'  border-bottom='false' >
					<u-form-item  label="手机号码" prop="name"  border-bottom='false' required='true'>
						<view class="sinput">
							<span v-if="wxUserInfo.phonenumber">+86 {{wxUserInfo.phonenumber}}</span>
						</view>
					</u-form-item>
					<u-form-item  label="交易密码" prop="password"  border-bottom='false' required='true'>
						<view class="sinput">
							<u-input style="width:100%;" type="password" password-icon="true" v-model="transactionform.password" placeholder='输入交易密码' />
						</view>
					</u-form-item>
					<u-form-item  label="确认交易密码" prop="newpassword"  border-bottom='false' required='true'>
						<view class="sinput">
							<u-input style="width:100%;" type="password" password-icon="true" v-model="transactionform.newpassword" placeholder='输入确认交易密码' />
						</view>
					</u-form-item>
					<u-form-item  label="短信验证码"   border-bottom='false' required='true'>
						<view class="sinput">
							<u-field v-model="transactionform.code" :clearable='isclear' label-width='0' placeholder-style="font-size:14px'color:#c0c4cc"   placeholder='请输入验证码'>
								<p  slot="right"  @click="getCode">{{codeText}}</p>
							</u-field>
							<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<button  class="button-g"  @click="submit">确认</button>
		    <u-toast ref="uToast" />
		</div>
	</view>
</template>

<script>
	import { encrypt, decrypt } from '../../../utils/encrypt.js'
	export default {
		data() {
			   const validatePass = (rule, value, callback) => {
					if (value === '') {
					return callback(new Error('请输入密码'));
					}
					if(!/^[a-z0-9][a-z0-9A-Z@#%^.*!~?|]{5,11}$/i.test(value)){
					return callback(new Error('密码格式错误'));
					}
					// if (this.getpasswordForm.repassword !== '') {
					//   this.$refs.getpasswordForm.validateField('repassword')
					// }
					return callback();
				};
				//注册的确认密码
			      const validatePass2 = (rule, value, callback) => {
			          if (value === '') {
			              callback(new Error('请再次输入密码'));
			          } else if (value !== this.transactionform.password) {
			            callback(new Error('两次输入密码不一致!'));
			          } else {
			               callback();
			          }
			      };
			return {
				wxUserInfo:null,
				transactionform:{password:'',newpassword:'',code:'',uuid:'',},
				cleart:false,
				codeText: '获取验证码',
				passRules: {
					password: [{ required: true, validator:validatePass, trigger: 'blur' },
						{ min: 6, message: '密码长度最少为6位', trigger: 'blur' },{ max: 20, message: '密码长度最长为20位', trigger: 'blur' }],
					newpassword: [{ required: true, validator:validatePass2, trigger: 'blur' },
						{ min: 6, message: '密码长度最少为6位', trigger: 'blur' },{ max: 20, message: '密码长度最长为20位', trigger: 'blur' }],
				},
			}
		},
		mounted() {
			this.wxUserInfo = uni.getStorageSync('wxUserInfo');
			
		},
		onReady(){
			this.$refs.transactionform.setRules(this.passRules);
		},
		methods: {
			isMobile(s) {
				  return /^1[0-9]{10}$/.test(s)
			},
			codeChange(text) {
				this.codeText = text;
			},
			// 获取验证码
			getCode() {
				if(!this.transactionform.newpassword){
					uni.showToast({ title: '请输入密码', icon: 'none', duration: 1000 });
				}else{
					if(this.$refs.uCode.canGetCode) {
						let phone = this.wxUserInfo.phonenumber;
						if (!phone || !this.isMobile(phone)) {
							uni.showToast({ title: '手机格式不对', icon: 'none', duration: 1000 });
							return;
						}
						
						// 获取登录验证码的接口
						this.http.quickGet('/captchaUserLogin?phoneNumber=' + phone).then((res)=> {
							console.log('获取注册验证码',res);
							if(res.data.code==200){
								this.transactionform.uuid=res.data.uuid;
								uni.showToast({title: '发送成功', icon: 'none', duration:1000 });
								setTimeout(() => {
									uni.hideLoading();
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 1000);
							}else{
								uni.showToast({title:res.data.msg, icon: 'none', duration:1000 });
							}           
						}).catch((err) => {
							console.log('err',err);
						}); 
						
						
					}else {
						this.$u.toast('倒计时结束后再发送');
					}
				}
			},
			submit(){
				this.$refs.transactionform.validate(valid => {
					if (valid) { 
						if(!this.transactionform.code){
							uni.showToast({ title: '请输入验证码', icon: 'none', duration:1000 });
						}else{							
							let data={
								// password:this.transactionform.password,
								password: encrypt(this.transactionform.password),
								code:this.transactionform.code,
								uuid:this.transactionform.uuid,
							}
							console.log('交易密码',data)
							// return;
							this.http.quickPost(`/mpay/setpasswd/${this.wxUserInfo.userId}`,data,true).then(res=>{
								console.log('设置密码成功',res.data)
								if(res.data.code==200){
									this.$refs.uToast.show({
										title: '设置成功',
										type: 'success',
										isTab:true,
										url:'pages/personal/personal'
									})
								}else{
									uni.showToast({ title: '验证码无效', icon: 'none', duration:1000 });
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style>
	.accounmt{
		background-color: #ffffff;
		/* height: 96vh; */
		width: 96vw;
		margin: 2vh auto;
		padding: 10px 15px 30px 25px;
		border-radius: 5px;
	}
	.linex{
		height:1rpx;
		width:100%;
		background:#EBEBEB;
		margin: 20px 0;
	}
	.sinput{
		display: flex;
		align-items: center;
		/* height: 50px; */
	}
	.sinput .u-input{
		/* height:35px; */
		border-bottom: 1px solid #EBEBEB!important;
	}
	.sinput .u-field{
		height:45px;
		border-bottom: 1px solid #EBEBEB!important;
		margin-bottom:10px;
		padding: 20rpx 28rpx 20rpx 0rpx!important;
		margin-left:-5px
	}
	.button-g{
		/* width:90vw; */
		height:80rpx;	
		background-color:#197BEF;
		border-radius:25px;
		text-align: center;
		line-height:80rpx;
		color: #FFFFFF;
		font-size:36rpx;
		margin-top:15px;
	}
</style>
