<template>
  <!-- 背景容器 -->
  <div class="login-bg">
    <!-- 登录表单 -->
    <div class="login-form">
      <h3>欢迎登录系统</h3>
      <el-form :model="loginForm" label-width="0" class="form-item">
        <!-- 账号输入框 -->
        <el-form-item>
          <el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入登录账号" clearable @input="clearErrorMsg"/>
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item>
          <el-input v-model="loginForm.password" prefix-icon="Lock" type="password" placeholder="请输入登录密码" clearable @input="clearErrorMsg"/>
        </el-form-item>
        <!-- 错误提示 -->
        <div v-show="errorMsg" class="error-tip fixed-height">{{ errorMsg }}</div>
        <div v-show="!errorMsg" class="error-placeholder fixed-height"></div>
        <!-- 记住密码复选框 -->
        <el-form-item class="remember">
          <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="handleLogin">
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

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

// 错误提示
const errorMsg = ref('');

// 页面加载时，自动填充“记住的账号密码”
onMounted(() => {
  const storedLogin = localStorage.getItem('deepchart_login');
  if (storedLogin) {
    const { username, password, remember } = JSON.parse(storedLogin);
    loginForm.value.username = username;
    loginForm.value.password = password;
    loginForm.value.remember = remember;
  }
});

// 输入时清空错误提示
const clearErrorMsg = () => {
  errorMsg.value = '';
};

// 登录逻辑：包含表单校验、消息提醒、记住密码存储
const handleLogin = () => {
  // 先清空之前的错误提示
  errorMsg.value = '';

  // 校验必填项
  if (!loginForm.value.username && !loginForm.value.password) {
    errorMsg.value = '请输入账号和密码后再登录'; 
    return;
  }
  if (!loginForm.value.username) {
    errorMsg.value = '账号为必填项，请输入账号';
    return;
  }
  if (!loginForm.value.password) {
    errorMsg.value = '密码为必填项，请输入密码';
    return;
  }

  // 模拟接口登录
  // 假设正确账号：admin，正确密码：123456
  const isAccountCorrect = loginForm.value.username === 'admin';
  const isPasswordCorrect = loginForm.value.password === '123456';

  if (isAccountCorrect && isPasswordCorrect) {
    // 登录成功，处理“记住密码”存储
    localStorage.setItem('token', '123456');
    
    if (loginForm.value.remember) {
      localStorage.setItem('deepchart_login', JSON.stringify({
        username: loginForm.value.username,
        password: loginForm.value.password,
        remember: true
      }));
    } else {
      localStorage.removeItem('deepchart_login');
    }

    // 跳转到首页
    const redirectPath = '/';
    router.push(redirectPath);
  } else {
    // 登录失败
    if (!isAccountCorrect) {
      errorMsg.value = '账号填写有误，请核对账号后重新输入';
    } else {
      errorMsg.value = '密码填写有误，请核对密码后重新输入';
    }
  }
};
</script>

<style scoped>
/* 背景图全屏样式 */
.login-bg {
  background-image: url('../assets/images/login.png'); 
  background-size: cover;
  background-position: center;
  height: calc(100vh - 16px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 表单样式 */
.login-form {
  margin-left: 650px;
  width: 400px; 
  padding: 40px 30px;
}

/* 标题样式 */
.login-form h3 {
  text-align: center;
  margin-bottom: 50px; 
  color: #2d3748;
  font-size: 24px; 
  font-weight: 600;
}

.form-item {
  width: 100%;
}

/* 输入框区域 */
.el-form-item {
  margin-bottom: 30px;
}

.el-input {
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  height: 48px; 
}

.el-input__inner {
  padding: 0 16px;
  font-size: 16px; 
}

.el-input__placeholder {
  font-size: 16px !important; 
}

/* 记住密码 */
.remember {
  text-align: left;
  margin-bottom: 32px; 
  font-size: 15px; 
  color: #4b5563;
}

.el-checkbox__label {
  font-size: 15px !important; 
  margin-left: 8px !important;
}

/* 登录按钮 */
.el-button--primary {
  height: 52px; 
  font-size: 18px;
  border-radius: 4px;
  background-color: #1890ff;
  border: none;
}

.el-button--primary:hover {
  background-color: #096dd9;
}

/* 图标大小适配 */
.el-input__prefix {
  font-size: 18px !important;
}

/* 错误提示 */
.error-tip {
  color: #ff4d4f;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  line-height: 1.5;
  overflow: hidden; 
}

.error-placeholder {
  visibility: hidden; 
}

.fixed-height {
  height: 21px; 
  margin-bottom: 6px;
}

</style>