<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';

import { computed } from 'vue';

import { AuthenticationLogin, z } from '@vben/common-ui';

import yumiLogo from '#/assets/auth/yumi-logo.png';
import { useAuthStore } from '#/store';

defineOptions({ name: 'Login' });

const authStore = useAuthStore();

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        autocomplete: 'username',
        autofocus: true,
        class: 'h-11',
        placeholder: '请输入账号',
      },
      fieldName: 'username',
      label: '账号',
      rules: z.string().trim().min(1, { message: '请输入账号' }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        autocomplete: 'current-password',
        class: 'h-11',
        placeholder: '请输入密码',
      },
      fieldName: 'password',
      label: '密码',
      rules: z.string().min(4, { message: '密码不能少于4位' }),
    },
  ];
});
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :loading="authStore.loginLoading"
    :show-code-login="false"
    :show-forget-password="false"
    :show-qrcode-login="false"
    :show-remember-me="false"
    :show-register="false"
    :show-third-party-login="false"
    submit-button-text="登录"
    @submit="authStore.authLogin"
  >
    <template #title>
      <img
        :src="yumiLogo"
        alt="YUMI"
        class="mx-auto mb-2 size-[72px] rounded-full border border-amber-200/80 object-cover shadow-[0_0_18px_rgba(20,184,166,0.32),0_0_0_4px_rgba(245,196,81,0.1)]"
      />
      <h1
        class="mb-5 text-center text-[28px] font-medium tracking-[0.08em] text-[#2d3538]"
      >
        YUMI
      </h1>
    </template>
  </AuthenticationLogin>
</template>
