<template>
    <div class="global-upload-animation">
        <div class="animation-mask"></div>
        <div class="animation-content">
            <div class="spinner"></div>
            <div class="animation-text">{{ text }}</div>
            <div class="animation-subtext">{{ subtext }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'GlobalUploadAnimation',
    props: {
        text: {
            type: String,
            default: '识别中'
        },
        subtext: {
            type: String,
            default: '正在处理文件，请稍候...'
        }
    }
}
</script>

<style scoped lang="scss">
.global-upload-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    
    .animation-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
        pointer-events: auto;
    }
    
    .animation-content {
        position: relative;
        z-index: 10000;
        text-align: center;
        background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
        padding: 40px 50px;
        border-radius: 20px;
        box-shadow: 
            0 10px 40px rgba(31, 114, 234, 0.15),
            0 0 0 1px rgba(31, 114, 234, 0.1);
        min-width: 280px;
        animation: slideInUp 0.3s ease-out;
        pointer-events: auto;
        
        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid #f3f7ff;
            border-top: 4px solid #1F72EA;
            border-radius: 50%;
            animation: spin 1.2s linear infinite;
            margin: 0 auto 20px;
            position: relative;
            
            &::after {
                content: '';
                position: absolute;
                top: -4px;
                left: -4px;
                right: -4px;
                bottom: -4px;
                border: 4px solid transparent;
                border-top: 4px solid #4A8BFF;
                border-radius: 50%;
                animation: spin 0.8s linear infinite reverse;
            }
        }
        
        .animation-text {
            font-size: 20px;
            font-weight: 600;
            color: #1F72EA;
            margin-bottom: 8px;
            background: linear-gradient(135deg, #1F72EA 0%, #4A8BFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .animation-subtext {
            font-size: 14px;
            color: #666;
            opacity: 0.8;
        }
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
</style>