<template>
  <div class="login-container">
    <div class="login-box">
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="formRef" 
        class="login-form"
      >
        <el-form-item prop="username">
          <div class="input-group">
            <img :src="accountIcon" alt="账号图标" class="input-icon">
            <el-input 
              v-model="form.username" 
              placeholder="请输入您的账号" 
              class="custom-input"
            />
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="input-group">
            <img :src="passwordIcon" alt="密码图标" class="input-icon">
            <el-input 
              v-model="form.password" 
              placeholder="请输入登录密码" 
              type="password" 
              class="custom-input"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.remember">记住用户名</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin" class="login-btn">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import accountIconUrl from '@/assets/icons/account-icon.png';
import passwordIconUrl from '@/assets/icons/password-icon.png';

// 表单数据
const form = ref({
  username: '',
  password: '',
  remember: false
});

// 表单校验规则
const rules = ref({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
  ]
});

// 图标响应式绑定
const accountIcon = ref(accountIconUrl);
const passwordIcon = ref(passwordIconUrl);

// mock 登录接口
const mockLogin = (params: { username: string; password: string }) => {
  return new Promise<{ success: boolean; message?: string }>((resolve) => {
    // 模拟正确账号密码（这里假设账号密码为 admin）
    if (params.username === 'admin' && params.password === 'admin') {
      resolve({ success: true });
    } else {
      resolve({ 
        success: false, 
        message: '账号或密码错误' 
      });
    }
  });
};

const handleLogin = async () => {
  const formRef = getCurrentInstance()?.$refs.formRef as any;
  await formRef.validate(async (valid) => {
    if (valid) {
      try {
        const response = await mockLogin(form.value);
        if (response.success) {
          console.log('登录成功');
          // 这里可添加跳转逻辑或存储用户信息
        } else {
          ElMessage.error(response.message || '登录失败');
        }
      } catch (error) {
        ElMessage.error('登录请求异常');
      }
    }
  });
};
</script>

<style scoped lang="scss">
/* 保留之前的样式代码，此处省略重复样式 */
.login-container {
  height: 100vh;
  background: #002a5c;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('https://via.placeholder.com/1920x1080?text=铁路货车背景图');
  background-size: cover;
  background-position: center;
}

.login-box {
  background: rgba(10, 34, 74, 0.9);
  padding: 40px 60px;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(58, 145, 255, 0.6);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(58, 145, 255, 0.3);
    border-radius: 20px;
  }
}

.login-form {
  .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border: 1px solid rgba(58, 145, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;

    .input-icon {
      width: 30px;
      height: 30px;
      background: rgba(58, 145, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .custom-input {
      .el-input__inner {
        background: transparent;
        border: none;
        color: white;
        height: 50px;
        &::placeholder {
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
  }

  .login-btn {
    width: 100%;
    background: linear-gradient(135deg, #42a5f5, #1976d2);
    border: none;
    box-shadow: 0 4px 12px rgba(58, 145, 255, 0.4);
    color: white;
    height: 50px;
    border-radius: 10px;
    font-size: 18px;
    &:hover {
      background: linear-gradient(135deg, #1976d2, #42a5f5);
    }
  }

  .el-checkbox {
    margin: 15px 0;
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #42a5f5;
      border-color: #42a5f5;
    }
    .el-checkbox__label {
      color: white;
      font-size: 16px;
    }
  }
}
</style>