<template>
	<view>
		<view class="content">
			
			<view class="info-item">
				<view class="label">旧密码</view>
				<view class="right">
					<input type="safe-password" v-model="oldPassword" placeholder="请输入旧密码" class="input"></text>
				</view>
			</view>
			
			<view class="info-item">
				<view class="label">新密码</view>
				<view class="right">
					<input type="safe-password" v-model="password" placeholder="请输入新密码" class="input"></text>
				</view>
			</view>
			<view class="info-item">
				<view class="label">确认密码</view>
				<view class="right">
					<input type="safe-password" v-model="password1" placeholder="请输入确认密码" class="input"></text>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">保存修改</view>
		</view>
	</view>
	

</template>

<script>
	import {setPwd,setHeadImg,setUserInfo,getUserInfo} from '@/api/user.js';
	export default {
		data() {
			return {
				oldPassword:"",
				password:"",
				password1:"",
			}
		},
		onLoad() {
		},
		methods: {
			submit(){
				if (this.utils.isEmpty(this.oldPassword)) {
					uni.showToast({
						title: "请输入旧密码",
						icon: 'none',
					});
					return
				}
				if (this.utils.isEmpty(this.password)) {
					uni.showToast({
						title: "请输入新密码",
						icon: 'none',
					});
					return
				}
				if (this.password!=this.password1) {
					uni.showToast({
						title: "两次密码输入不正确",
						icon: 'none',
					});
					return
				}
				console.log(this.password);
				var patrn=/^(\w){6,20}$/;  
				if (!patrn.exec(this.password)) {
					uni.showToast({
						title: "密码只能输入6-20个字母、数字、下划线",
						icon: 'none',
					});
					return
				}
				
				var data = {oldPassword:this.oldPassword,password:this.password};
				setPwd(data).then(
					res => {
						if(res.code==200){
							uni.showToast({
							    title: '密码修改成功',
							    duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack({
								  success: () => {
								  }
								})
							}, 500);
						}
						else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
						
					},
					rej => {}
				);
				
			}
			
		}
	}
</script>


<style scoped lang="scss">
	.content{
		padding-top: 20rpx;
		border-top: 1px solid #F5F6FA;
	}
	.info-item{
		height: 104upx;
		background: #FFFFFF;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 1px solid #F5F6FA;
		&:last-child{
			border-bottom: none;
		}
		.label{
			width: 150rpx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #0F1826;
		}
		.right{
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #0F1826;
			}
			.image{
				margin-left: 10upx;
				width: 30upx;
				height: 30upx;
			}
			.input{
				text-align: left;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #0F1826;
			}
		}
		 
	}
	.btn-box{
		margin-top: 15rpx;
		height: 120upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.sub-btn{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #4BC9B1;
			border-radius: 44upx;
		}
	}
</style>
