<template>

	<view class="container" @click.stop="hideKeyboard">
		<view class="main-content">
			<view class="status-area">
				<uni-icons :type="isSet ? 'locked' : 'gear-filled'" size="48" color="#1E90FF" class="status-icon"/>
				<text class="status-text">
					{{ isSet ? (step === 1 ? languageData.password.oldPayPwd : (step === 2 ? languageData.password.newPayPwd : languageData.password.newPayPwd2)) : (step === 1 ? languageData.password.setPayPwd : languageData.password.setPayPwd2) }}
				</text>
			</view>
			<view class="password-area" @click.stop="handleFocus">
				<view
				v-for="(item, index) in 6"
				:key="index"
				class="password-item"
				:class="{ active: currentFocusIndex === index }"
				>
				<text v-if="password[index]" class="password-dot">●</text>
			</view>
			
		</view>
		
		<view v-if="showKeyboard" @click.stop="hideKeyboard"/>
			<!-- 键盘 -->
			<master-keyboard ref="keyboard" 
				keyboardtype="number" 
				:randomNumber="true" 
				:defaultValue="password" 
				@keyboardClick="handleClick"
			></master-keyboard>
			<button class="confirm-btn" :class="{ 'confirm-btn-active': password.length === 6 }" @click="handleConfirm">{{languageData.affirm}}</button>
			<text class="tip-text">{{languageData.password.pwdConstitute}}</text>
		</view>

	</view>

</template>


<script>
import keyboard  from "@/components/master-keyboard/master-keyboard.vue";
import { haveOrNotPayPwd,checkPwd,editByUserId } from '@/api/mine/payPwd.js'
export default {
	components: {
		'master-keyboard': keyboard
	},
	data() {
		return {
		  inputValue: "", // 输入的值
		  isSet: false,
		  password: '',
		  currentFocusIndex: -1,
		  step: 1, // 1: 验证原密码/设置密码, 2: 设置新密码, 3: 确认新密码
		  oldPassword: '',
		  newPassword: '',
		  showKeyboard: false,
		  param:{
			userId:this.$store.state.user.userId, 
			payPasswd:''
		  },
		  languageData:{}
		}
	},
	mounted() {
		
	},
	onLoad() {
		this.checkHasPassword();
		this.languageData = this.$languageData;
	},
	methods: {
		handleClick(e){
			// console.log("e-----",e)
			if (this.password.length < 7) {
				this.password = e.value
			}
			this.password = this.password.slice(0, 6)
			this.currentFocusIndex = this.password.length
			// console.log("this.password-----",this.password)
		},
		// 检查密码是否正确
		updatePwd() {
			editByUserId(this.param).then(res=>{
				if(res.code=='200'){
					uni.showToast({
						title: this.languageData.password.setSuccess,
						icon: 'success',
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				}else{
					uni.showToast({
						title: this.languageData.password.errSuccess,
						icon: 'error',
						duration: 1000
					})
				}
			})
		},
		checkHasPassword() {
		  uni.showToast({
		    title: this.languageData.verification,
		    icon: 'loading',
			duration: 1000
		  })
		  // 检查是否已设置密码的接口
		  haveOrNotPayPwd(this.param).then(res=>{
			  if(res.data){//有密码
			  	this.isSet = true // 已设置密码的情况
			  }else{//无密码
			  	this.isSet = false// 未设置密码的情况
			  }
			// if(res.rows[0].payPasswd!=null){
			// 	this.isSet = true // 已设置密码的情况
			// }else{
			// 	this.isSet = false// 未设置密码的情况
			// }
		  })
		},
		handleInput() {
		  if (this.password.length > 6) {
			this.password = this.password.slice(0, 6)
		  }
		},
		handleFocus() {
		  this.showKeyboard = !this.showKeyboard
		  this.$refs.keyboard.open(this.showKeyboard)//true 键盘显示 false 键盘隐藏
		  this.currentFocusIndex = this.password.length
		},
		hideKeyboard() {
		  this.showKeyboard = !this.showKeyboard
		},
		validatePassword() {
		  if (this.password.length !== 6) {
			uni.showToast({
			  title: this.languageData.password.errPwdLen,
			  icon: 'none'
			})
			return false
		  }
		  return true
		},
		handleConfirm() {
		  if (!this.validatePassword()) return
		  
		  if (this.isSet) {
			if (this.step === 1) {
			  // 验证原密码
			  this.param.payPasswd = this.password
			  // 调用验证原密码的接口
			  checkPwd(this.param).then(res=>{
				  this.password = ''
				  this.param.payPasswd = ''
				if(res.data!=null){
					this.step = 2 //下一步
				}else{
					this.step = 1//输入错误
					uni.showToast({
					  title: this.languageData.password.pwdError,
					  icon: 'error',
					  duration: 1000
					})
				}
			  })
			} else if (this.step === 2) {
			  // 设置新密码
			  this.newPassword = this.password
			  this.step = 3
			  this.password = ''
			} else {
			  // 确认新密码
			  if (this.password !== this.newPassword) {
				uni.showToast({
				  title: this.languageData.password.errSame,
				  icon: 'none'
				})
				this.password = ''
				return
			  }
			  this.param.payPasswd = this.password
			  // 调用设置新密码的接口
			  this.updatePwd()
			}
		  } else {
			if (this.step === 1) {
			  // 首次设置密码
			  this.newPassword = this.password
			  this.step = 3
			  this.password = ''
			} else {
			  // 确认新密码
			  if (this.password !== this.newPassword) {
				uni.showToast({
				  title: this.languageData.password.errSame,
				  icon: 'none'
				})
				return
			  }
				this.param.payPasswd = this.newPassword
			  // 调用设置新密码的接口
				this.updatePwd()
			}
		  }
		},
		handleBack() {
		  uni.showModal({
			title: '提示',
			content: this.languageData.password.abandon,
			success: (res) => {
			  if (res.confirm) {
				uni.navigateBack()
			  }
			}
		  })
		}
	}
}
</script>

<style>
	page {
		height: 100%;
		background-color: #FFFFFF;
	}
</style>

<style scoped>

.container {
	height: 100%;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.header {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #F5F5F5;
	flex-shrink: 0;
}
.back-icon {
	position: absolute;
	left: 32rpx;
	width: 40rpx;
	height: 40rpx;
}
.title {
	font-size: 36rpx;
	color: #333333;
	font-weight: 500;
}
.main-content {
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #FFFFFF;
	padding: 48rpx 32rpx;
}
.status-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 64rpx;
}
.status-icon {
	width: 96rpx;
	height: 96rpx;
	margin-bottom: 24rpx;
}
.status-text {
	font-size: 32rpx;
	color: #333333;
}
.password-area {
	display: flex;
	justify-content: center;
	gap: 32rpx;
	margin-bottom: 80rpx;
}
.password-item {
	width: 80rpx;
	height: 80rpx;
	border: 2px solid #E5E5E5;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.password-item.active {
	border-color: #1E90FF;
}
.password-dot {
	font-size: 36rpx;
	color: #333333;
}
.hidden-input {
	position: absolute;
	top: -999rpx;
	left: -999rpx;
}
.confirm-btn {
	width: 600rpx;
	height: 88rpx;
	background-color: #CCCCCC;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32rpx;
}
.confirm-btn-active {
	background-color: #1E90FF;
}
.tip-text {
	font-size: 24rpx;
	color: #999999;
}
</style>
