<template>
  <main class="login-page">
    <header class="page-brand">
      <LogoMark />
      <strong>星海科技</strong>
    </header>

    <section class="hero">
      <p class="eyebrow-text">Smart Expense Operations</p>
      <h1>企业报销智能运营台</h1>
      <p class="hero-lead">让报销审批更智能、更高效</p>
      <p class="hero-sub">智能审单 · 自动化审批 · 风险预警 · SLA 监控 · 数据驱动决策</p>

      <div class="hero-stage" aria-hidden="true">
        <span class="flow-line flow-a"></span>
        <span class="flow-line flow-b"></span>
        <span class="flow-line flow-c"></span>

        <div class="metric-card amount">
          <span>报销金额趋势</span>
          <strong>￥361,600</strong>
          <small>较昨日 <b class="up">↑ 8.3%</b></small>
          <div class="mini-bars"><i></i><i></i><i></i><i></i></div>
        </div>

        <div class="document-card">
          <span>报销单</span>
          <i></i><i></i><i></i>
          <b class="doc-check"><i class="mdi mdi-check"></i></b>
        </div>

        <img class="shield-art" src="../assets/security-shield.png" alt="" />

        <div class="round-badge ai">AI</div>

        <div class="metric-card risk">
          <span>风险预警</span>
          <strong><i class="mdi mdi-alert"></i> 14 单</strong>
          <small>较昨日 <b class="danger">↑ 16.7%</b></small>
        </div>

        <div class="metric-card audit">
          <span>审批效率</span>
          <strong>78%</strong>
          <small>较昨日 <b class="up">↑ 6.2%</b></small>
        </div>

        <div class="metric-card sla">
          <span>SLA 达成率</span>
          <strong>96%</strong>
          <small>较昨日 <b class="up">↑ 3.1%</b></small>
        </div>
      </div>

      <div class="feature-strip" aria-label="核心能力">
        <article v-for="item in features" :key="item.title">
          <span :class="item.tone"><i :class="item.icon"></i></span>
          <div>
            <strong>{{ item.title }}</strong>
            <p>{{ item.desc }}</p>
          </div>
        </article>
      </div>
    </section>

    <section class="login-card" aria-label="登录表单">
      <div class="card-brand">
        <LogoMark />
        <strong>星海科技</strong>
      </div>
      <header class="card-head">
        <h2>欢迎登录</h2>
        <p>登录企业报销智能运营台</p>
      </header>

      <form class="login-form" @submit.prevent="emit('login', { username, password })">
        <label class="field">
          <span class="sr-only">账号</span>
          <i class="mdi mdi-account-outline"></i>
          <input v-model="username" type="text" placeholder="请输入账号 / 邮箱 / 手机号" autocomplete="username" required />
        </label>

        <label class="field">
          <span class="sr-only">密码</span>
          <i class="mdi mdi-lock-outline"></i>
          <input
            v-model="password"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码"
            autocomplete="current-password"
            required
          />
          <button
            class="field-icon-btn"
            type="button"
            :aria-label="showPassword ? '隐藏密码' : '显示密码'"
            @click="showPassword = !showPassword"
          >
            <i :class="showPassword ? 'mdi mdi-eye' : 'mdi mdi-eye-slash'"></i>
          </button>
        </label>

        <label class="field">
          <span class="sr-only">企业或租户</span>
          <i class="mdi mdi-office-building"></i>
          <input v-model="tenant" type="text" placeholder="请输入企业 / 租户（选填）" />
          <button class="field-icon-btn" type="button" aria-label="展开企业列表">
            <i class="mdi mdi-chevron-down"></i>
          </button>
        </label>

        <div class="form-meta">
          <label class="remember">
            <input v-model="remember" type="checkbox" />
            <span>记住我</span>
          </label>
          <button type="button" class="link-btn" @click="emit('recover-password')">忘记密码?</button>
        </div>

        <button class="submit-btn" type="submit">登录</button>

        <div class="divider"><span>或</span></div>

        <button class="sso-btn" type="button" @click="emit('sso-login')">
          <i class="mdi mdi-shield-outline"></i>
          <span>SSO 单点登录</span>
        </button>
      </form>

      <footer class="security-note">
        <i class="mdi mdi-lock-outline"></i>
        <span>安全登录 · 数据加密传输 · 如需帮助请联系管理员</span>
      </footer>
    </section>
  </main>
</template>

<script setup>
import { useLoginView } from '../composables/useLoginView.js'

const emit = defineEmits(['login', 'recover-password', 'sso-login'])

const {
  features,
  LogoMark,
  password,
  remember,
  showPassword,
  tenant,
  username
} = useLoginView()
</script>

<style scoped src="../assets/styles/views/login-view.css"></style>
