<template>
    <div
        class="auth-container flex justify-center items-center"
        :style="`background-color: ${appStore.mode == 'light' ? '#ebedf1' : '#242424'}`"
    >
        <div class="auth-panel">
            <div class="flex text-2xl justify-center mt-5 title">
                <img :src="`${$url}logo.svg`" width="56" class="mr-2" />
                <div class="mt-0.5">Api Document</div>
            </div>
            <a-form :model="form" layout="vertical" class="mt-3 p-5" @submit="submit" ref="formRef">
                <a-form-item label="APP ID" field="app_id" :rules="[{ required: true, message: 'APP ID必填' }]">
                    <a-input v-model="form.app_id" placeholder="请输入 APP ID" />
                </a-form-item>
                <a-form-item
                    label="APP SECRET"
                    field="app_secret"
                    :rules="[{ required: true, message: 'APP SECRET必填' }]"
                >
                    <a-input-password v-model="form.app_secret" placeholder="请输入 APP SECRET" />
                </a-form-item>
                <a-form-item class="mt-2">
                    <a-button long type="primary" size="large" html-type="submit">登录文档</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script setup>
import { nextTick, ref } from "vue"
import { useRouter, useRoute } from "vue-router"
import { useAppStore, useDocStore } from "@/store"
import doc from "@/api/doc"

const appStore = useAppStore()
const docStore = useDocStore()
const router = useRouter()
const route = useRoute()
const form = ref({ app_id: "", app_secret: "" })
const formRef = ref()

const submit = ({ values, errors }) => {
    if (errors) return false
    formRef.value.validate().then(() => {
        docAuth(values)
    })
}

const docAuth = (data) => {
    doc.login(data).then((res) => {
        if (res.success && res.code == 200) {
            docStore.appId = data.app_id
            docStore.appSecret = data.app_secret
            docStore.auth = true
            nextTick(() => {
                router.push({ name: "interfaceList" })
            })
        }
    })
}

if (route.query.app_id && route.query.app_secret) {
    form.value.app_id = route.query.app_id
    form.value.app_secret = route.query.app_secret
    docAuth(form.value)
}
</script>

<style scoped>
.auth-container {
    background-image: url(/auth-bg.svg);
    background-size: cover;
    height: 100%;
}
.auth-panel {
    width: 380px;
    background: var(--color-bg-2);
    backdrop-filter: blur(10px);
    height: 355px;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 0 5px var(--color-fill-4);
}
.title {
    color: var(--color-text-1);
}
</style>
