﻿<template>
  <div class="login-page">
    <div class="login-background"></div>
    <n-card class="login-card">
      <template #header>
        <div class="text-center">
          <div class="text-2xl font-semibold text-slate-900">通用管理平台</div>
        </div>
      </template>

      <n-form ref="formRef" :model="form" :rules="rules" size="large" @submit.prevent="onSubmit">
        <n-form-item path="username" label="用户名">
          <n-input v-model:value="form.username" placeholder="请输入用户名" />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input
            v-model:value="form.password"
            type="password"
            show-password-on="click"
            placeholder="请输入密码"
          />
        </n-form-item>
        <n-button type="primary" block size="large" :loading="loading" attr-type="submit"
          >登录</n-button
        >
      </n-form>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const route = useRoute()
const message = useMessage()
const authStore = useAuthStore()

const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const form = reactive({
  username: '',
  password: ''
})

const rules: FormRules = {
  username: [{ required: true, message: '请输入用户名', trigger: ['blur', 'input'] }],
  password: [{ required: true, message: '请输入密码', trigger: ['blur', 'input'] }]
}

async function onSubmit() {
  await formRef.value?.validate()
  loading.value = true
  try {
    await authStore.login(form)
    message.success('登录成功')
    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/dashboard'
    await router.replace(redirect)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-page {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: 24px clamp(24px, 9vw, 128px) 24px 16px;
  background:
    linear-gradient(
      42deg,
      rgba(226, 252, 244, 0.98),
      rgba(224, 244, 255, 0.96),
      rgba(241, 255, 250, 0.98),
      rgba(230, 247, 255, 0.96),
      rgba(226, 252, 244, 0.98)
    ),
    #f5fbff;
  background-size: 320% 320%;
  animation: loginGradientFlow 18s ease-in-out infinite;
}

.login-background {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 116, 144, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 118, 110, 0.04) 1px, transparent 1px),
    linear-gradient(145deg, transparent 0%, rgba(255, 255, 255, 0.76) 46%, transparent 74%);
  background-size:
    42px 42px,
    42px 42px,
    100% 100%;
  opacity: 0.72;
}

.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.82), transparent 35%),
    linear-gradient(295deg, rgba(204, 251, 241, 0.34), transparent 42%);
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 448px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 60px rgba(15, 118, 110, 0.12);
  backdrop-filter: blur(18px);
}

@keyframes loginGradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 768px) {
  .login-page {
    justify-content: center;
    padding: 24px 16px;
  }
}
</style>
