<template>
	<view class="login-container">
		<image src="/static/msjf-picture/msjf-06.png" mode="scaleToFill" class="title-iamge"></image>
		<text class="login-text">请设置用户密码</text>

		<view class="login-form">
			<input-login :inputData="inputData" @hangleInput="hangleInput" />
			<input-login :inputData="inputData1" @hangleInput="hangleInput" />
		</view>

		<image src="/static/msjf-picture/msjf-08.png" mode="" class="next-step" @click="clickComplete"></image>

		<text class="footer-text">定制管理平台</text>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { resetPwd } from '@/services/api';
import inputLogin from '../../components/inputLogin.vue';

let inputData = reactive({
	inputValue: '',
	iconfont: 'icon-mima',
	placeholder: '请输入登录密码',
	password: true,
	type: 'text',
	checkType: 'password',
	check: false,
	checkContent: '密码不为空，且不少于6位'
});

let inputData1 = reactive({
	inputValue: '',
	iconfont: 'icon-yanzhengyanzhengma',
	placeholder: '再次输入登录密码',
	password: true,
	type: 'text',
	checkType: 'nextPassword',
	check: false,
	checkContent: '两次密码不一致'
});

// input校验
let hangleInput = (Value: any, type: string) => {
	if (type === 'password') {
		if (Value.length < 5) inputData.check = true;
		else inputData.check = false;
	} else {
		if (inputData.inputValue.length !== Value.length) {
			inputData1.check = true;
		} else if (inputData.inputValue !== Value) {
			inputData1.check = true;
		} else {
			inputData1.check = false;
		}
	}
};

let clickComplete = async () => {
	if (!inputData.inputValue) inputData.check = true;
	else if (!inputData1.inputValue) {
		inputData1.check = true;
		inputData1.checkContent = '确认密码不为空';
	} else if (inputData.check) inputData.check = true;
	else if (inputData1.check) {
		inputData1.check = true;
		inputData1.checkContent = '两次密码不一致';
	} else {
		uni.getStorage({
			key: 'mobile',
			async success(e: any) {
				let res: any = await resetPwd({ mobile: e.data, password: inputData1.inputValue });
				if (res.data.errno == 0) {
					uni.navigateTo({
						url: '/pages/login/login',
						success() {
							uni.clearStorage();
						}
					});
				}
			}
		});
	}
};
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.title-iamge {
		width: 300rpx;
		height: 240rpx;
	}
	.login-text {
		margin-top: 10%;
		font-weight: 700;
		font-size: 40rpx;
		color: #1d2b5f;
	}
	.login-text1 {
		font-weight: 700;
		font-size: 40rpx;
		color: #1d2b5f;
		margin-top: 10rpx 0 20% 0;
	}
	.login-form {
		margin-top: 15%;
	}
	.next-step {
		margin-top: 20rpx;
		width: 245rpx;
		height: 90rpx;
	}
	.footer-text {
		margin-top: 40%;
		display: block;
		width: 100%;
		color: #d79972;
		font-size: 30rpx;
		text-align: center;
		align-self: flex-end;
	}
}
</style>
