<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-box">
        <div class="login-header">
          <img src="../../assets/logo.png" alt="logo" class="logo" />
          <h2>Error！请联系管理员看看怎么个事</h2>
          <p class="subtitle">Welcome Back</p>
        </div>
<!--        <van-form @submit="onSubmit" class="login-form">
          <van-cell-group inset>
            <van-field
              v-model="formData.username"
              name="username"
              placeholder="请输入用户名"
              :rules="[{ required: true, message: '请输入用户名' }]"
            >
              <template #left-icon>
                <van-icon name="user-o" />
              </template>
            </van-field>
            <van-field
              v-model="formData.password"
              type="password"
              name="password"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            >
              <template #left-icon>
                <van-icon name="lock" />
              </template>
            </van-field>
          </van-cell-group>
          <div class="submit-btn">
            <van-button 
              round 
              block 
              type="primary" 
              native-type="submit"
              :loading="isLoading"
            >
              登录
            </van-button>
          </div>
        </van-form>-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { login } from '@/api/user'
import type { LoginParams } from '@/types/user'

const router = useRouter()
const isLoading = ref(false)
const formData = ref<LoginParams>({
  username: '',
  password: ''
})

async function onSubmit() {
  try {
    isLoading.value = true
    // const { token, userName, userId } = await login(formData.value)
    const { token, userName, userId } = {
      token: '123456',
      userName: 'admin',
      userId: '1'
    }
    // 保存登录信息
    localStorage.setItem('token', token)
    localStorage.setItem('userName', userName)
    localStorage.setItem('userId', userId)
    
    showToast({
      type: 'success',
      message: '登录成功'
    })
    
    // 跳转到首页
    router.push('/exp')
  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    isLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1890ff 0%, #1d39c4 100%);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: url('@/assets/login-bg.svg') repeat;
    opacity: 0.1;
    animation: move 10s linear infinite;
  }
}

.login-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 30px 24px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  
  .login-header {
    text-align: center;
    margin-bottom: 32px;
    
    .logo {
      width: 64px;
      height: 64px;
      margin-bottom: 16px;
    }
    
    h2 {
      font-size: 24px;
      color: #1a1a1a;
      margin: 0 0 8px;
      font-weight: 600;
    }
    
    .subtitle {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }
  
  :deep(.van-cell-group) {
    background: transparent;
    
    .van-field {
      background: rgba(255, 255, 255, 0.8);
      border-radius: 8px;
      margin-bottom: 16px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .van-field__left-icon {
        margin-right: 8px;
        color: #666;
      }
    }
  }
  
  .submit-btn {
    margin-top: 24px;
    
    .van-button {
      height: 44px;
      font-size: 16px;
      background: linear-gradient(135deg, #1890ff 0%, #1d39c4 100%);
      border: none;
      
      &--loading {
        opacity: 0.8;
      }
    }
  }
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

// 响应式调整
@media screen and (max-width: 480px) {
  .login-box {
    padding: 24px 16px;
    
    .login-header {
      h2 {
        font-size: 20px;
      }
    }
  }
}
</style> 