<template>
	<view class="paymentPwd-container">
		<text class="pwd-describe">{{nowSetp == 1 ? '请设置6位数字支付密码' : nowSetp == 2 ? '请再次输入密码' : ''}}</text>
		<view class="sms-item" @tap='KeyboarOpen'>
			<password-input :numLng='password' :plaintext="true"></password-input>
		</view>
		<view class="btn-con">
			<u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>
			<u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
		</view>
		<!-- 数字键盘 -->
		<number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
	</view>
</template>

<script>
	import numberKeyboard from '@/pages/userCenter/userInfo/components/number-keyboard/number-keyboard.vue'
	import passwordInput from '@/pages/userCenter/userInfo/components/password-input/password-input.vue'
	export default {
		data() {
			return {
				nowSetp: 1,  //  当前第几次设置密码
				password: '', //输入的内容
				oPwd: '',  //  第一次密码
				tPwd: '',  //  第二次密码
			}
		},
		components: {
		  numberKeyboard,
		  passwordInput
		},
		onShow() {
		},
		onLoad() {
			//因为此时实例没有挂载完成，需要延迟操作
			setTimeout(() => {
			  this.$refs.KeyboarHid.open()
			}, 50)
		},
		methods:{
			//打开键盘
			KeyboarOpen(e) {
			  this.$refs.KeyboarHid.open()
			},
			//输入的值
			onInput(val) {
			  this.password = val
			},
			//  确定
			submit(){
				if(!this.password || this.password.length < 6){
					uni.showToast({ title: '请输入6位数字支付密码', icon: 'none' })
				}else{
					if(this.nowSetp == 1){
						this.oPwd = this.password
						this.$refs.KeyboarHid.reset()
						this.nowSetp++
						this.$refs.KeyboarHid.open()
					}else if(this.nowSetp == 2){
						this.tPwd = this.password
						this.checkPwd()
					}
				}
			},
			//  密码校验
			checkPwd(){
				if(this.oPwd == this.tPwd){
					//  请求接口
					uni.showToast({ title: '支付密码设置成功', icon: 'none' })
					setTimeout(()=>{
						uni.navigateBack({
						    delta: 1
						})
					}, 2000)
				}else{
					uni.showToast({ title: '两次密码不一致请重新输入', icon: 'none' })
					this.$refs.KeyboarHid.reset()
				}
			},
			//  取消
			cancel(){
				this.oPwd = ''
				this.tPwd = ''
				this.$refs.KeyboarHid.reset()
				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>

