<template>
	<view class="paymentPwd-container">
		<text class="pwd-describe">{{nowSetp == 1 ? '请设置6位数字支付密码' : nowSetp == 2 ? '请再次输入密码' : ''}}</text>
		<view class="sms-item" @click="showKeyboard=!showKeyboard">
			<u-message-input mode="bottomLine" :maxlength="6" v-model="value" :dot-fill="true" :disabled-keyboard="true"></u-message-input>
		</view>
		<!-- 数字键盘 -->
		<u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
	</view>
</template>

<script>
	import {setPayPwd, changePayPwd} from '@/api/order.js'
	import md5 from 'md5'
	export default {
		data() {
			return {
				nowSetp: 1,  //  当前第几次设置密码
				value: '', //输入的内容
				showKeyboard: false,  //  是否打开键盘
				oPwd: '',  //  第一次密码
				tPwd: '',  //  第二次密码
				oldPwd: '', // 原密码
				mobile: '', // 用户手机号
				verifiCode: '', // 短信验证码
			}
		},
		onShow() {
		},
		onLoad(option) {
			if (option.code){
				this.mobile = option.mobile
				this.verifiCode = option.code
				this.oldPwd = ''
			}
			if (option.oldPwd){
				this.oldPwd = option.oldPwd
			}
			//因为此时实例没有挂载完成，需要延迟操作
			setTimeout(() => {
			  this.showKeyboard = true
			}, 50)
		},
		watch: {
			// 监听输入框输入长度
			 value: {
				handler(newVal) {
					if(newVal.length==6) {
						if(this.nowSetp == 1){
							this.oPwd = this.value
							if(this.oldPwd && this.oPwd === this.oldPwd) {
								uni.showToast({
									title: '新密码与原密码相同，请重新输入！',
									icon: 'none'
								})
								this.value = ''
								return false
							} else {
								this.value = ''
								this.nowSetp++
								this.showKeyboard = true
							}
						}else if(this.nowSetp == 2){
							this.tPwd = this.value
							this.showKeyboard = false
							this.checkPwd()
						}
					}
				},
				deep: true
			}
		},
		methods:{
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				if(this.value.length < 6){
					this.value += val
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
			},
			//  密码校验
			checkPwd(){
				if(this.oPwd == this.tPwd){
					if(this.oldPwd) {
						this.changePsw()
					} else{
						//  设置密码 请求接口
						this.setPsw()
					}
					
				}else{
					uni.showToast({ title: '两次密码不一致请重新输入', icon: 'none' })
					this.value = ''
					this.showKeyboard = true
				}
			},
			// 首次设置密码
			setPsw () {
				let params = {
					mobile: this.mobile,
					verifiCode: this.verifiCode,
					payPassword: md5(this.value)
				}
				console.log(params,'--------mima')
				setPayPwd(params).then(res=>{
					if(res.status==200) {
						uni.showToast({ title: res.message, icon: 'none' })
						 uni.$emit('setPswSuccess', {success: true})
						setTimeout(()=>{
							uni.navigateBack({
							    delta: 1
							})
						}, 2000)
					} 
				})
			},
			// 修改密码
			changePsw () {
				let params = {
					oldPayPassword: md5(this.oldPwd),
					payPassword: md5(this.value)
				}
				changePayPwd(params).then(res=>{
					if(res.status==200) {
						uni.showToast({ title: res.message, icon: 'none' })
						setTimeout(()=>{
							uni.navigateBack({
							    delta: 1
							})
						}, 2000)
					} 
				})
			},
			//  取消
			cancel(){
				this.oPwd = ''
				this.tPwd = ''
				this.value = ''
				this.nowSetp = 1
			}
		}
	}
</script>

<style lang="less">
	.paymentPwd-container{
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		.pwd-describe{
			display: block;
			color: #606266;
			padding: 80rpx 0 70rpx;
			text-align: center;
		}
		.btn-con{
			display: flex;
			justify-content: space-between;
			padding-top: 130rpx;
			.handle-btn{
				display: inline-block;
				width: 45%;
				margin: 0 auto;
				text-align: center;
			}
		}
	}
</style>

