<template>
	<view class="modify-page">
		<!-- <view class="logo-head">
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1695262844000_280.png" mode="widthFix"></image>
			<view class="logo-text">旅小友</view>
		</view> -->
		<view class="modify-form">
			<view class="modify-title">修改密码</view>
			<view class="modify-item">
				<input type="password" v-model="msg.currentPwd" placeholder="请输入你的当前密码" :class="{'focus':currentFocus=='account'}" @blur="changeCurrentFocus('')" @focus="changeCurrentFocus('account')">
			</view>
			<view class="modify-item">
				<input type="password" v-model="msg.newPwd" placeholder="请输入你的新密码" :class="{'focus':currentFocus=='newPwd'}" @blur="changeCurrentFocus('')" @focus="changeCurrentFocus('newPwd')">
				<view style="margin-top: 5px;font-size: 12px;color:#ccc">
					提示：密码应是长度不小于8位的字母和数字组合
				</view>
			</view>
			<view class="modify-item">
				<input type="password" v-model="msg.secondPwd" placeholder="请再次输入你的新密码" :class="{'focus':currentFocus=='secondPwd'}" @blur="changeCurrentFocus('')" @focus="changeCurrentFocus('secondPwd')">
				
			</view>
			<view class="modify-item">
				<view class="modify-btn" @click="modifyPasswordHandler" :class="{'disable':msg.currentPwd==''||msg.newPwd==''||msg.secondPwd==''}">保存修改</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:{
					currentPwd:'',
					newPwd:'',
					secondPwd:''
				},
				currentFocus:'',
				modifyLoading:false
			}
		},
		methods: {
			changeCurrentFocus(val){
				this.currentFocus=val
			},
			modifyPasswordHandler(){
				if(this.msg.currentPwd==''||this.msg.newPwd==''||this.msg.secondPwd=='') return;
				if(!this.modifyLoading){
					let regNumber = /\d+/
					let regString = /[a-zA-Z]+/
					this.modifyLoading=true
					if(this.msg.currentPwd==0){
						this.showErrorMsg('请输入当前登录密码')
					}else if(this.msg.newPwd.length<8){
						this.showErrorMsg('密码的长度不应该低于8位')
					}else if((!regNumber.test(this.msg.newPwd))||(!regString.test(this.msg.newPwd))){
						this.showErrorMsg('新密码应该为字母和数字组合')
					}else if(this.msg.newPwd!=this.msg.secondPwd){
						this.showErrorMsg('两次输入的密码不一致')
					}else{
						uni.showLoading()
						let params={
							newPassword:this.msg.newPwd,
							oldPassword:this.msg.currentPwd
						}
						this.apipost("b2b_post_ModifyAccountPassowrd",params,(res) => {
						    if (res.resultCode == 1) {
								uni.showToast({
									title:'密码修改成功',
									icon:'none'
								})
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/user-center/user-center'
									})
								},1000)
							}
							// else{
							// 	this.showErrorMsg('密码修改失败，请重试或联系销售专员')
							// }
							uni.hideLoading()
							this.modifyLoading=false
						},(error)=>{
							this.modifyLoading=false
							uni.hideLoading()
						})
					}
				}
			},
			showErrorMsg(msg){
				uni.showToast({
					title:msg,
					icon:'error'
				})
				this.modifyLoading=false
			}
		}
	}
</script>

<style>
	/* 修改密码保存。 */
	@font-face {
	  font-family: "modify-font";src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/T24Rhfe1qmDx.woff2") format("woff2"),
	  url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/yAHhA3kgong1.woff") format("woff");
	  font-display: swap;
	}
	.modify-page{
		padding:20px;
	}
	.modify-page .modify-form{
		margin-top:50px;
		padding:20px;
	}
	.modify-page .modify-form .modify-title{
		font-size: 20px;
		font-weight: 700;
		font-family: modify-font;
		margin-bottom: 30px;
	}
	.modify-page .modify-form  .modify-item{
		margin-top: 30px;
	}
	.modify-page .modify-form  .modify-item input{
		background-color: rgba(0,0,0,.05);
		padding:0 12px;
		height: 46px;
		line-height: 46px;
		border-radius: 8px;
		color:#1d1d1d;
		font-family: nav-font;
	}
	.modify-page .modify-form  .modify-item input.focus{
		background: #1d1d1d;
		color:#FFF;
	}
	.modify-page .modify-form .modify-btn {
	  height: 80rpx;
	  background-color: #111111;
	  text-align: center;
	  line-height: 80rpx;
	  color: #fff;
	 /* font-weight: 600; */
	  font-size: 28rpx;
	  border-radius: 16rpx;
	  font-family: modify-font;
	  font-size: 16px;
	}
	
	.modify-page .modify-form .modify-btn.disable {
	  /* background-color: #ecf1f4;
	  color: #111; */
	      opacity: 0.5;
	}
</style>