<template>
	<view>
		<view class="content">
			<view class="item">
				<view class="title-text" >原密码:</view>
				<input class="title-text" placeholder="请输入原密码" type="password" v-model="ypassword" placeholder-class="input-placeholder" />
			</view>
			<view class="divider-line"></view>
			<view class="item">
				<view class="title-text">新密码:</view>
				<input class="title-text" placeholder="请输入新密码" type="password" v-model="npassword" placeholder-class="input-placeholder" />
			</view>
			<view class="divider-line"></view>
			<view class="item">
				<view class="title-text">新密码:</view>
				<input class="title-text" placeholder="请确认新密码" type="password" v-model="rnpassword" placeholder-class="input-placeholder" />
			</view>
			<view class="divider-line"></view>
		</view>
		<view class="uni-btn-v"><button class="save-btn" @tap="changePassword">保存</button></view>
	</view>
</template>

<script>
	import common from '../../common/common.js'
	import md5 from '../../common/md5.js';
	import CryptoJS from '../../common/crypto/crypto-js.js';
	var _self;
	export default {
		data() {
			const token = '';
			return {
				token: '',
				ypassword: '',
				npassword: '',
				rnpassword: '',
			};
		},
		methods: {
			// password: md5.md5(md5.md5(md5.md5(_self.uUserPwd))),
			changePassword() {
				if (_self.checkParams()) {
					uni.showLoading({
						title: '修改中...',
					})
					var urlPath = common.userCenterBaseUrl + '/app/user/updateuserpassword'
					uni.request({
						url: urlPath,
						method: 'PUT',
						data: {
							'newPassword': md5.md5(md5.md5(md5.md5(_self.npassword))),
							'oldPassword': md5.md5(md5.md5(md5.md5(_self.ypassword)))
						},
						header: {
							'token': _self.token
						},
						success(res) {
							uni.hideLoading()
							uni.showToast({
								title: '修改成功',
							})
							uni.reLaunch({
								url: '../login/index'
							})
						},
						fail(error) {
							uni.hideLoading()
							uni.showToast({
								title: '修改失败',
								duration: 1000
							})
						}
					})
				}
			},
			checkParams() {
				if (_self.ypassword == '') {
					uni.showToast({
						title: '请输入原密码',
						duration: 1000
					})
					return false;
				}
				if (_self.npassword == '') {
					uni.showToast({
						title: '请输入新密码',
						duration: 1000
					})
					return false;
				}
				if (_self.rnpassword == '') {
					uni.showToast({
						title: '请输入新密码',
						duration: 1000
					})
					return false;
				}
				if (_self.npassword != _self.rnpassword) {
					uni.showToast({
						title: '新密码不相同',
						duration: 1000
					})
					return false;
				}
				return true;
			}
		},
		onLoad() {
			_self = this;
			_self.token = _self.$RULE.token

		},
		onUnload() {},
		onShow() {
			uni.getStorage({
				key: 'appToken',
				success: res => {
					_self.token = res.data;
				}
			});
		},
		components: {}
	};
</script>

<style>
	.content {
		padding: 15rpx;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.uni-btn-v {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		border-width: 1rpx;
		border-bottom: #555555;
		width: 100%;
		padding: 15rpx;
	}

	.content .app-title {
		z-index: 99;
		font-size: 60rpx;
		color: #FFFFFF;
		border-bottom: 1rpx solid #FFFFFF;
	}

	.divider-line {
		height: 1px;
		margin-top: 5px;
		margin-bottom: 5px;
		width: 100%;
		background: #D8D8D8;
		align-self: center;
	}

	.body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		align-items: center;
	}

	.content .uni-form-item {
		margin-bottom: 20rpx;
	}

	.title {
		text-align: left;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.uni-input {
		border: 1rpx solid #FFFFFF;
		background-color: #FFFFFF;
		height: 50rpx;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.save-btn {
		display: inline-block;
		width: 80%;
		align-self: center;
		height: 80rpx;
		line-height: 70rpx;
		background: #007AFF;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin-top: 75rpx;
	}

	.body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		align-items: center;
	}

	.uni-form-item {
		display: flex;
		width: 100%;
		padding: 10upx 0;
	}

	.uni-form-item .title {
		padding: 10upx 25upx;
	}

	.uni-label {
		width: 210upx;
		word-wrap: break-word;
		word-break: break-all;
		text-indent: 20upx;
	}

	.uni-input {
		height: 50upx;
		padding: 15upx 25upx;
		line-height: 50upx;
		font-size: 28upx;
		background: #FAF8F1;
		flex: 1;
	}

	.input-placeholder {
		color: #6D6D72;
		font-size: 30rpx;
	}
.title-text{
		font-size: 30rpx;
		color: #000000;
	}
	.uni-btn-v {
		padding: 10upx 0;
	}

	.uni-row {
		flex-direction: row;
	}

	.uni-column {
		flex-direction: column;
	}
	
	.save-btn {
		display: inline-block;
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		background: #008B8B;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin-top: 75rpx;
	}
</style>
