<template>
  <div class="login-container">
    <div class="login-form-wrapper">
      <div class="left">
        <div class="login-title">葛洲坝集团交通投资有限公司</div>
        <div class="login-title">投资决策分析系统</div>
        <div class="logo-wrapper">
          <img
            src="@/assets/images/logo_right.png"
            alt="中国能建"
            class="logo"
          />
          <img
            src="@/assets/images/logo_left.png"
            alt="中国能建"
            class="logo"
          />
        </div>
      </div>

      <!-- 右侧表单区域（已修改为截图样式） -->
      <div class="login-form">
        <div class="form-head">
          <h1 class="greeting">您好！</h1>
          <p class="sub-title">欢迎登录投资决策分析系统</p>
        </div>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          label-width="0px"
          @keydown.enter="handleLogin"
        >
          <el-form-item prop="account">
            <el-input
              :prefix-icon="User"
              v-model="loginForm.account"
              placeholder="账号"
              size="large"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :prefix-icon="Lock"
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              show-password
              size="large"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="login-btn"
              :loading="loading"
              @click="handleLogin"
              size="large"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { User, Lock } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/user.js";
import CryptoJS from "crypto-js";
const userStore = useUserStore();

const { proxy } = getCurrentInstance();
const router = useRouter();
const loginFormRef = ref();
const loading = ref(false);

// 登录表单数据（将mobile改为account）
const loginForm = ref({
  account: "",
  password: "",
});

// 表单验证规则
const loginRules = ref({
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

// 处理登录
const handleLogin = async () => {
  loginFormRef.value?.validate((valid) => {
    if (valid) {
      proxy.$post({
        url: "/api/user/login",
        data: {
          encryptLogStr: CryptoJS.AES.encrypt(
            `${loginForm.value.account},${loginForm.value.password}`,
            "GFG5w5AP0Ja2rNaa",
          ).toString(),
        },
        callback: (data) => {
          userStore.setUseInfo(data);
          router.replace("/");
        },
      });
    }
  });
};
</script>

<style scoped lang="less">
.login-container {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/images/login.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form-wrapper {
  display: flex;
  height: 596px;
  width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;

  // 左侧区域样式
  .left {
    width: 600px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    padding: 160px 40px 0;

    .login-title {
      font-size: 36px;
      font-weight: 500;
      color: #fff;
      text-align: center;
      line-height: 1.5;
      margin: 8px 0;
    }

    .logo-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .logo {
        height: 40px;
      }
    }
  }

  // 右侧表单样式
  .login-form {
    background-color: #fff;

    width: 600px;
    padding: 104px 140px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .form-head {
      margin-bottom: 40px;

      .greeting {
        font-size: 48px;
        font-weight: 500;
        color: #1d2129;
        margin: 0 0 8px 0;
        line-height: 1.2;
      }

      .sub-title {
        font-size: 18px;
        color: #86909c;
        margin: 0;
        line-height: 1.4;
      }
    }

    .login-btn {
      &:hover {
        background-color: #40a9ff;
      }
      width: 100%;
      height: 36px;
      border-radius: 4px;
      background-color: #1890ff;
      margin-top: 16px;
      font-size: 18px;
    }
  }
}

// 表单通用样式
:deep(.el-form-item) {
  margin-bottom: 24px;

  .el-input__wrapper {
    background-color: #f5f7fa;
    box-shadow: none;
    padding: 1px 16px;
    border-radius: 4px;
  }

  .el-input__inner {
    font-size: 16px;
    color: #1d2129;
  }

  .el-input__prefix-inner {
    color: #86909c;
    font-size: 18px;
  }
}

:deep(.el-button--primary) {
  background-color: #1890ff;
  border-color: #1890ff;

  &:hover,
  &:focus {
    background-color: #40a9ff;
    border-color: #40a9ff;
  }
}
</style>
