<template>
  <a-card title="用户登录" style="max-width: 360px; margin: 0 auto;">
    <a-form layout="vertical">
      <a-form-item label="用户名"><a-input v-model:value="form.username" /></a-form-item>
      <a-form-item label="密码"><a-input-password v-model:value="form.password" /></a-form-item>
      <a-button type="primary" block @click="submit">登录</a-button>
    </a-form>
  </a-card>
</template>

<script setup>
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import api from '../../api'

const router = useRouter()
const form = reactive({ username: '', password: '' })

const submit = async () => {
  const res = await api.post('/api/auth/login', form)
  if (res.success) {
    localStorage.setItem('token', res.data.token)
    localStorage.setItem('role', res.data.role)
    message.success('登录成功')
    router.push('/')
  }
}
</script>
