<template>
  <AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
    <div
      style="transform: translateY(25px)"
      class="m-auto max-w-700 min-w-345 f-c-c rounded-10 bg-white bg-opacity-60 p-15 card-shadow"
      dark:bg-dark
    >
      <div hidden w-380 flex-col px-20 py-35 md:block>
        <img src="@/assets/images/login_banner.webp" w-full alt="login_banner" />
      </div>

      <div w-320 flex-col px-20 py-35>
        <h5 f-c-c text-24 font-normal color="#6a6a6a">
          <img src="@/assets/images/logo.png" height="50" class="mr-10" />
          {{ title }}
        </h5>
        <div mt-20>
          <n-input
            v-model:value="loginInfo.account"
            autofocus
            class="h-45 items-center text-16"
            placeholder="账号"
            :maxlength="20"
          >
            <template #prefix>
              <icon-material-symbols:account-circle-outline class="mr-8 text-20 opacity-40" />
            </template>
          </n-input>
        </div>
        <div mt-20>
          <n-input
            v-model:value="loginInfo.password"
            class="h-45 items-center text-16"
            type="password"
            show-password-on="click"
            placeholder="密码"
            :maxlength="20"
            @keydown.enter="handleLogin"
          >
            <template #prefix>
              <icon-ri:lock-password-line class="mr-8 text-20 opacity-40" />
            </template>
          </n-input>
        </div>

        <div class="mt-20 flex items-center">
          <n-input
            v-model:value="loginInfo.captchaCode"
            class="h-45 items-center w-8"
            palceholder="请输入验证码"
            :maxlength="4"
            @keydown.enter="handleLogin()"
          >
            <template #prefix>
              <icon-material-symbols:keyboard-outline class="mr-8 text-20 opacity-40" />
            </template>
          </n-input>
          <img
            v-if="captchaUrl"
            :src="captchaUrl"
            alt="验证码"
            height="38"
            class="ml-12 w-120 cursor-pointer"
            @click="getCaptcha()"
          >
        </div>

        <div mt-20>
          <n-button
            h-50
            w-full
            rounded-5
            text-16
            type="primary"
            :loading="loading"
            @click="handleLogin"
          >
            登录
          </n-button>
        </div>
      </div>
    </div>
  </AppPage>
</template>

<script setup>
import { setToken, setXToken } from '@/utils'
import bgImg from '@/assets/images/login_bg.webp'
import api from './api'
import { addDynamicRoutes } from '@/router'
import { useRoute } from 'vue-router'

const title = import.meta.env.VITE_TITLE

const router = useRouter()
const { query } = useRoute()

const captchaUrl = ref('')
const loginInfo = ref({
  account: '',
  password: '',
  captchaId: '',
  captchaCode: ''
})

// 进入系统初始化验证码
getCaptcha()

// 获取验证码
async function getCaptcha() {
  const res = await api.captcha()
  captchaUrl.value = res.data.data.captcha
  loginInfo.value.captchaId = res.data.data.id
}

const loading = ref(false)
async function handleLogin() {
  const { account, password, captchaCode } = loginInfo.value
  if (!account || !password) {
    $message.warning('请输入用户名和密码')
    return
  }
  if (!captchaCode) {
    $message.warning('请输入验证码')
    return
  }
  try {
    loading.value = true
    $message.loading('正在验证...')
    const res = await api.login(loginInfo.value)
    $message.success('登录成功')
    const tokenStr = `${res.data.data.type} ${res.data.data.token}`
    setToken(tokenStr,res.data.data.expireAt)
    setXToken(res.headers.get('X-Token'))
    await addDynamicRoutes()
    if (query.redirect) {
      const path = query.redirect
      Reflect.deleteProperty(query, 'redirect')
      router.push({ path, query })
    } else {
      router.push('/')
    }
  } catch (error) {
    await getCaptcha()
    console.error(error)
    $message.removeMessage()
  }
  loading.value = false
}
</script>
