<!-- =============================================================================
// 企微IT智能服务台 — H5用户端降级登录页
// =============================================================================
// 说明：测试阶段的降级登录页面
//   - 未认证企微无法进行 OAuth2 授权（可信域名备案限制）
//   - 通过后端 Mock 登录接口获取真实 Bearer Token
//   - 仅当后端 MOCK_LOGIN_ENABLED=true 时可用
// ============================================================================= -->

<template>
  <div class="login-page">
    <div class="login-card">
      <!-- 标题区 -->
      <div class="login-header">
        <div class="login-icon">🛠️</div>
        <h1 class="login-title">IT智能服务台</h1>
        <p class="login-subtitle">测试模式登录</p>
      </div>

      <!-- 表单区 -->
      <div class="login-form">
        <van-field
          v-model="employeeId"
          label="员工ID"
          placeholder="请输入企微员工 UserID"
          clearable
          :rules="[{ required: true, message: '请输入员工ID' }]"
          @keyup.enter="handleLogin"
        />

        <van-field
          v-model="employeeName"
          label="姓名"
          placeholder="请输入姓名（可选）"
          clearable
          @keyup.enter="handleLogin"
        />

        <van-button
          type="primary"
          block
          class="login-btn"
          :loading="loading"
          :disabled="!employeeId.trim()"
          @click="handleLogin"
        >
          登 录
        </van-button>

        <p class="login-hint">
          此页面仅用于测试阶段。<br />
          通过后端 Mock 登录接口获取真实 Token。<br />
          正式上线后将使用企微 OAuth2 静默授权。
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * Login 测试登录页
 * 测试阶段绕过企微 OAuth2，通过后端 mock-login 获取真实 Bearer Token
 */

import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useEmployeeStore } from '@/stores/employee'
import { showToast } from 'vant'

const router = useRouter()
const employeeStore = useEmployeeStore()

/** 员工ID输入值 */
const employeeId = ref<string>('')

/** 员工姓名输入值 */
const employeeName = ref<string>('')

/** 是否正在登录 */
const loading = ref<boolean>(false)

/**
 * 处理登录
 * 调用后端 mock-login 接口获取真实 Bearer Token
 */
async function handleLogin(): Promise<void> {
  const id = employeeId.value.trim()
  if (!id) {
    showToast('请输入员工ID')
    return
  }

  loading.value = true
  try {
    await employeeStore.mockLogin(id, employeeName.value.trim() || undefined)
    showToast('登录成功')
    router.push({ name: 'ChatView' })
  } catch (error: any) {
    console.error('[Login] 登录失败:', error)
    const msg = error?.response?.data?.message || error?.message || '登录失败，请重试'
    showToast(msg)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* 登录页面容器：全屏居中 */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24px;
}

/* 登录卡片 */
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* 标题区 */
.login-header {
  text-align: center;
  margin-bottom: 32px;
}

/* 图标 */
.login-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* 标题 */
.login-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

/* 副标题 */
.login-subtitle {
  font-size: 14px;
  color: var(--text-tertiary);
  margin: 0;
}

/* 表单区 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 登录按钮 */
.login-btn {
  margin-top: 8px;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}

/* 提示文字 */
.login-hint {
  font-size: 12px;
  color: var(--text-placeholder);
  text-align: center;
  line-height: 1.6;
  margin: 8px 0 0 0;
}
</style>
