<template>
	<view class="container">
		<Navbar title="修改密码" canBack></Navbar>
		<view class="auth-header">
			<view class="auth-logo">
				<u-image width="80px" height="80px" src="@/static/lpg-logo.png"></u-image>
			</view>
		</view>
		<view class="loginTitleCss flex flex-direction">
			<view class="text-xxl text-bold">
				<!-- 账号密码登录 -->
				{{accountTile}}
			</view>
			<view class="margin-top-sm text-gray">
				{{accountTip}}
				<!-- 未注册手机号登录后自动生成账号 -->
			</view>
		</view>
		<view class="auth-box">
			<u-gap height="10"></u-gap>
			<!-- 登录表单 -->
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
				<u-gap height="20"></u-gap>
				<u-form-item prop="newPwd" labelWidth="60" borderBottom ref="item-password">
					<u-input :type="inputType" maxlength="16" v-model="formData.newPwd" placeholder="请输入新密码"
						border="none">
						<template slot="suffix">
							<u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill"
								@click="inputType = 'text'"></u-icon>
							<u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off"
								@click="inputType = 'password'"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<view class="flex justify-end align-center">
					<view class="btn-group">
						<view class="w100">
							<u-button class="auth-btn" shape="circle" :disabled="!formData.newPwd.length"
								:style="{background:formData.newPwd.length?'#EA5504':'#D5D8DF'}"
								@click="handleSubmit">{{btnText}}</u-button>
						</view>
					</view>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputType: 'password',
				formData: {
					account:"",
					sms: "",
					newPwd: "",
				},
				btnText: "确定修改",
				accountTile: "输入新密码",
				accountTip: "最少6位字符，包含字母、数宇、符号中的任意两项",
				rules: {
					newPwd: {
						type: 'string',
						min: 6,
						max: 16,
						required: true,
						message: '密码长度6-16位密码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(data) {
			if (data.sms) {
				this.formData.sms = data.sms;
			}
			if (data.account) {
				this.formData.account = data.account;
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			handleSubmit() {
				this.$refs.form.validate().then(async res => {
					console.log("修改提交",this.formData);
					const result = await this.$api.loginApi.forgotPassword(this.formData);
					let {
						code,
						value
					} = result;
					if (code === 200) {
						uni.$u.toast('修改成功');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login'
							})
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #fff;
		height: 100vh;
	}

	.auth-header {
		width: 100%;
		height: 200rpx;

		.auth-logo {
			margin: 40px 0 0 40px;
		}
	}

	.auth-box {
		margin: 0 40px;

		.btn-group {
			height: 100px;
			width: 140px;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.auth-btn {
				color: #fff;
				height: 90rpx;
				font-size: 32rpx;
			}
		}
	}

	.radioCss {
		margin-top: 2px;
	}

	.loginTitleCss {
		margin: 0 40px;
	}

	/deep/.u-form-item__body__right__message {
		margin-left: 0px !important;
	}
</style>