<template>
	<view class="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="12" 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">
			<button @click="handleReset" type="info">
				重置
			</button>
			<button @click="handleSubmit" :style="{background: $config('buttonColors')}" :loading="loading" type="primary">
				保存
			</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
			}
		},
		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/login"
						})
					}
					this.loading = false
				})
			},
			handleReset (name) {
				this.formCustom = {
				  passwd: '',
				  passwdCheck: '',
				  oldPwd: ''
				}
			}
		}
	}
	
</script>

<style lang="less">
	page{
		background: #FFFFFF;
	}
	.container{
		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;
				.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;
		}
	}
</style>