<template>
  <div class="login">


    <div class="login-container">
      <!-- 左侧标题区域 -->
      <div class="left-panel">
        <img style="width: 100%;height: 100%;" src="../../static/image/login_bg.png" alt="logo"></img>
        <!-- <div class="title-group">
          <h1 class="main-title">智能消防灭火信息管控平台</h1>
          <p class="sub-title">高效·智能·安全</p>
        </div> -->
      </div>

      <!-- 右侧登录表单区域 -->
      <div class="right-panel">
        <div class="login-card">
          <h2 class="welcome-text">欢迎回来</h2>
          <p class="login-desc">请输入您的账号和密码登录</p>

          <el-form ref="formref" :model="form" :rules="rules" class="login-form">
            <el-form-item prop="phone">
              <el-input v-model="form.phone" placeholder="输入手机号码" prefix-icon="Phone" clearable class="custom-input"
                @keyup.enter="commit" />
            </el-form-item>

            <el-form-item prop="password">
              <el-input v-model="form.password" placeholder="输入密码" type="password" prefix-icon="Lock" clearable
                class="custom-input" @keyup.enter="commit" />
            </el-form-item>

            <div class="form-options">
              <el-checkbox v-model="rememberMe" class="remember-checkbox">记住账号</el-checkbox>
              <el-button type="text" class="forgot-password">忘记密码?</el-button>
            </div>

            <el-button type="primary" class="login-button" @click="commit" :loading="loginLoading">
              登录
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElLoading } from 'element-plus';
import { loginApi } from "../../api/login.js";
import { setToken } from '@/utils/auth.js';
import useAppStore from '../../store/module/app.js';

const useAppStoreInstance = useAppStore();
// 登录表单数据
const form = reactive({
  phone: '',
  password: ''
});

// 状态管理
const formref = ref(null);
const rememberMe = ref(false);
const loginLoading = ref(false);
const router = useRouter();

// 表单验证规则
const rules = {
  phone: [
    { required: true, message: "请输入您的账号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入您的密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" }
  ]
};

// 登录处理函数
const commit = () => {
  formref.value.validate(valid => {
    if (valid) {
      loginLoading.value = true;

      // 登录请求
      loginApi(form).then(res => {
        loginLoading.value = false;
        console.log(res, '测试');
        if (res.code === 200) {
          setToken(res.data.token);
          let { phone, id, name, avatarUrl, role, status } = res.data.user;

          // console.log('phone, id,name,avatarUrl ,role',useAppStoreInstance.userInfo);
          localStorage.setItem('user', JSON.stringify({ phone, id, name, avatarUrl, role, status }));
          useAppStoreInstance.userInfo = ({ phone, id, name, avatarUrl, role, status })
          console.log('phone, id,name,avatarUrl ,role', useAppStoreInstance.userInfo);

          localStorage.setItem('lastValidMenuPath', '/home')
          // localStorage.setItem('saveMenuState',JSON.stringify({lastValidMenuPath:'/home',openMenus:[true,null,null,null,null]}))
          if (rememberMe.value) {
            localStorage.setItem('rememberedAccount', form.phone);
          } else {
            localStorage.removeItem('rememberedAccount');
          }
          localStorage.setItem('menu', 1); // 默认选中工作台
          router.replace({ path: '/dashboard/analysis' });
          ElMessage.success('登录成功！');
        } else {
          ElMessage.error(res.message || '登录失败，请检查账号密码');
        }
      }).catch(err => {
        loginLoading.value = false;
        ElMessage.error('网络错误，请稍后重试');
      });
    }
  });
};

// 初始化表单数据
const initFormData = () => {
  const rememberedAccount = localStorage.getItem('rememberedAccount');
  if (rememberedAccount) {
    form.phone = rememberedAccount;
    rememberMe.value = true;
  }
};

// 页面加载时初始化
initFormData();
</script>

<style scoped lang="scss">
.login {
  padding: 10rem;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #f5f7fa;
}

.login-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../static/image/loginback.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.login-container {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // padding: 0 5vw;
  color: #fff;
  // background-image: url(../../static/image/loginback.png);
  // background-color: #1d2129;
  // background: linear-gradient(90deg, rgba(0, 47, 108, 0.8), rgba(0, 47, 108, 0.6) 70%, transparent);
}

.title-group {
  // background-color: #165dff;
  max-width: 500px;
}

.main-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sub-title {
  font-size: 1rem;
  opacity: 0.9;
}

.right-panel {
  width: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.05);
}

.login-card {
  width: 100%;
  padding: 2.5rem;
  max-width: 320px;
}

.welcome-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 0.5rem;
}

.login-desc {
  color: #86909c;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.login-form {
  width: 100%;
}

.custom-input {
  margin-bottom: 1rem;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0 1.5rem;
}

.remember-checkbox {
  color: #4e5969;
  font-size: 0.85rem;
}

.forgot-password {
  color: #165dff;
  font-size: 0.85rem;
  padding: 0;
}

.login-button {
  width: 100%;
  height: 48px;
  font-size: 1rem;
  background-color: #165dff;
  border-radius: 6px;
}

/* 自定义输入框样式 */
:deep(.custom-input .el-input__wrapper) {
  height: 48px;
  border-radius: 6px;
  border-color: #e5e6eb;
  box-shadow: none;
  transition: all 0.2s ease;

  &:focus-within {
    border-color: #165dff;
    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
  }

  .left-panel {
    height: 200px;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 47, 108, 0.9), rgba(0, 47, 108, 0.7));
    padding: 0 2rem;
  }

  .main-title {
    font-size: 1.8rem;
  }

  .right-panel {
    width: 100%;
    height: calc(100vh - 200px);
  }
}
</style>