<template>
	<view class="main">
		<view class="form">
			<view class="form_group">
				<view class="lable">旧密码</view>
				<view class="icon" :class="{ active: !show }" @click="show = !show">&#xe6ef;</view>
				<input :password="show" v-model="item.oldPassword" placeholder="请输入旧密码" />
			</view>
			<view class="form_group">
				<view class="lable">新密码</view>
				<view class="icon" :class="{ active: !show }" @click="show = !show">&#xe6ef;</view>
				<input :password="show" v-model="item.newPassword" placeholder="请输入新密码" />
			</view>
			<view class="form_group">
				<view class="lable">重复密码</view>
				<view class="icon" :class="{ active: !show }" @click="show = !show">&#xe6ef;</view>
				<input :password="show" v-model="item.again" placeholder="请再次输入新密码" />
			</view>
		</view>
		<button class="btn" @click="save()">确认</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			item: {},
			show: true
		};
	},
	methods: {
		save() {
			let rule = [
				{ name: 'oldPassword', checkType: 'notnull', errorMsg: '请输入旧密码' },
				{ name: 'newPassword', checkType: 'notnull', errorMsg: '请输入新密码' },
				{ name: 'again', checkType: 'same', checkRule: this.item.newPassword, errorMsg: '两次输入不一致' }
			];
			if (!this.verify.check(this.item, rule)) {
				uni.showModal({ content: this.verify.error, showCancel: false });
				return false;
			}
			this.http.request({
				url: '/system/user/profile/updatePwd',
				data: this.item,
				method: 'PUT',
				contentType: 'application/x-www-form-urlencoded',
				success: (res) => {
					this.http.request({
						url: '/logout',
						success: (res) => {
							uni.showModal({
								title: '提示',
								content: '修改成功，请重新登录',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.removeStorageSync('user');
										uni.redirectTo({ url: '/pages/user/loginDoctor' });
									}
								}
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.form_group {
	input {
		width: 60%;
	}
	.icon {
		float: right;
		margin-top: 12px;
		font-size: 20px;
		padding-left: 10px;
		color: $font-c;
		&.active {
			color: $main-color;
		}
	}
}
</style>