<template>
	<view class="login-box">
		<view class="uni-header no-padding">
			<view class="uni-title">{{$t('user.renew.text.title')}}</view>
		</view>
		<view class="uni-container">
			<uni-forms ref="form" v-model="formData" :rules="rules">
				<uni-forms-item name="password" labelWidth="35">
					<uni-easyinput prefixIcon="locked-filled" @confirm="submitForm" type="password"
						v-model="formData.password" :placeholder="$t('user.renew.field.password')">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password_confirm" labelWidth="35">
					<uni-easyinput prefixIcon="locked-filled" @confirm="submitForm" type="password"
						v-model="formData.password_confirm" :placeholder="$t('user.renew.field.passwordConfirm')">
					</uni-easyinput>
				</uni-forms-item>
				<view class="uni-button-group">
					<button class="uni-button uni-button-full" type="primary" :loading="loading" :disabled="loading"
						@click="submitForm">{{$t('user.renew.button.save')}}</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex';
	let App = getApp();
	import config from '@/config.js'
	export default {
		data() {
			return {
				...config.navBar,
				loading: false,
				formData: {
					password: '',
					password_confirm: ''
				},
				rules: {
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入新密码',
							},
							{
								minLength: 6,
								errorMessage: '密码长度大于{minLength}个字符',
							}
						]
					},
					password_confirm: {
						rules: [{
								required: true,
								errorMessage: '请输入确认密码',
							},
							{
								minLength: 6,
								errorMessage: '确认密码长度大于{minLength}个字符',
							}
						]
					}
				}
			}
		},
		onLoad() {
			let _this = this;
		},
		methods: {
			...mapActions({
				init: 'app/init'
			}),
			/**
			 * 提交登录
			 */
			submitForm() {
				let _this = this;
				_this.$refs.form.validate().then(result => {
					//数据验证没有问题
					App._post_form('user/renew', result, result => {
						App.showSuccess(result.msg);
					}, false, () => {});
				}).catch(err => {
					console.log('表单提交错误');
				});
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		background-color: #fff;
	}

	.login-box {

		flex: 1;
		overflow: hidden;
		/* #ifndef H5 */
		padding: 0;
		max-width: 350px;
		max-height: 300px;
		margin-left: calc(50% - 200px);
		/* #endif */
		/* #ifdef H5 */
		margin: 0 auto;
		position: relative;
		top: 100px;
		padding: 30px 40px 80px 40px;
		max-width: 350px;
		max-height: 300px;
		border-radius: 10px;
		box-shadow: 0 0 20px #efefef;
		background-color: #FFF;
		/* #endif */


	}

	.no-padding {
		padding: 0;
	}

	.admin-logo {
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}

	.admin-logo image {
		height: 40px;
	}
</style>
