<template>
  <section class="card">
    <h2>登录</h2>
    <p class="muted">开发环境验证码：682139</p>
    <label class="field">
      <span>手机号</span>
      <input v-model="phone" type="tel" placeholder="18600000000" />
    </label>
    <label class="field">
      <span>验证码</span>
      <input v-model="code" type="text" placeholder="682139" />
    </label>
    <p v-if="error" class="error">{{ error }}</p>
    <button class="btn" :disabled="loading" @click="submit">登录</button>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '../api'

const router = useRouter()
const phone = ref('18600000000')
const code = ref('682139')
const loading = ref(false)
const error = ref('')

async function submit() {
  loading.value = true
  error.value = ''
  try {
    await login(phone.value, code.value)
    router.push('/')
  } catch (err) {
    error.value = err instanceof Error ? err.message : '登录失败'
  } finally {
    loading.value = false
  }
}
</script>
