<template>
  <view class="page-staff-login">
    <view class="login-container">
      <text class="login-logo">🧑‍🍳</text>
      <text class="login-title">调酒师登录</text>
      <text class="login-subtitle">别再摸鱼了，起来干活！</text>

      <view class="login-form">
        <input class="form-input" v-model="username" placeholder="账号" />
        <input class="form-input" v-model="password" placeholder="密码" password />
        <button class="login-submit" @tap="onLogin" :loading="loading">🔓 登 录</button>
      </view>

      <view style="margin-top:20rpx;">
        <text style="color:var(--text-muted);font-size:24rpx" @tap="goBack">← 返回顾客端</text>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'
import { post } from '@/utils/request'
import { API } from '@/utils/constants'
import { useStaffStore } from '@/stores/staff'

export default {
  setup() {
    const staff = useStaffStore()
    const username = ref('')
    const password = ref('')
    const loading = ref(false)

    async function onLogin() {
      if (!username.value || !password.value) {
        uni.showToast({ title: '请输入账号密码', icon: 'none' })
        return
      }
      loading.value = true
      try {
        const res = await post(API.STAFF_LOGIN, { username: username.value, password: password.value })
        staff.login(res.token, res.nickname, res.staffId)
        uni.redirectTo({ url: '/pages/staff/board' })
      } catch (e) {}
      loading.value = false
    }

    function goBack() { uni.navigateBack() }

    return { username, password, loading, onLogin, goBack }
  }
}
</script>

<style scoped>
.page-staff-login{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
.login-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80rpx 64rpx}
.login-logo{font-size:120rpx;animation:float 3s ease-in-out infinite}
.login-title{font-size:44rpx;font-weight:800;color:var(--gold);margin:24rpx 0 8rpx}
.login-subtitle{font-size:26rpx;color:var(--text-dim);margin-bottom:64rpx}
.login-form{width:100%}
.form-input{width:100%;height:96rpx;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32rpx;font-size:30rpx;color:var(--text);margin-bottom:24rpx}
.login-submit{width:100%;height:96rpx;border-radius:24rpx;background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#1A1A1A;border:none;font-size:32rpx;font-weight:800;margin-top:16rpx;display:flex;align-items:center;justify-content:center}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16rpx)}}
</style>
