<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view class="min-h-screen flex items-center justify-center bg-gray-200 px-4">
    <view
      class="w-full max-w-md mx-auto bg-white rounded-2xl shadow-lg p-8 border border-gray-100 box-border"
    >
      <view class="mb-6 text-center">
        <text class="text-2xl font-bold text-gray-800">艺术评测考试平台</text>
      </view>
      <view class="mb-4">
        <input
          v-model="account"
          type="text"
          placeholder="用户名/手机号"
          class="w-full h-12 px-4 border-2 border-gray-300 rounded-lg focus:border-pink-400 outline-none bg-gray-50 text-base transition-all duration-200 box-border"
        />
      </view>
      <view class="mb-6">
        <input
          v-model="password"
          type="password"
          placeholder="密码"
          class="w-full h-12 px-4 border-2 border-gray-300 rounded-lg focus:border-pink-400 outline-none bg-gray-50 text-base transition-all duration-200 box-border"
        />
      </view>
      <view class="flex mb-2 mt-4 gap-3">
        <button
          class="flex-1 h-12 bg-black text-white rounded-l-lg text-base font-semibold shadow hover:shadow-md transition-all duration-200 flex items-center justify-center border border-gray-300"
          @click="handleLogin"
        >
          <span class="w-full text-center">登录</span>
        </button>
        <button
          class="flex-1 h-12 bg-white text-black rounded-r-lg text-base font-semibold hover:bg-gray-50 transition-all duration-200 flex items-center justify-center border border-gray-300"
          @click="handleRegister"
        >
          <span class="w-full text-center">注册</span>
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { loginAPI } from '@/service/login'
import { useUserStore } from '@/store'

const useStore = useUserStore()
const account = ref('')
const password = ref('')

const handleLogin = async () => {
  if (!account.value || !password.value) {
    uni.showToast({ title: '请输入账号和密码', icon: 'none' })
    return
  }
  try {
    const res = await loginAPI({ username: account.value, password: password.value })
    uni.setStorageSync('loginData', res.data)
    uni.setStorageSync('x-token', res.data.token)
    useStore.setUserInfo()
    uni.reLaunch({ url: '/pages/index/index' })
  } catch (error) {
    uni.showToast({ title: '登录失败', icon: 'none' })
  }
}

const handleRegister = () => {
  // 跳转到注册页（假设有注册页面）
  uni.navigateTo({ url: '/pages/register/index' })
}
</script>

<style>
body {
  background: #fafaff;
}
</style>
