<template>
    <div class="login-page">
      <div class="login-container">
        <div class="logo">
          <img src="../../assets/company-logo.svg" alt="OOIN Logo" class="logo-img">
        </div>
        
        <h1 class="login-title">管理员登录</h1>
        <div class="login-subtitle">登录到OOIN数据库系统</div>
        
        <form class="login-form" @submit.prevent="handleLogin">
          <div class="form-group">
            <label>邮箱地址</label>
            <input type="email" v-model="email" placeholder="请输入邮箱地址">
          </div>
          
          <div class="form-group">
            <label>密码</label>
            <input type="password" v-model="password" placeholder="请输入密码">
          </div>
          
          <div class="remember-me">
            <input type="checkbox" id="remember" v-model="rememberMe">
            <label for="remember">记住我</label>
            <a href="#" class="forgot-password" @click.prevent="handleForgotPassword">忘记密码?</a>
          </div>
          
          <button type="submit" class="login-button">登录</button>
        </form>
        
        <div class="support-text">
          遇到问题？<a href="#" class="support-link" @click.prevent="contactSupport">联系技术支持</a>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'AdminLogin',
    data() {
      return {
        email: '',
        password: '',
        rememberMe: false
      }
    },
    methods: {
      handleLogin() {
        console.log('Login attempt', {
          email: this.email,
          password: this.password,
          rememberMe: this.rememberMe
        });
      },
      handleForgotPassword() {
        console.log('Forgot password clicked');
      },
      contactSupport() {
        console.log('Contact support clicked');
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .login-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .login-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
  
    .logo {
      margin-bottom: 40px;
      
      .logo-img {
        width: 110px;
      }
    }
  
    .login-title {
      color: white;
      font-size: 24px;
      font-weight: 500;
      margin: 0 0 10px;
    }
  
    .login-subtitle {
      color: #888;
      font-size: 14px;
      margin-bottom: 40px;
    }
  
    .login-form {
      background-color: #18181b;
      padding: 30px;
      border-radius: 8px;
      text-align: left;
  
      .form-group {
        margin-bottom: 20px;
  
        label {
          display: block;
          color: #888;
          margin-bottom: 8px;
        }
  
        input {
          width: 100%;
          padding: 12px;
          background-color: #27272a;
          border: none;
          border-radius: 4px;
          color: white;
          box-sizing: border-box;
  
          &::placeholder {
            color: #666;
          }
        }
      }
  
      .remember-me {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        color: #888;
  
        input {
          margin-right: 8px;
        }
  
        label {
          margin-right: auto;
        }
      }
  
      .forgot-password {
        color: #ef4444;
        text-decoration: none;
      }
  
      .login-button {
        width: 100%;
        padding: 12px;
        background-color: #ef4444;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        margin-top: 20px;
  
        &:hover {
          background-color: darken(#ef4444, 5%);
        }
      }
    }
  
    .support-text {
      margin-top: 20px;
      font-size: 14px;
      color: #666;
  
      .support-link {
        color: #ef4444;
        text-decoration: none;
      }
    }
  }
  </style>