<template>
	<div class="login">
		<div>
			<img class="img-a" src="@/assets/login/2.png">
			<img class="img-b" src="@/assets/login/3.png">
		</div>

		<div class="f-col-c-c container">
			<van-form @submit="submitForm" ref="faultForm" validate-first show-error>
				<h4>欢迎回来！</h4>
				<van-cell-group inset>
					{{ state.username }}
					<van-field v-model="state.username" label="用户名" placeholder="请输入用户名" clearable label-width="70px"
						:rules="nameRules" required label-align="top" />
					<van-field label-class="phone-input" v-model="state.password"
						:right-icon="!passwordStatus ? 'closed-eye' : 'eye'" :type="!passwordStatus ? 'password' : 'text'"
						required label="密码" @click-right-icon=" passwordStatus = !passwordStatus" placeholder="请输入密码"
						label-width="70px" :rules="passwordRules" label-align="top" />
					<van-field v-model="state.verify" center label="验证码" placeholder="请输入验证码" label-width="70px"
						:rules="verifyRules" required label-align="top">
						<template #button>
							<image-verify ref="verifyRef" />
						</template>
					</van-field>
				</van-cell-group>
				<div class="subbut">
					<van-button block round type="primary" :loading="loading" loading-text="登录中..." native-type="submit">登
						录</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script lang="ts" setup>
import loginRule from '@/libs/rules'
const { nameRules, passwordRules, verifyRules } = loginRule;
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter()

import { userStore } from '@/store/modules/user'
const useStore = userStore();

const verifyRef = ref(null)
const passwordStatus = ref(false)
const loading = ref(false)
const imgCode = ref('')

const state = reactive({
	username: 'admin',
	password: 'root123',
	verify: '',
})

const submitForm = async () => {
	imgCode.value = verifyRef.value.state.imgCode || ''
	if (state.verify.toLowerCase() != imgCode.value.toLowerCase()) return  verifyRef.value.handleDraw(),showToast('验证码有误~')
	subLogin()
}

const subLogin = () => {
	// const loginObj = { username: state.username, password: state.password }
	// useStore.login(loginObj).then(() => {
		router.replace('/home')
	// }).catch(()=>{
		// verifyRef.value.handleDraw()
	// }).finally(() => {
		// loading.value = false;
	// });
}
</script>

<style lang="scss" scoped>
.login {
	width: 100%;
	height: 100%;

	.img-a {
		position: fixed;
		top: -150px;
		right: 0;
		z-index: -1;
	}

	.img-b {
		position: fixed;
		bottom: -150px;
		left: -50px;
		z-index: -1;
	}
}

.container {
	width: 100%;
	height: 100%;

	h4 {
		padding: 26px;
	}

	.subbut {
		width: 85%;
		margin: 16px auto;
	}
}
</style>