<template>
	<view class="page-container">
		<u--form label-width="auto" labelAlign="right"
			ref="uForm"
			:model="model"
			:rules="rules"
			:labelStyle="{
				fontSize: '28rpx',
				fontWeight: '500',
			}"
		>
			<u-cell-group :border="false">
				
				<u-cell :border="true" :isLink="false" :clickable="true">
					<view slot="value" class="value">
						<u-form-item label="用户昵称">
							{{renderItem(userInfo,'nickName','--')}}
						</u-form-item>
					</view>	
				</u-cell>
				
				<u-cell :border="true" :isLink="false" :clickable="true">
					<view slot="value" class="value">
						<u-form-item label="旧密码" prop="form.oldPassword" :required="true">
							<u--input
								v-model="model.form.oldPassword" 
								placeholder="请输入旧密码" 
								border="none"
								type="password"
								:clearable="true"
								inputAlign="right"
							>
							</u--input>
						</u-form-item>
					</view>	
				</u-cell>
				
				<u-cell :border="true" :isLink="false" :clickable="true">
					<view slot="value" class="value">
						<u-form-item label="新密码" prop="form.newPassword" :required="true">
							<u--input
								v-model="model.form.newPassword" 
								placeholder="请输入新密码" 
								border="none"
								type="password"
								:clearable="true"
								inputAlign="right"
							>
							</u--input>
						</u-form-item>
					</view>	
				</u-cell>
				
				<u-cell :border="true" :isLink="false" :clickable="true">
					<view slot="value" class="value">
						<u-form-item label="确认密码" prop="form.confirmPassword" :required="true">
							<u--input
								v-model="model.form.confirmPassword" 
								placeholder="请输入确认密码" 
								border="none"
								type="password"
								:clearable="true"
								inputAlign="right"
							>
							</u--input>
						</u-form-item>
					</view>	
				</u-cell>				
			</u-cell-group>
			
		</u--form>
		
		<view class="footer">
			<u-row style="margin-top: 40rpx;">
				<u-col :span="12" style="padding: 0 30rpx;">
					<u-button type="primary" shape="circle"  
            color="linear-gradient(to right, #41B5FF, #4573FC)"
            :custom-style="{
							width: '100%',
							height: '38px'
						  }"  @click="handleSubmit">提交
					</u-button>
				</u-col>	
			</u-row>
		</view>
	</view>
</template>

<script>
import { encrypt, decrypt } from "@/utils/jsencrypt";
import {updateUserPwd,userProfile} from '@/api/common/user.js'

export default {
	components: {
	},
	data() {
		return {
			model: {
				  form: {
					oldPassword: "",
					newPassword: "",
					confirmPassword: "",
				  }
			},
			rules: {
				'form.oldPassword': [
					{
						type: 'string',
						required: true,
						message: '请输入旧密码',
						trigger: ['blur', 'change']
					},	
				],
				'form.newPassword': [
					{
						type: 'string',
						required: true,
						message: '请输入新密码',
						trigger: ['blur', 'change']
					},
					/* {
						type: 'string',
						required: true,
						message: '长度在 6 到 20 个字符',
						min: 6, max: 20,
						trigger: ['blur', 'change']
					}, */
				],
				'form.confirmPassword': [
					{
						type: 'string',
						required: true,
						message: '请输入确认密码',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							if (this.model.form.newPassword != value) {
							callback(new Error("两次输入的密码不一致"));
						  } else {
							callback();
						  }
						},
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				
			},
			userInfo: null,
		}
	},
	onLoad() {
		this.getUserInfo()
	},
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)		
	},
	methods: {
		getUserInfo() {
			userProfile().then((res) => {
				this.userInfo = res.data
			})
		},
		// 提交
		async handleSubmit() {
			  this.$refs.uForm.validate().then(async res => {
					  let ajaxData = {
						  ...this.model.form,
					  }
					  ajaxData.oldPassword = encrypt(ajaxData.oldPassword)
					  ajaxData.newPassword = encrypt(ajaxData.newPassword)
					  delete ajaxData.confirmPassword
					  
					  let { data, code } = await updateUserPwd(ajaxData) 
					  
					  if (code == 0) {
							this.$modal.msgSuccess('修改成功')		 
					  }	
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	background: #fff;
	font-size: 28rpx;
	min-height: 100%;
	position: relative;
	.footer {
		padding: 10rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {

	.u-cell__body {
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		
		.value {
			flex: 1;
			
			.u-form-item__body {
				padding: 0;
			}
		}
		.u-form-item__body__right__content__slot {
			flex: 1;
			justify-content: flex-end;
			text-align: right;
		}
	}
	
}
</style>
