<template>
	<view class="container">
		<div class="userinfo">
			<div class="icon" @click="goBack">
				<uni-icons type="back" size="25" color="white"></uni-icons>
			</div>
			<div class="Header">
				<span>修改密码</span>
			</div>
		</div>
		<div class="info">
			<uni-forms :modelValue="formData" style="width: 100%;height: 100%;">
				<uni-forms-item label="原密码" :required="true" class="form">
					<uni-easyinput type="password" v-model="formData.oldSecretKey" placeholder="请输入原密码" class="password"/>
				</uni-forms-item>
				<uni-forms-item label="新密码" :required="true" class="form">
					<uni-easyinput type="password" v-model="formData.newSecretKey" placeholder="请输入新密码" class="password"/>
				</uni-forms-item>
				<uni-forms-item label="再次输入新密码" label-width="120px" :required="true" class="form">
					<uni-easyinput type="password" v-model="formData.secondSecretKey" placeholder="请再次输入新密码" class="password"/>
				</uni-forms-item>
				<button type="primary" class="button" @click="save(formData)">保存</button>
			</uni-forms>
		</div>
		
	</view>
	
</template>

<script>
	
	import CryptoJS from 'crypto-js'	
	
	export default {
		data() {
			return {
				formData: {
					oldSecretKey: '',
					newSecretKey: '',
					secondSecretKey: '',
				},
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			save(formData){
				
				let new_params = {
					userId: '' ,
					oldSecretKey: '',
					newSecretKey: '',
					secondSecretKey: '',	
				}
				
				new_params.oldSecretKey = CryptoJS.MD5(formData.oldSecretKey).toString()
				new_params.newSecretKey = CryptoJS.MD5(formData.newSecretKey).toString()
				new_params.secondSecretKey = CryptoJS.MD5(formData.secondSecretKey).toString()
				new_params.userId = uni.getStorageSync('value').userId
				// console.log(formData)
				
				uni.$http.post('/gunshiApp/xfflood/user/updateSecretKey',new_params).then(res=>{
					console.log(res);
					if (res.data.code === 200) {
						uni.showToast({
							title: res.data.description,
							icon:'none',
							duration: 2000
						})
						setTimeout(uni.navigateBack(),2500)
					} else {
						uni.showToast({
							title: res.data.description,
							icon:'none',
							duration: 2000
						})
					}
				})
				// uni.navigateBack()
			},

		}
	}
</script>

<style>
	.container{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.info{
		display: flex;
		flex:1;
	}
	.userinfo{
		border-radius: 5px;
		display: flex;
		flex-direction: row;
		margin-top: 4vh;
		margin-left: 2vw;
		margin-bottom: 2vh;
		align-items: center;
		width: 95%;
		height: 6vh;
		background-color: #007afd;
		
	}
	.icon{
		width: 6vw;
		height: 6vh;
		align-items: center;
		line-height: 6vh;
	}
	.Header{
		display: flex;
		flex-direction: row;
		flex: 0.95;
		justify-content: center;
		color: white;
		font-size: 20px;		
	}
	.form{
		height: 50px;
		width: 95%;
		/* background-color: red; */
		/* margin-left: 2vw; */
		margin: 0 11px;
		align-items: center;
	}
	.password{
		font-size: 20px;
		border: none;
	}
	.button{
		border-radius: 10px;
		display: flex;
		justify-content: center;
		flex-direction: column-reverse;
		/* margin-top: 50vh; */
		width: 90%;
		margin: 0 5%;
		height: 6vh;
		font-size: 20px;
		color: white;
		background-color: #007afd;
		position: absolute;
		bottom: 20px;
	}
	

</style>
