<template>
	<view>
		<u-navbar class="u-navbar-box" title="修改密码" placeholder bgColor="transparent" autoBack />
		<u-cell-group :border="false" :customStyle="{background: '#fff', margin: '30rpx',  borderRadius: '20rpx'}">
			<u-cell title="原密码" :isLink="false" :border="false">
				<template #value>
					<!-- <view>{{vuex_user.nickName}}</view> -->
					<up-input placeholder="请输入旧密码" border="none" type="password" inputAlign="right" :maxlength="20"
						v-model.trim="originPwd"></up-input>
				</template>
			</u-cell>
			<u-cell title="新密码" :isLink="false" :border="false">
				<template #value>
					<!-- <view>{{vuex_user.nickName}}</view> -->
					<up-input placeholder="请输入新密码" border="none" type="password" inputAlign="right" :maxlength="20"
						v-model.trim="newPwd"></up-input>
				</template>
			</u-cell>
			<u-cell title="确认密码" :isLink="false" :border="false">
				<template #value>
					<up-input placeholder="请再次输入新密码" border="none" type="password" inputAlign="right" :maxlength="20"
						v-model.trim="confirmPwd"></up-input>
				</template>
			</u-cell>
		</u-cell-group>

		<view style="padding-left: 20px;padding-right: 20px;">
			<up-button type="primary" @click="updateUserPwd">修改密码</up-button>
		</view>
	</view>
</template>

<script>
	import {
		updateUserPwdUrl
	} from '@/common/config/api.js';
	export default {
		data() {
			return {
				originPwd: '',
				newPwd: '',
				confirmPwd: ''
			}
		},
		methods: {
			updateUserPwd() {
				if (!this.originPwd) {
					return uni.$u.toast('请输入原密码');
				}
				if (!this.newPwd) {
					return uni.$u.toast('请输入新密码');
				}
				if (!this.confirmPwd) {
					return uni.$u.toast('请再次输入新密码');
				}

				if (this.newPwd !== this.confirmPwd) {
					return uni.$u.toast('两次密码输入不一致');
				}

				uni.showModal({
					title: '提示',
					content: '您确定要修改密码吗?',
					success(res) {
						if (res.confirm) {
							updateUserPwdUrl({
									oldPassword: this.originPwd,
									newPassword: this.newPwd
								})
								.then(res => {
									proxy.$u.toast('修改成功');
								})
						}
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F8FD;
	}

	:deep(.u-navbar__content__title) {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}
</style>