<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
    <el-card class="w-[420px] shadow-xl rounded-2xl">
      <template #header>
        <div class="text-center">
          <div class="i-carbon-cloud-foundation text-5xl text-blue-500 mb-3" />
          <h2 class="text-xl font-bold text-gray-800">凌空天行后台管理</h2>
          <p class="text-sm text-gray-400 mt-1">请登录管理员账号</p>
        </div>
      </template>
      <el-form :model="form" @submit.prevent="handleLogin" class="mt-2">
        <el-form-item>
          <el-input v-model="form.account" placeholder="账号" size="large" :prefix-icon="iconUser" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="密码" size="large" show-password :prefix-icon="iconLock" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit" :loading="loading" size="large" class="w-full !bg-blue-500">
            {{ loading ? '登录中...' : '登 录' }}
          </el-button>
        </el-form-item>
      </el-form>
      <div class="text-center text-xs text-gray-400 mt-2">默认账号: admin / admin123</div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import request from '@/utils/request'

const iconUser = User
const iconLock = Lock
const router = useRouter()
const loading = ref(false)
const form = ref({ account: 'admin', password: 'admin123' })

async function handleLogin() {
  loading.value = true
  try {
    const res = await request.Post('/v1/admin/login', form.value)
    localStorage.setItem('admin_token', res.data.token)
    localStorage.setItem('admin_name', res.data.name)
    router.push('/dashboard')
  } catch {
    // handled by alova interceptor
  } finally {
    loading.value = false
  }
}
</script>
