<script setup>
import { ref } from 'vue'
import { useAuthStore } from '../stores/auth'
import loginImage from '@/assets/images/login.jpg'

const authStore = useAuthStore()
const username = ref('')
const password = ref('')
const loading = ref(false)
const error = ref('')

const handleLogin = async () => {
  if (!username.value || !password.value) {
    error.value = '请填写用户名和密码'
    return
  }

  loading.value = true
  error.value = ''

  try {
    const result = await authStore.login({
      username: username.value,
      password: password.value,
    })

    if (!result.success) {
      error.value = result.error || '登录失败'
    }
  } catch {
    error.value = '登录过程中发生错误'
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <v-img
    src="/src/assets/images/login.jpg"
    cover
    height="100vh"
    style="object-position: center top;"
  >
    <v-container class="fill-height" fluid>
      <v-row
        align="center"
        justify="center"
        class="fill-height"
        no-gutters
      >
        <!-- 登录表单 -->
        <v-col cols="12" md="4" class="">
          <v-sheet
            elevation="10"
            rounded="xl"
            class="pa-8 h-100 justify-center align-center flex-grow-1"
            style="background: rgba(255, 255, 255, 0.95);"
          >
            <form @submit.prevent="handleLogin" style="width: 100%;">
              <div class="text-h4 font-weight-bold mb-4">Welcome!</div>
              <div class="text-body-1">
                欢迎使用学生管理系统！本系统是用来追踪学生课程、作业、考试的一站式服务平台。请登录使用全部功能。
              </div>
              <v-row justify="center" class="pa-6">
                <v-avatar size="128" class="mb-4" >
                  <v-img src="/src/assets/images/loginAvatar.jpg" />
                </v-avatar>
              </v-row>
              <v-text-field
                v-model="username"
                label="用户名"
                prepend-inner-icon="mdi-account"
                class="mb-4"
                variant="outlined"
                density="comfortable"
              />
              <v-text-field
                v-model="password"
                label="密码"
                type="password"
                prepend-inner-icon="mdi-lock"
                class="mb-6"
                variant="outlined"
                density="comfortable"
              />
              <v-btn
                color="primary"
                block
                large
                :loading="loading"
                type="submit"
              >
                登录
              </v-btn>
            </form>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </v-img>
</template>

<style scoped>
</style>
