<template>
  <view class="formLogin">
	  <a-form
		:model="formState"
		name="basic"
		:label-col="{ span: 8 }"
		:wrapper-col="{ span: 16 }"
		autocomplete="off"
		@finish="onFinish"
		@finishFailed="onFinishFailed"
	  >
		<a-form-item
		  label="账号："
		  name="username"
		  :rules="[{ required: true, message: '请输入账号!' }]"
		>
		  <a-input v-model:value="formState.username" style="width: 15vw"/>
		</a-form-item>

		<a-form-item
		  label="密码："
		  name="password"
		  :rules="[{ required: true, message: '请输入密码！' }]"
		>
		  <a-input-password v-model:value="formState.password" style="width: 15vw"/>
		</a-form-item>

		<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
		  <a-button type="primary" @click="checkPassword" html-type="submit">登 录</a-button>
		</a-form-item>
	  </a-form>
  </view>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';

interface FormState {
  username: string;
  password: string;
}
const formState = reactive<FormState>({
  username: '',
  password: '',
});
const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
export default defineComponent({
  name: 'password',
  data() {
    return {
      errorMessage: '',
      formState,
      onFinish,
      onFinishFailed
    };
  },
  methods: {
    checkPassword() {
      const accont = 'zgsst';
      const correctPassword = 'lttc123$';
      if (formState.password === correctPassword && formState.username === accont) {
         const expirationTime = Date.now() + (15* 60 * 1000); // 30分钟后的时间戳
		localStorage.setItem('hasPassedPasswordCheck', "true");
		localStorage.setItem('hasPassedPasswordCheck_expiration', expirationTime.toString());
        uni.reLaunch({
          url: './backend'
        });
      } else {
        this.errorMessage = '密码错误，请重试';
      }
    }
  },
});
</script>

<style>
	.formLogin{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 100vh; /* 让容器充满整个视口高度 */
	}
</style>