<template>
  <div class="login-page">
    <el-card class="login-card">
      <h2 style="text-align:center;margin-bottom:24px">运营平台登录</h2>
      <el-form :model="form" @submit.prevent="login">
        <el-form-item>
          <el-input v-model="form.username" placeholder="用户名" prefix-icon="User" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="密码" prefix-icon="Lock" show-password />
        </el-form-item>
        <el-button type="primary" native-type="submit" style="width:100%" :loading="loading">登录</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const router = useRouter()
const form = reactive({ username: '', password: '' })
const loading = ref(false)

async function login() {
  loading.value = true
  try {
    const res = await axios.post('/api/auth/ops/login', form)
    localStorage.setItem('ops_token', res.data.data.token)
    router.push('/tenants')
  } catch (e: any) {
    ElMessage.error(e.response?.data?.message ?? '登录失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(circle at top left, rgba(15, 23, 42, 0.12), transparent 28%),
    linear-gradient(180deg, #f4f7fb 0%, #e8edf5 100%);
}

.login-card {
  width: min(360px, calc(100vw - 32px));
  box-sizing: border-box;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

@media (max-width: 767px) {
  .login-page {
    align-items: flex-start;
    padding-top: 16vh;
  }

  .login-card {
    width: 100%;
  }
}
</style>
