<!-- 租户账号密码登录表单 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';
import type { LoginDTO } from '@/api/auth/types';
import { computed, reactive, ref, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { login } from '@/api';
import { useUserStore } from '@/stores';
import { useLoginTenantId } from '@/hooks/useLoginTenantId';

// 定义 emits
const emit = defineEmits<{
  success: [];
}>();

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

// 使用全局租户ID状态
const { loginTenantId } = useLoginTenantId();

const formRef = ref<FormInstance>();

// 租户列表（从配置或API获取）- 不包含系统租户000000
const tenantList = ref([
  { label: '集团总部', value: '000001' },
  { label: '汇亚公司', value: '000002' },
  { label: '恒福公司', value: '000003' },
  { label: '玛缇公司', value: '000004' },
]);

// 从URL参数获取租户ID
const urlTenantId = computed(() => {
  const tenantParam = route.query.tenant as string;
  // 验证是否在租户列表中
  if (tenantParam && tenantList.value.some(t => t.value === tenantParam)) {
    return tenantParam;
  }
  return null;
});

// 是否显示租户选择框（URL有参数则隐藏）
const showTenantSelect = computed(() => {
  return !urlTenantId.value;
});

// 根据租户ID获取租户名称
const tenantName = computed(() => {
  const currentTenantId = urlTenantId.value || formModel.tenantId;
  const tenant = tenantList.value.find(t => t.value === currentTenantId);
  return tenant?.label || '集团总部';
});

const formModel = reactive<LoginDTO & { tenantId: string }>({
  username: '',
  password: '',
  tenantId: urlTenantId.value || loginTenantId.value || '000001', // URL参数优先，否则使用全局状态或默认值
  clientId: import.meta.env.VITE_CLIENT_ID,
  grantType: 'password',
  uuid: 'a5705def96be468f80e4b8bde3127c31',
});

// 监听表单中的租户ID变化，同步到全局状态
watch(() => formModel.tenantId, (newTenantId, oldTenantId) => {
  if (newTenantId !== oldTenantId && newTenantId !== loginTenantId.value) {
    // console.log('租户ID变化:', oldTenantId, '->', newTenantId);
    loginTenantId.value = newTenantId;
    // console.log('全局状态已同步:', loginTenantId.value);
  }
});

// 记住登录功能
const rememberMe = ref(false);
const REMEMBER_KEY = 'hzhub_employee_remember_me';

// 加载记住的登录信息
function loadRemembered() {
  try {
    const saved = localStorage.getItem(REMEMBER_KEY);
    if (saved) {
      const data = JSON.parse(saved);
      if (data.tenantId && data.username) {
        formModel.tenantId = data.tenantId;
        formModel.username = data.username;
        formModel.password = data.password || '';
        rememberMe.value = true;
        // 同步到全局状态
        loginTenantId.value = data.tenantId;
        // console.log('已恢复记住的登录信息，租户ID:', data.tenantId);
      }
    }
  } catch { /* ignore */ }
}

// 保存记住的登录信息
function saveRemembered() {
  if (rememberMe.value) {
    localStorage.setItem(REMEMBER_KEY, JSON.stringify({
      tenantId: formModel.tenantId,
      username: formModel.username,
      password: formModel.password,
    }));
  } else {
    localStorage.removeItem(REMEMBER_KEY);
  }
}

// 页面加载时，初始化租户ID和记住的登录信息
onMounted(() => {
  // console.log('=== 登录页面初始化 ===');
  // console.log('URL租户参数:', urlTenantId.value);
  // console.log('全局租户ID:', loginTenantId.value);

  // 先尝试加载记住的登录信息
  loadRemembered();

  // URL有参数时，使用URL参数并更新全局状态（优先级最高）
  if (urlTenantId.value) {
    // console.log('使用URL参数租户ID:', urlTenantId.value);
    formModel.tenantId = urlTenantId.value;
    loginTenantId.value = urlTenantId.value;
  }
  // 否则，如果全局状态为默认值（000000）且没有记住的登录信息，设置为第一个租户
  else if (loginTenantId.value === '000000' && !rememberMe.value) {
    const firstTenantId = tenantList.value[0].value;
    // console.log('全局租户ID为默认值，设置第一个租户:', firstTenantId);
    loginTenantId.value = firstTenantId;
    formModel.tenantId = firstTenantId;
  }
  // 否则使用全局状态的值
  else {
    // console.log('使用全局租户ID:', loginTenantId.value);
    formModel.tenantId = loginTenantId.value;
  }
  // console.log('最终表单租户ID:', formModel.tenantId);
});

const rules = reactive<FormRules>({
  tenantId: [{ required: true, message: '请选择公司', trigger: 'change' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});

const loading = ref(false);

async function handleSubmit() {
  try {
    loading.value = true;
    // console.log('=== 开始登录流程 ===');
    // console.log('表单租户ID:', formModel.tenantId);
    // console.log('全局租户ID:', loginTenantId.value);

    // 表单验证
    await formRef.value?.validate();

    // ❌ 删除强制覆盖：formModel.tenantId = urlTenantId.value;
    // 使用用户选择的租户ID（已在表单中）

    // 发起登录请求
    const res = await login(formModel);
    // console.log('登录响应:', res);

    // 登录成功
    if (res.data?.access_token) {
      // 保存 token
      userStore.setToken(res.data.access_token);

      // 如果返回了用户信息，保存用户信息
      if (res.data.userInfo) {
        // 确保用户信息包含租户ID和昵称
        const userInfo = {
          ...res.data.userInfo,
          tenantId: formModel.tenantId,
          nickName: res.data.userInfo.nickName || formModel.username,
        };
        userStore.setUserInfo(userInfo);
      }
      else {
        // 如果登录响应没有返回用户信息，创建默认用户信息
        userStore.setUserInfo({
          userId: 1,
          username: formModel.username,
          nickName: formModel.username,
          tenantId: formModel.tenantId,
          roles: [{ roleId: 1, roleName: '企业员工', roleKey: 'employee' }],
          deptName: '企业部门',
        });
      }

      // 保存记住登录状态
      saveRemembered();

      ElMessage.success(`登录成功 - ${tenantName.value}`);

      // 触发成功事件
      emit('success');

      // 跳转到首页或 redirect 页面
      const redirect = router.currentRoute.value.query.redirect as string;
      const targetPath = redirect || '/dashboard';
      router.push(targetPath);
    }
  }
  catch (error: any) {
    // 错误已经在 request.ts 的拦截器中处理并显示了
    // console.error('登录失败:', error);
  }
  finally {
    loading.value = false;
  }
}
</script>

<template>
  <div class="custom-form">
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="rules"
      style="width: 230px"
      @submit.prevent="handleSubmit"
    >
      <!-- 租户选择框：URL有参数时隐藏 -->
      <el-form-item v-if="showTenantSelect" prop="tenantId">
        <el-select v-model="formModel.tenantId" placeholder="请选择公司" style="width: 100%">
          <el-option
            v-for="tenant in tenantList"
            :key="tenant.value"
            :label="tenant.label"
            :value="tenant.value"
          />
        </el-select>
      </el-form-item>

      <!-- 显示当前登录的公司（URL参数指定时） -->
      <div v-else class="tenant-info">
        <el-icon :size="16" color="#1d5af3">
          <OfficeBuilding />
        </el-icon>
        <span class="tenant-name">{{ tenantName }}</span>
      </div>

      <el-form-item prop="username">
        <el-input v-model="formModel.username" placeholder="请输入用户名">
          <template #prefix>
            <el-icon>
              <User />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formModel.password"
          placeholder="请输入密码"
          type="password"
          show-password
        >
          <template #prefix>
            <el-icon>
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" native-type="submit" :loading="loading">
          登录
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="rememberMe">记住登录</el-checkbox>
      </el-form-item>
    </el-form>

    <!-- 切换公司的链接（仅在有URL参数时显示） -->
    <div v-if="!showTenantSelect" class="switch-tenant">
      <el-divider>
        <el-link type="primary" @click="router.push('/login')">
          切换公司
        </el-link>
      </el-divider>
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tenant-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f5f3f0;
  border-radius: 8px;
  margin-bottom: 8px;

  .tenant-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
  }
}

.switch-tenant {
  margin-top: -8px;

  :deep(.el-divider__text) {
    background-color: #fff;
  }
}
</style>
