<template>
    <div class="token-handler">

    </div>
</template>

<script>
import { setToken } from '@/utils/auth';

export default {
    name: 'TokenHandler',
    data() {
        return {
            loading: true,
            error: null
        }
    },
    created() {
        this.handleToken()
    },
    methods: {
        handleToken() {
            try {
                // 获取URL参数
                const urlParams = new URLSearchParams(window.location.search)

                // 提取token
                const token = urlParams.get('token')
                // 提取跳转目标页面
                const redirectUrl = urlParams.get('redirect') || urlParams.get('redirectUrl') || '/'

                if (!token) {
                    this.error = 'URL中未找到token参数'
                    this.loading = false
                    return
                }
                setToken(token)
                // 跳转到指定页面
                this.redirectTo(redirectUrl)

            } catch (err) {
                console.error('处理token时出错:', err)
                this.error = '处理token时出现错误'
                this.loading = false
            }
        },
        redirectTo(url) {
            // 清理URL中的token参数，避免在地址栏显示敏感信息
            const cleanUrl = this.removeTokenFromUrl()

            // 更新浏览器历史记录，移除token
            if (cleanUrl !== window.location.href) {
                window.history.replaceState({}, '', cleanUrl)
            }

            // 延迟跳转，确保token已存储
            setTimeout(() => {
                // 如果是相对路径，使用Vue Router跳转
                if (url.startsWith('/')) {
                    if (this.$router) {
                        this.$router.push(url)
                    } else {
                        window.location.href = url
                    }
                } else {
                    // 如果是完整URL，直接跳转
                    window.location.href = url
                }
            }, 500)
        },

        removeTokenFromUrl() {
            const url = new URL(window.location.href)
            url.searchParams.delete('token')
            return url.toString()
        },

        setCookie(name, value, days) {
            const expires = new Date()
            expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000))
            document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`
        },

        retry() {
            this.loading = true
            this.error = null
            this.handleToken()
        }
    }
}
</script>

<style scoped>
.token-handler {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.loading, .error {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
}

.loading p {
    margin: 0;
    color: #666;
    font-size: 16px;
}

.error p {
    margin: 0 0 1rem 0;
    color: #e74c3c;
    font-size: 16px;
}

.error button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.error button:hover {
    background-color: #2980b9;
}
</style>
