<template>
  <view class="login-page">
    <view class="login-card">
      <view class="login-logo">💎</view>
      <view class="login-title">LumiFlow</view>
      <view class="login-subtitle">管理后台</view>

      <view class="form-group">
        <text class="form-label">管理员账号</text>
        <input
          class="form-input"
          v-model="form.username"
          placeholder="请输入管理员账号"
          placeholder-class="input-placeholder"
          @confirm="onLogin"
        />
      </view>

      <view class="form-group">
        <text class="form-label">密码</text>
        <input
          class="form-input"
          v-model="form.password"
          placeholder="请输入密码"
          :password="true"
          placeholder-class="input-placeholder"
          @confirm="onLogin"
        />
      </view>

      <button class="login-btn" :loading="loading" :disabled="loading" @click="onLogin">
        登 录
      </button>

      <view class="login-footer">© 2026 LumiFlow</view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '../../store/user'

export default {
  data() {
    return {
      form: { username: '', password: '' },
      loading: false
    }
  },
  methods: {
    async onLogin() {
      if (!this.form.username || !this.form.password) {
        uni.showToast({ title: '请输入用户名和密码', icon: 'none' })
        return
      }
      this.loading = true
      try {
        const userStore = useUserStore()
        await userStore.login(this.form)
        uni.reLaunch({ url: '/pages/admin/index' })
      } catch (e) {
        uni.showToast({ title: e.message || '登录失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #001529 0%, #003a70 100%);
}

.login-card {
  width: 400px;
  background: #ffffff;
  border-radius: 12px;
  padding: 48px 40px 32px;
}

.login-logo {
  text-align: center;
  font-size: 48px;
  margin-bottom: 8px;
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: #E6508C;
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 16px;
  color: #999;
  text-align: center;
  margin-bottom: 36px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  box-sizing: border-box;
  color: #333;
}

.form-input:focus {
  border-color: #E6508C;
  outline: none;
}

.input-placeholder {
  color: #bfbfbf;
}

.login-btn {
  margin-top: 24px;
  width: 100%;
  height: 44px;
  background: #E6508C;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.login-btn[disabled] {
  opacity: 0.6;
}

.login-footer {
  text-align: center;
  margin-top: 32px;
  font-size: 12px;
  color: #bfbfbf;
}
</style>
