<template>
	<view class="changePwd-container">
		<view class="content">
			<view class="tishi">请先输入原密码，按步骤操作</view>
			<view class="input-group">
				<view class="input-row border">
					<text class="title">原密码：</text>
					<m-input class="m-input" :maxlength="30"  type="password"  displayable v-model="formCustom.oldPwd" placeholder="请输入原密码"></m-input>
				</view>
				<view class="input-row">
					<text class="title">新密码：</text>
					<m-input class="m-input" :maxlength="12" type="password" displayable v-model="formCustom.passwd" placeholder="请输入6-12位新密码"></m-input>
				</view>
				<view class="input-row">
					<text class="title">再次输入：</text>
					<m-input class="m-input" :maxlength="12" type="password" displayable v-model="formCustom.passwdCheck" placeholder="请输入6-12位新密码"></m-input>
				</view>
			</view>
		</view>
		<!-- 消息提醒弹窗 -->
		<view class="form-footer-btn">
			<u-button size="medium" hover-class="none" @click="handleReset">重置</u-button>
			<u-button size="medium" hover-class="none" :loading="loading" :custom-style="customBtnStyle" @click="handleSubmit">保存</u-button>
		</view>
	</view>
</template>

<script>
	import mInput from '../../components/m-input.vue'
	import { changePwd, logout } from '@/api/user.js'
	export default{
		name:'changePwd',
		components: {
			mInput
		},
		data(){
			return{
				formCustom: {
				  passwd: '',
				  passwdCheck: '',
				  oldPwd: ''
				},
				loading: false,
				customBtnStyle: {  //  自定义按钮样式
					borderColor: '#ed1c24',
					backgroundColor: '#ed1c24',
					color: '#fff'
				},
			}
		},
		methods:{
			messageInfo(info){
				uni.showToast({
					icon:'none',
					title: info
				})
			},
			handleSubmit(){
				let _this = this
				//非空判断密码长度判断
				if (this.formCustom.oldPwd === '') {
				   this.messageInfo("请输入原密码")
				   return 
				}  
				if (this.formCustom.passwd === '') {
				   this.messageInfo("请输入新密码")
				   return 
				}
				if (this.formCustom.passwd.length < 6) {
				   this.messageInfo("新密码最少6位")
				   return 
				}
				if (this.formCustom.passwdCheck === '') {
				   this.messageInfo("请再次输入新密码")
				   return 
				}
				if (this.formCustom.passwdCheck.length < 6) {
				   this.messageInfo("再次输入新密码最少6位")
				   return 
				}
				if (this.formCustom.passwdCheck !== this.formCustom.passwd) {
				   this.messageInfo("再次输入的密码和新密码不一样")
				   return 
				}
				// 保存
				this.loading = true
				changePwd({
				  oldPassword: this.formCustom.oldPwd,
				  password: this.formCustom.passwd
				}).then(res => {
				  if (res.status == '200') {
				    this.messageInfo('修改成功, 请重新登录')
				    setTimeout(function(){
						_this.logout()
					},800)
				  } else {
				    this.messageInfo(res.message)
					this.loading = false
				  }
				})
			},
			logout(){
				logout().then(res => {
					console.log(res)
					this.messageInfo(res.message)
					if(res.status == 200){
						// this.$store.commit("$closeWebsocket")
						this.$store.state.vuex_token = ''
						this.$store.state.vuex_userData = ''
						uni.setStorageSync('setStatusIndexFunc', 0)
						uni.reLaunch({
							url: "/pages/login/pwLogin"
						})
					}
					this.loading = false
				})
			},
			handleReset (name) {
				this.formCustom = {
				  passwd: '',
				  passwdCheck: '',
				  oldPwd: ''
				}
			}
		}
	}
	
</script>

<style lang="less">
	page{
		background: #FFFFFF;
	}
	.changePwd-container{
		width: 100%;
		font-size: 28rpx;
		padding: 20rpx 40rpx ;
		.content{
			.tishi{
				text-align: center;
				line-height: 130rpx;
				font-size: 30rpx;
				color: #999;
			}
			.input-group{
				margin-top:20rpx;
			}
			.input-row{
				padding: 10rpx 20rpx;
				background-color: #F8F8F8;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				line-height: 32px;
				display: flex;
				align-items: center;
				.title{
					width:140rpx;
					display: inline-block;
					text-align: left;
					color:#808080;
				}
			}
			.uni-input-placeholder{
				font-size: 26rpx;
				color:#989898;
			}
		}
		.u-size-default[data-v-1f520a08]{
			height: 92rpx;
		}
		.m-input-input[data-v-5a85b703]{
			position: relative;
			bottom: 4rpx;
		}
		.m-input-icon[data-v-5a85b703]{
			position: relative;
			bottom: 10rpx;
		}
		/deep/ .m-input-view{
			margin-top: 0;
		}
		.form-footer-btn{
			margin: 140upx 50upx 0;
			display: flex;
			justify-content: space-between;
		}
		.form-footer-btn uni-button{
			width: 50%;
			margin: 0 50upx;
			font-size: 30upx;
		}
	}
</style>
