<template>
  <div class="main">
    <div class="auth-shell">
      <!-- 顶部操作 -->
      <div class="top-actions">
        <div class="setup-item center-justify">
          <el-dropdown>
            <span class="el-dropdown-link">
              <span class="setup-text">{{ $t('common.networkSettings') }}</span>
            </span>
          </el-dropdown>
        </div>

        <!-- 语言选择：用 el-select，但外观套进 setup-item -->
        <div class="setup-item setup-item--dropdown">
          <el-dropdown trigger="click" @command="changeLanguage">
            <span class="lang-dropdown">
              <span class="lang-dropdown__label">{{ currentLanguageLabel }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="zh-CN">
                  {{ $t('common.simplifiedChinese') }}
                </el-dropdown-item>
                <el-dropdown-item command="en-US">
                  {{ $t('common.english') }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 主卡片 -->
      <div class="auth-card">
        <!-- 左侧登录 -->
        <div class="auth-left">
          <div class="logo center-justify">
            <!-- 你原本 logo 是空的，这里给你留一个位 -->
            <!-- 想放logo就取消注释 -->
            <img class="logo-image" src="@/assets/logo2.png" alt="" />
            <span class="logo-title">{{ $t('common.assistant') }}</span>
          </div>

          <div class="welcome">{{ $t('common.accountLogin') }}</div>

          <div class="from">
            <div class="from-input">
              <el-form label-position="left" label-width="100px" :model="formData">
                <div class="field-label">{{ $t('common.tenantName') }}</div>
                <div class="from-input-item1">
                  <img src="@/assets/username.png" alt="" />
                  <el-input style="height: 25px" v-model="formData.tenantName" :placeholder="$t('common.tenantName')"
                    clearable @keyup.enter="onSubmit" />
                </div>

                <div class="field-label">{{ $t('common.account') }}</div>
                <div class="from-input-item1">
                  <img src="@/assets/username.png" alt="" />
                  <el-input style="height: 25px" v-model="formData.userId" :placeholder="$t('common.account')" clearable
                    @keyup.enter="onSubmit" />
                </div>

                <div class="field-label">{{ $t('common.password') }}</div>
                <div class="from-input-item1">
                  <img src="@/assets/password.png" alt="" />
                  <el-input style="height: 25px" v-model="formData.password" type="password"
                    :placeholder="$t('common.password')" show-password @keyup.enter="onSubmit" />
                </div>

                <div class="from-input-item">
                  <el-button class="loginButton" type="primary" :loading="isSubmitting" @click="onSubmit">
                    {{ $t('common.login') }}
                  </el-button>
                </div>
              </el-form>
            </div>
          </div>

          <div class="version">{{ $t('common.version') }}：{{ version }}</div>
        </div>

        <!-- 右侧插画 -->
        <div class="auth-right">
          <img src="../assets/logoBg2.png" class="illustration" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { login, rentgetloginID } from "@/api/account";
import { setToken, setUser, setUserPass, getUserPass } from "@/utils/storage";
import { usePythonBridge } from "@/utils/pythonBridge";
import { tokenStore, UserStore } from "@/stores/notice";

const router = useRouter();
const { locale, t } = useI18n();

const tokenCache = tokenStore();
const userCache = UserStore();

const { getVersion } = usePythonBridge();
let version = ref("0.0.0");

// 当前语言
const currentLanguage = ref(localStorage.getItem("language") || "zh-CN");
const currentLanguageLabel = computed(() =>
  currentLanguage.value === "zh-CN"
    ? t("common.simplifiedChinese")
    : t("common.english")
);

const formData = ref({
  tenantName: "",
  userId: "",
  password: "",
});

onMounted(() => {
  setTimeout(() => {
    getVersion().then((res) => {
      version.value = res;
    });
    getpassword();
  }, 500);
});

async function getpassword() {
  const res = await getUserPass();
  formData.value = {
    tenantName: res == null ? "" : res.tenantName,
    userId: res == null ? "" : res.userId,
    password: res == null ? "" : res.password,
  };
}

// 切换语言
const changeLanguage = (lang) => {
  locale.value = lang;
  currentLanguage.value = lang;
  localStorage.setItem("language", lang);
  window.location.reload();
};

const isSubmitting = ref(false);

const onSubmit = () => {
  if (isSubmitting.value) return;
  isSubmitting.value = true;

  rentgetloginID({ name: formData.value.tenantName })
    .then((tenantId) => {
      login({
        username: formData.value.userId,
        tenantId: tenantId,
        password: formData.value.password,
      })
        .then((res) => {
          isSubmitting.value = false;
          setToken(res.tokenValue);
          tokenCache.setToken(res.tokenValue);
          userCache.setUser(res);
          setUser(res);
          setUserPass(formData.value);
          router.push("/nav");
        })
        .catch(() => {
          isSubmitting.value = false;
        });
    })
    .catch((err) => {
      isSubmitting.value = false;
      console.log(err);
    });
};
</script>

<style lang="less">
/* ✅ 全屏自适应 */
.main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f3f5f9 0%, #eef1f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.center-justify {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 外壳：自适应 */
.auth-shell {
  width: min(1320px, 92vw);
  height: min(760px, 86vh);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 背景柔光 */
.auth-shell::before,
.auth-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(0);
}

.auth-shell::before {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(214, 226, 255, 0.7), rgba(214, 226, 255, 0));
  left: -80px;
  top: -40px;
}

.auth-shell::after {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255, 236, 214, 0.6), rgba(255, 236, 214, 0));
  right: -40px;
  bottom: -60px;
}

/* 顶部操作 */
.top-actions {
  position: absolute;
  top: 50px;
  right: 80px;
  display: flex;
  gap: 16px;
  z-index: 2;
}

.setup-item {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e1e6f2;
  border-radius: 16px;
  padding: 8px 12px 8px 14px;
  box-shadow: 0 8px 18px rgba(40, 57, 108, 0.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.setup-item::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid #9aa1b3;
  border-bottom: 2px solid #9aa1b3;
  transform: rotate(45deg);
  margin-top: -2px;
}

.setup-item:hover {
  transform: translateY(-1px);
  border-color: #c9d2f4;
  box-shadow: 0 12px 24px rgba(40, 57, 108, 0.16);
}

.setup-text {
  font-size: 13px;
  font-weight: 600;
  color: #2b3347;
  letter-spacing: 0.2px;
}

/* el-select 这块不要小箭头重复：setup-item 自带 after 箭头，所以把 after 去掉 */
.setup-item--select::after {
  display: none;
}


/* 主卡片 */
.auth-card {
  width: min(1200px, 92vw);
  height: min(680px, 80vh);
  display: flex;
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(40, 57, 108, 0.16);
  position: relative;
  z-index: 1;
}

/* 左侧 */
.auth-left {
  width: 42%;
  padding: clamp(20px, 3vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-image {
  height: 200px;
  margin-bottom: -20px;
}

.logo-title {
  font-size: 22px;
  font-weight: 600;
  color: #2b3347;
  letter-spacing: 2px;
  position: relative;
  padding-left: 14px;
  margin-bottom: -30px;
}

.logo-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #4f6ef7, #5b7bff);
}

.welcome {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 600;
  color: #2b3347;
  margin-bottom: 8px;
}

.from {
  width: 100%;
  color: #2b3347;
  background-color: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
}

.from-input {
  width: 100%;
  padding: 8px 0 0 0;
}

.field-label {
  font-size: 13px;
  color: #6b7280;
  margin: 12px 0 6px;
}

.from-input-item {
  display: flex;
  padding: 16px 0 0 0;
}

/* 输入框胶囊 */
.from-input-item1 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  background: #f6f8fc;
  border-radius: 12px;
  border: 1px solid #e6eaf2;
  padding: 10px 14px;
  box-sizing: border-box;
  margin-bottom: 4px;
  gap: 10px;
}

.from-input-item1 img {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

/* 按钮同款 */
.loginButton {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4f6ef7, #5b7bff);
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(79, 110, 247, 0.28);
}

.version {
  margin-top: 24px;
  font-size: 12px;
  color: #9aa1b3;
}

/* 右侧插画 */
.auth-right {
  width: 58%;
  background: linear-gradient(160deg, #f8f9fc 0%, #f0f3f9 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.illustration {
  width: 90%;
  height: auto;
  max-height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(40, 57, 108, 0.25));
}

/* 小屏：上下 */
@media (max-width: 900px) {
  .auth-shell {
    width: 94vw;
    height: auto;
    padding: 16px 0;
  }

  .top-actions {
    top: 10px;
    right: 10px;
  }

  .auth-card {
    flex-direction: column;
    height: auto;
  }

  .auth-left,
  .auth-right {
    width: 100%;
  }

  .auth-right {
    min-height: 240px;
  }
}

/* element-plus 变量 */
.el-input__wrapper {
  --el-input-focus-border-color: rgba(255, 255, 0, 0);
  --el-menu-hover-bg-color: rgba(255, 255, 0, 0);
}
</style>

<style scoped lang="less">
/* 输入框内层去默认阴影 */
::v-deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: none;
}

/* 输入文字/placeholder 同款深色 */
::v-deep(.el-input__inner) {
  color: #2b3347;
}

::v-deep(.el-input__inner::placeholder) {
  color: #9aa1b3;
}

/* 语言下拉：去边框、透明底，融入 setup-item */
::v-deep(.lang-select .el-select__wrapper) {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0 8px;
  min-height: 24px;
  /* 或者 height: 24px */
}

::v-deep(.lang-select .el-select__selected-item) {
  color: #2b3347;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}

::v-deep(.lang-select .el-select__caret) {
  color: #9aa1b3;
}

.lang-dropdown {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  min-height: 24px;
  min-width: 80px;
}

.lang-dropdown__label {
  color: #2b3347;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}
</style>
