<script setup lang="ts">
import { Lock, User } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

const router = useRouter();
const auth = useAuthStore();
const loading = ref(false);
const form = ref({ username: 'admin', password: '' });

async function submit() {
  loading.value = true;
  try {
    await auth.login(form.value.username, form.value.password);
    router.push('/dashboard');
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <main class="login-scene">
    <section class="login-brief">
      <div class="brief-brand">
        <div class="brief-sigil">D</div>
        <div class="brief-copy">
          <b>Dramix</b>
          <span>Operations Console</span>
        </div>
      </div>
      <h1>把每一次运营动作<br />都留在可追溯的轨道上。</h1>
      <p>租户、积分、模型成本与审计日志，集中在一个克制的工作台。</p>
      <ul class="brief-points">
        <li><i></i>跨租户查询、套餐与状态调整</li>
        <li><i></i>积分流水与模型成本对账</li>
        <li><i></i>运营操作全量审计与回溯</li>
      </ul>
    </section>
    <section class="login-card">
      <header class="login-card-head">
        <h2>欢迎回来</h2>
        <p>请使用运营账号登录 Dramix 后台</p>
      </header>
      <el-form label-position="top" @submit.prevent="submit">
        <el-form-item label="账号">
          <el-input v-model="form.username" :prefix-icon="User" size="large" placeholder="请输入运营账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" :prefix-icon="Lock" show-password size="large" placeholder="请输入登录密码" @keyup.enter="submit" />
        </el-form-item>
        <el-button type="primary" size="large" :loading="loading" style="width: 100%" @click="submit">登录</el-button>
      </el-form>
      <footer class="login-card-foot">
        登录即代表你已阅读并同意《运营人员使用规范》。
      </footer>
    </section>
  </main>
</template>
