<!-- <script setup lang="ts">
import type { ToolbarType } from './types';

import { preferences, usePreferences } from '@vben/preferences';

import { Copyright } from '../basic/copyright';
import AuthenticationFormView from './form.vue';
import SloganIcon from './icons/slogan.vue';
import Toolbar from './toolbar.vue';

interface Props {
  appName?: string;
  logo?: string;
  pageTitle?: string;
  pageDescription?: string;
  sloganImage?: string;
  toolbar?: boolean;
  copyright?: boolean;
  toolbarList?: ToolbarType[];
  clickLogo?: () => void;
}

withDefaults(defineProps<Props>(), {
  appName: '',
  copyright: true,
  logo: '',
  pageDescription: '',
  pageTitle: '',
  sloganImage: '',
  toolbar: true,
  toolbarList: () => ['color', 'language', 'layout', 'theme'],
  clickLogo: () => {},
});

const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
  usePreferences();
</script> -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../../../../apps/web-antd/src/store'
import { Checkbox } from 'ant-design-vue';
const router = useRouter()
const authStore = useAuthStore();

// 响应式数据
const username = ref('admin')
const password = ref('admin123')
const rememberMe = ref(false)

// 页面加载时恢复用户名
onMounted(() => {
  const savedUser = localStorage.getItem('rememberedUser');
  if (savedUser) {
    username.value = savedUser;
    rememberMe.value = true;
  }
});
function getRetUrlParam() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('returl');
}
const retUrl : string | null = getRetUrlParam();

// 登录逻辑
const login = () => {
  // 验证输入
  if (!username.value.trim()) {
    alert('请输入用户名')
    return
  }

  if (!password.value.trim()) {
    alert('请输入密码')
    return
  }

  // 模拟登录请求
  console.log('正在登录...', { username: username.value, password: password.value })

  setTimeout(() => {
    alert('登录成功！')

    // 存储用户名
    if (rememberMe.value) {
      localStorage.setItem('rememberedUser', username.value)
    } else {
      localStorage.removeItem('rememberedUser')
    }

    // 跳转页面
    router.push('/navigation')
  }, 800)
}
const handleAccountLogin = async () => {
  try {
    // const requestParam: any = omit(values, ['code']);
    // 登录
    await authStore.authLogin({
      grantType: "password",
      password: password.value,
      tenantId: "000000",
      username: username.value,
      retUrl: retUrl,
    });
  } catch (error) {
    console.error(error);
  }
}
</script>

<template>
  <div class="login-bg">
    <div class="login-bg_1">
      <div class="login-wapter">
        <div class="login-wapter1">欢迎登录</div>
        <div class="login-wapter2">南川区综合服务中心数智平台</div>
      </div>
      <div class="login-container">
        <div class="login-header">
          <div class="login-form">
            <h3>用户登录</h3>
            <!-- 用户名输入 -->
            <div class="input-group">
              <img src="../../../../../apps/web-antd/src/assets/my.png" alt="User Icon" class="input-icon">
              <input
                  type="text"
                  placeholder="请输入您的用户名"
                  v-model="username"
              />
            </div>

            <!-- 密码输入 -->
            <div class="input-group">
              <img src="../../../../../apps/web-antd/src/assets/mima.png" alt="Password Icon" class="input-icon">
              <input
                  type="password"
                  placeholder="请输入您的密码"
                  v-model="password"
              />
            </div>

            <!-- 记住密码 -->
            <!-- <div class="remember-me">
              <Checkbox v-model:checked="rememberMe">记住密码</Checkbox>
            </div> -->
            <!-- 登录按钮 -->
            <button @click="handleAccountLogin">点 击 登 录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div
    :class="[isDark ? 'dark' : '']"
    class="flex min-h-full flex-1 select-none overflow-x-hidden"
    style="display: none;"
  > -->
    <!--<template v-if="toolbar">
      <slot name="toolbar">
        <Toolbar :toolbar-list="toolbarList" />
      </slot>
    </template>-->
    <!-- 左侧认证面板 -->
    <!--<AuthenticationFormView
      v-if="authPanelLeft"
      class="min-h-full w-2/5 flex-1"
      transition-name="slide-left"
    >
      <template v-if="copyright" #copyright>
        <slot name="copyright">
          <Copyright
            v-if="preferences.copyright.enable"
            v-bind="preferences.copyright"
          />
        </slot>
      </template>
    </AuthenticationFormView>-->

    <!-- 头部 Logo 和应用名称 -->
    <!--<div
      v-if="logo || appName"
      class="absolute left-0 top-0 z-10 flex flex-1"
      @click="clickLogo"
    >
      <div
        class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
      >
        <img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
        <p v-if="appName" class="m-0 text-xl font-medium">
          {{ appName }}
        </p>
      </div>
    </div>-->

    <!-- 系统介绍 -->
    <!--<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
      <div
        class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
      >
        <div class="login-background absolute left-0 top-0 size-full"></div>
        <div class="flex-col-center -enter-x mr-20 h-full">
          <template v-if="sloganImage">
            <img
              :alt="appName"
              :src="sloganImage"
              class="animate-float h-64 w-2/5"
            />
          </template>
          <SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
          <div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
            {{ pageTitle }}
          </div>
          <div class="dark:text-muted-foreground mt-2">
            {{ pageDescription }}
          </div>
        </div>
      </div>
    </div>-->

    <!-- 中心认证面板 -->
    <!--<div v-if="authPanelCenter" class="flex-center relative w-full">
      <div class="login-background absolute left-0 top-0 size-full"></div>
      <AuthenticationFormView
        class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
      >
        <template v-if="copyright" #copyright>
          <slot name="copyright">
            <Copyright
              v-if="preferences.copyright.enable"
              v-bind="preferences.copyright"
            />
          </slot>
        </template>
      </AuthenticationFormView>
    </div>-->

    <!-- 右侧认证面板 -->
    <!--<AuthenticationFormView
      v-if="authPanelRight"
      class="min-h-full w-[34%] flex-1"
    >
      <template v-if="copyright" #copyright>
        <slot name="copyright">
          <Copyright
            v-if="preferences.copyright.enable"
            v-bind="preferences.copyright"
          />
        </slot>
      </template>
    </AuthenticationFormView>-->
  <!-- </div> -->
</template>

<!-- <style scoped>
.login-background {
  background: linear-gradient(
    154deg,
    #07070915 30%,
    hsl(var(--primary) / 30%) 48%,
    #07070915 64%
  );
  filter: blur(100px);
}

.dark {
  .login-background {
    background: linear-gradient(
      154deg,
      #07070915 30%,
      hsl(var(--primary) / 20%) 48%,
      #07070915 64%
    );
    filter: blur(100px);
  }
}
</style> -->
<style scoped>
@font-face {
  font-family: 'BaiduVariety';
  src: url('../../../../../apps/web-antd/src/assets/fonts/百度综艺简体.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.login-bg {
  min-height: 100vh;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background:
  /* url('../../../../../apps/web-antd/src/assets/juxing.png') no-repeat center center fixed, */
  url('../../../../../apps/web-antd/src/assets/222.png') no-repeat center center fixed;
  background-size: 100% 100%, 100% 100%;
  /* background-repeat: no-repeat, no-repeat;
  background-position: center center, center center; */
  color: #fff;
}
.login-wapter{
  position: relative;
  top: -115px; /* 负值越大，越往上 */
  .login-wapter1 {
  font-size: 44px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
.login-wapter2 {
  font-size: 60px;
  /* margin-bottom: 38px; */
  background: linear-gradient(to bottom, #ffffff, #cbeaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  display: flex;
  justify-content: center;
  font-family: 'BaiduVariety',sans-serif;
  letter-spacing: 6px;
}
}
.login-bg_1 {
  flex-direction: column;
  flex: 1 1 auto;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  background: url('../../../../../apps/web-antd/src/assets/from.png') no-repeat center center fixed;
}
.login-form {
  border-radius: 10px;
  /* margin-top: 2rem; */
  /* padding: 0 45px 45px 45px; */
  height: 400px;
  width: 397px;
  margin: 0 auto;
}

.login-form h3 {
  font-size: 26px;
  margin-bottom: 40px;
  color: #fff;
}

.login-form input {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #fff; /* 设置边框线为白色 */
  border-radius: 2px;
  width: 100%;
  border: 0;
  outline: none;
  -webkit-text-fill-color: #fff;
}
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}
.login-form label {
  display: flex;
  text-align: left;
  margin-top: 5px;
  margin-left: 7px;
  font-size: 16px;
  color: #eee;
}

.login-form button {
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border: none;
  border-radius: 5px;
  background-color: #19DCF8;
  color: #0254A5;
  cursor: pointer;
  font-size: 22px;
  margin-top: 70px;
  font-weight: 600;
}

.login-form button:hover {
  background-color: #00aaff;
}

.remember-me {
  display: flex;
  align-items: center;
  padding-left: 25px;
  cursor: pointer;
  font-size: 14px;
  color: #eee;
}



/* 新增 .input-group 样式 */
.input-group {
  display: flex;
  align-items: center;
  border-radius: 2px;
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}

.input-icon {
  padding: 0px 10px 10px 10px;
  pointer-events: none; /* 确保用户不能点击图标 */
  position: absolute;
  /* top: 17px; */
  left: 0;
}

.login-form input {
  height: 40px;
  line-height: 40px; /* 必须与 height 一致 */
  padding-left: 33px;
  border: 0.1px solid rgba(255, 255, 255, 0.44);
  outline: none;
  background-color: transparent;
  color: #fff;
}
.login-form input::placeholder {
  color: rgba(255, 255, 255, 0.42); /* 例如灰色 */
}
</style>
