<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="text" v-model="username" 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 {
      username: '', //把邮箱改成用户名
      password: '',
      rememberMe: false
    }
  },
  methods: {
    handleLogin() {
      // Mock authentication logic - in real app this would be an API call
      const users = {
        'admin1': { password: 'admin123', token: '0c2da9ad83fd142deb64c8f46f57b4a328ad6356', role: 'admin' },
        'leader1': { password: 'leader123', token: '1fbc640baf1d35d67d4d4f957a7282e3cc84121a', role: 'leader' },
        'leader2': { password: 'leader123', token: '8263ba67422324042ae5c063192dc694015ae2d2', role: 'leader' },
        'member1': { password: 'member123', token: 'bd87c833d4a659f6434bc235f299533ba6c2fec2', role: 'member' },
        'member2': { password: 'member123', token: 'fe986c6c1738bb18218415c908df11a20719bed8', role: 'member' }
      };

      const user = users[this.username]; //改成用户名
      
      if (user && user.password === this.password) {
        // Store user info in localStorage
        localStorage.setItem('userToken', user.token);
        localStorage.setItem('userName', this.username); //改成用户名
        localStorage.setItem('userRole', user.role);
        
        // Redirect to main page
        this.$router.push('/');
      } else {
        // Show error message
        alert('Invalid username or password');
      }
    },
    handleForgotPassword() {
      console.log('Forgot password clicked');
    },
    contactSupport() {
      console.log('Contact support clicked');
    }
  }
}
</script>

  <!-- <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>
