<template>
    <div class="signOn">
        <div class="signOnContent">
            <div class="signOnContentHeader">
                <div class="signOnContentHeader_follt">
                    <div class="signOnContentHeaderTitle">智慧教育门户平台</div>
                    <div class="signOnContentHeaderLine"></div>
                    <div class="signOnContentHeaderDesc">
                        汇聚多元教学资源、工具与服务，覆盖课前预习、课中互动、课后巩固全场景，赋能师生高效教与学，打造便捷协同的智慧教育入口
                    </div>
                </div>
            </div>
            <div class="signOnContentBody">
                <div v-for="(item, index) in sysInfo" :key="index" class="system-cards" @click="goToSystem(item)"
                    :style="{ backgroundImage: 'url(' + item.image + ')' }">
                    <div class="card-content">
                        <div class="card-content-title">{{ item.appName }}</div>
                        <p>{{ item.description }}</p>
                        <button class="experience-btn">立即体验</button>
                    </div>
                    <div class="card-image">
                        <!-- 图标占位区域 -->
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 倒计时提示框 -->
        <div v-if="showCountdown" class="countdown-overlay">
            <div class="countdown-content">
                <p class="countdown-message">即将跳转到 {{ countdownSystemName }}</p>
                <p class="countdown-seconds">{{ countdownSeconds }}秒</p>
            </div>
        </div>
    </div>
</template>

<script>
import { getInfo, getToken } from '@/api/sigon'
export default {
    data() {
        return {
            sysInfo: [],
            // 倒计时相关属性
            showCountdown: false,
            countdownSeconds: 3,
            countdownSystemName: '',
            countdownTimer: null
        };
    },
    created() {
        this.getInfo()
    },
    beforeDestroy() {
        // 组件销毁时清除计时器，避免内存泄漏
        if (this.countdownTimer) {
            clearInterval(this.countdownTimer);
        }
    },
    methods: {
        async getInfo() {
            let getUserInfo = await getInfo()
            if (getUserInfo.ret == 0) {
                this.sysInfo = getUserInfo.data
                this.sysInfo = this.sysInfo.map(item => {
                    if (item.appName === "教学资源系统") {
                        return {
                            ...item,
                            image: require("../assets/singleSignOn/resMgrSysBkg.png")
                        }
                    }
                    else if (item.appName === "联考管理系统") {
                        return {
                            ...item,
                            image: require("../assets/singleSignOn/examMgmtSBgk.png")
                        }
                    }
                    else if (item.appName === "阅卷评价系统") {
                        return {
                            ...item,
                            image: require("../assets/singleSignOn/onlineMarkingBgk.png")
                        }
                    }
                    return item
                })
                sessionStorage.setItem("getInfo", JSON.stringify(this.sysInfo));
            }
        },
        async goToSystem(row) {
            console.log(`即将进入===============》`, row)
            let dataParmas = {
                // sunhj627
                account: sessionStorage.getItem("getInfoName"),
                "appId": row.appId
            }
            let goToken = await getToken(dataParmas)
            if (goToken.ret == 0) {
                // 从goToken中获取accessToken
                const accessToken = goToken && goToken.accessToken ? goToken.accessToken : '';

                if (row.platformUrl) {
                    try {
                        let targetUrl = row.platformUrl.trim();

                        // 检查URL是否包含协议，如果没有则添加
                        if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
                            // 如果URL本身就是完整域名，添加https协议
                            if (targetUrl.includes('.')) {
                                targetUrl = 'https://' + targetUrl;
                            } else {
                                // 否则，可能是相对路径或不完整URL
                                console.warn('URL格式可能不完整:', targetUrl);
                            }
                        }

                        // 构建带accessToken的URL
                        if (accessToken) {
                            // 检查URL是否已有查询参数
                            const hasQueryParams = targetUrl.includes('?');
                            targetUrl += hasQueryParams ? '&' : '?';
                            targetUrl += 'accessToken=' + encodeURIComponent(accessToken);
                        }
                        console.log(targetUrl, 'targetUrl')
                        
                        // 显示倒计时提示
                        this.showCountdown = true;
                        this.countdownSystemName = row.appName;
                        this.countdownSeconds = 3;
                        
                        // 清除可能存在的旧计时器
                        if (this.countdownTimer) {
                            clearInterval(this.countdownTimer);
                        }
                        
                        // 设置倒计时计时器
                        this.countdownTimer = setInterval(() => {
                            this.countdownSeconds--;
                            if (this.countdownSeconds <= 0) {
                                clearInterval(this.countdownTimer);
                                this.showCountdown = false;
                                // 三秒倒计时结束后执行跳转
                                window.location.href = targetUrl;
                            }
                        }, 1000);
                    } catch (error) {
                        console.error('URL构建失败:', error);
                        this.$message.error('无法跳转到目标系统，请联系管理员');
                    }
                } else {
                    console.error('平台URL不存在');
                    this.$message.error('平台URL不存在');
                }
            }
        }
    },
};
</script>

<style scoped lang="scss">
.signOn {
    width: 100%;
    height: 100%;
    background: url("../assets/singleSignOn/bj.png");
    background-size: cover;

    .signOnContent {
        width: 100%;
        height: 100%;

        .signOnContentHeader {
            width: 100%;
            height: 50%;
            text-align: center;
            // border-bottom: 1px solid #326eff;
            // 内容垂直居中
            display: flex;
            align-items: end;
            justify-content: center;

            .signOnContentHeader_follt {
                margin-bottom: 5%;
                width: 44%;

                .signOnContentHeaderTitle {
                    color: #326eff;
                    font-size: 55px;
                    font-weight: bold;
                    position: relative;
                }

                .signOnContentHeaderLine {
                    width: 100px;
                    height: 7px;
                    background: #326eff;
                    margin: 10px auto 40px;
                }

                .signOnContentHeaderDesc {
                    font-size: 20px;
                    color: #333333;
                    margin-bottom: 20px;
                    text-align: center;
                    font-weight: 400;
                }
            }
        }

        .signOnContentBody {
            width: 100%;
            // height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            // padding: 50px;

            .system-cards {
                display: flex;
                height: 240px;
                backdrop-filter: blur(10px);
                border-radius: 15px;
                padding: 30px;
                text-align: left;
                transition: transform 0.3s, box-shadow 0.3s;
                cursor: pointer;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 400px;
                position: relative;
                overflow: hidden;
                align-items: center;
                justify-content: space-between;

                .card-content {
                    flex: 1;
                    z-index: 1;
                    padding-right: 20px;
                }

                .card-image {
                    flex-shrink: 0;
                    width: 120px;
                    height: 120px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .card-content-title {
                    font-size: 24px;
                    margin-bottom: 15px;
                    font-weight: 800;
                    color: #333;
                }

                p {
                    font-size: 16px;
                    margin-bottom: 20px;
                    color: #666;
                    line-height: 1.5;
                }

                .experience-btn {
                    background-color: #326eff;
                    color: white;
                    border: none;
                    padding: 8px 24px;
                    border-radius: 25px 4px;
                    font-size: 16px;
                    cursor: pointer;
                    transition: background-color 0.3s;

                    &:hover {
                        background-color: #2558d1;
                    }
                }
            }
        }
    }
    
    // 倒计时样式
    .countdown-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .countdown-content {
        background-color: white;
        padding: 30px;
        border-radius: 8px;
        text-align: center;
        min-width: 300px;
    }
    
    .countdown-message {
        font-size: 18px;
        margin-bottom: 10px;
        color: #333;
    }
    
    .countdown-seconds {
        font-size: 24px;
        font-weight: bold;
        color: #326eff;
    }
}
</style>