<template>
    <view class="loading">
        <view class="loading-clay">
            <view class="loading-orbit">
                <view class="loading-dot loading-dot-1"></view>
                <view class="loading-dot loading-dot-2"></view>
                <view class="loading-dot loading-dot-3"></view>
            </view>
        </view>
        <text class="loading-text">{{ text }}</text>
    </view>
</template>

<script setup lang="ts">
withDefaults(
    defineProps<{ text?: string }>(),
    { text: '加载中…' },
);
</script>

<style lang="scss" scoped>
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24rpx;
}

.loading-clay {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
    box-shadow:
        0 12rpx 32rpx rgba(99, 102, 241, 0.18),
        inset 0 -4rpx 0 rgba(199, 210, 254, 0.6),
        inset 0 4rpx 0 rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-orbit {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    animation: orbit-spin 1.6s linear infinite;
}

.loading-dot {
    position: absolute;
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;

    &.loading-dot-1 {
        background: #4f46e5;
        top: 0;
        left: 50%;
        margin-left: -9rpx;
    }

    &.loading-dot-2 {
        background: #818cf8;
        bottom: 0;
        left: 14rpx;
    }

    &.loading-dot-3 {
        background: #22c55e;
        bottom: 0;
        right: 14rpx;
    }
}

.loading-text {
    font-size: 26rpx;
    color: #4f46e5;
    font-weight: 500;
    letter-spacing: 1rpx;
}

@keyframes orbit-spin {
    to {
        transform: rotate(360deg);
    }
}
</style>
