<!-- 用户登录页，负责凭据提交、登录状态反馈和成功跳转。 -->
<script setup lang="ts">
import { reactive, ref } from "vue";
import { Lock, User } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import logoUrl from "@/assets/logo.png";
import { apiError } from "@/api/http";
import { useAuthStore } from "@/stores/auth";
import { useToastStore } from "@/stores/toast";

const auth = useAuthStore();
const toast = useToastStore();
const route = useRoute();
const router = useRouter();
const formRef = ref<FormInstance>();
const form = reactive({ account: "", password: "" });
const rules: FormRules = {
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};

/** 校验并提交登录凭据，成功后跳转至目标页面。 */
async function submit() {
  if (auth.loading) return;
  if (!(await formRef.value?.validate().catch(() => false))) return;
  try {
    await auth.login(form.account, form.password);
    toast.success("登录成功");
    const redirect = String(route.query.redirect || "/drama-projects");
    await router.replace(redirect.startsWith("/") ? redirect : "/drama-projects");
  } catch (error) {
    const detail = apiError(error);
    toast.error(detail.message, detail.copyText, "登录失败");
  }
}
</script>

<template>
  <main class="login-view web-page">
    <section class="login-card">
      <header class="login-card__brand">
        <span
          ><img
            :src="logoUrl"
            alt=""
        /></span>
        <div>
          <strong>剧游AI</strong>
        </div>
      </header>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-position="top"
        size="large"
        @submit.prevent="submit"
      >
        <el-form-item
          label="账号"
          prop="account"
        >
          <el-input
            v-model.trim="form.account"
            autocomplete="username"
            placeholder="请输入账号"
          >
            <template #prefix
              ><el-icon><User /></el-icon
            ></template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            v-model="form.password"
            type="password"
            autocomplete="current-password"
            show-password
            placeholder="请输入密码"
          >
            <template #prefix
              ><el-icon><Lock /></el-icon
            ></template>
          </el-input>
        </el-form-item>
        <el-button
          class="login-card__submit"
          type="primary"
          native-type="submit"
          :loading="auth.loading"
        >
          登录
        </el-button>
      </el-form>
    </section>
  </main>
</template>

<style scoped lang="scss">
.login-view {
  min-height: 100dvh;
  padding: var(--page-gutter);
  display: grid;
  place-items: center;
  background: var(--web-bg);
}
.login-card {
  width: min(420px, 100%);
  padding: var(--space-2xl);
  background: var(--web-surface);
  border: 1px solid var(--web-line);
  border-radius: var(--radius-lg);
}
.login-card__brand {
  margin-bottom: var(--space-xl);
  display: flex;
  align-items: center;
  gap: 12px;
}
.login-card__brand > span {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--web-raised);
  border: 1px solid var(--web-line);
  border-radius: var(--radius-sm);
}
.login-card__brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.login-card__brand strong {
  font-size: 18px;
  font-weight: 650;
}
.login-card :deep(.el-form-item__label) {
  color: var(--web-muted);
}
.login-card :deep(.el-input__wrapper) {
  min-height: var(--control-height-lg);
  background: var(--web-surface);
  border: 1px solid var(--web-line-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.login-card :deep(.el-input__wrapper:hover) {
  border-color: var(--web-line-emphasis);
}
.login-card :deep(.el-input__wrapper.is-focus) {
  border-color: var(--web-primary);
  box-shadow: 0 0 0 2px var(--web-dialog-focus-ring);
}
.login-card :deep(.el-input__inner) {
  color: var(--web-text);
}
.login-card__submit {
  width: 100%;
  min-height: var(--control-height-lg);
  margin-top: var(--space-sm);
  color: var(--web-text-strong);
  background: var(--web-primary);
  border-color: var(--web-primary);
  font-weight: 650;
}
.login-card__submit:hover {
  background: var(--web-primary-hover);
  border-color: var(--web-primary-hover);
}
@media (max-width: 767px) {
  .login-view {
    padding: var(--page-gutter-mobile);
  }
  .login-card {
    padding: var(--space-xl);
  }
}
</style>
