<script setup lang="ts">
import { Button } from '~/components/ui/button'
import { Input } from '~/components/ui/input'
import { Label } from '~/components/ui/label'
import { authCode } from '~/composables'
import { API_BASE_URL } from '~/CONSTANT'
import manba from '../../public/pack.png'

const code = ref('')
const router = useRouter()
const remember = ref(false)

function auth() {
  authCode.value = code.value
  const resp = baseFetch(`${API_BASE_URL}/ping`, {
  })
  if (!resp.error.value) {
    if (remember.value) {
      localStorage.setItem('authCode', code.value)
    }
    else {
      sessionStorage.setItem('authCode', code.value)
    }
    router.push('/')
    return
  }
  // eslint-disable-next-line no-alert
  alert('认证失败')
}
</script>

<template>
  <div class="w-full lg:grid lg:grid-cols-2 lg:min-h-[600px] xl:min-h-[800px]">
    <div class="hidden p-30 lg:block">
      <img
        :src="manba"
        alt="Image"
        class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
      >
    </div>
    <div class="flex items-center justify-center bg-muted py-12">
      <div class="grid mx-auto w-[350px] gap-6">
        <div class="grid gap-2 text-center">
          <h1 class="text-3xl font-bold">
            系统认证
          </h1>
          <p class="text-balance text-muted-foreground">
            本系统仅供内部使用
          </p>
        </div>
        <div class="grid gap-4">
          <div class="grid gap-2">
            <div class="flex items-center">
              <Label for="password">口令</Label>
            </div>
            <Input id="password" v-model="code" type="password" required />
          </div>
          <div flex="~ items-center gap-2">
            <Checkbox id="remember" v-model="remember" />
            <Label for="remember" class="flex items-center">
              记住我
            </Label>
          </div>
          <Button type="submit" class="w-full" @click.prevent="auth">
            认证
          </Button>
        </div>
        <div class="mt-4 text-center text-sm">
          丢失密码？请前往后端重置
          <!-- <a href="#" class="underline">
            Sign up
          </a> -->
        </div>
      </div>
    </div>
  </div>
</template>
