<template>
    <view class="chart-loading">
        <view class="loading-container">
            <!-- 加载动画图标 -->
            <view class="loading-icon">
                <view class="loading-dot dot1"></view>
                <view class="loading-dot dot2"></view>
                <view class="loading-dot dot3"></view>
            </view>
            <!-- 加载文字 -->
            <view class="loading-text">{{ text }}</view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'ChartLoading',
    props: {
        // 加载文字
        text: {
            type: String,
            default: '数据加载中...'
        },
        // 加载图标大小
        size: {
            type: String,
            default: 'medium' // small, medium, large
        },
        // 背景是否透明
        transparent: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style scoped lang="less">
.chart-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8rpx;
    min-height: 300rpx;

    &.transparent {
        background: transparent;
    }
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
}

.loading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;

    &.small {
        transform: scale(0.8);
    }

    &.large {
        transform: scale(1.2);
    }
}

.loading-dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: linear-gradient(45deg, #46B8F3, #1A4AF6);
    animation: loading-bounce 1.4s ease-in-out infinite both;

    &.dot1 {
        animation-delay: -0.32s;
    }

    &.dot2 {
        animation-delay: -0.16s;
    }

    &.dot3 {
        animation-delay: 0;
    }
}

.loading-text {
    font-size: 24rpx;
    color: #666;
    opacity: 0.8;
}

@keyframes loading-bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}
</style>