<template>
    <view class="empty">
        <view class="empty-illu" :class="`empty-illu-${type}`">
            <view v-if="type === 'loading'" class="empty-loader">
                <view class="dot dot-1"></view>
                <view class="dot dot-2"></view>
                <view class="dot dot-3"></view>
            </view>
            <view v-else class="empty-art">
                <view class="art-card art-card-back"></view>
                <view class="art-card art-card-front">
                    <view class="art-dot"></view>
                    <view class="art-line art-line-long"></view>
                    <view class="art-line art-line-mid"></view>
                    <view class="art-line art-line-short"></view>
                </view>
                <view class="art-spark art-spark-left"></view>
                <view class="art-spark art-spark-right"></view>
            </view>
        </view>
        <view class="empty-text">{{ content }}</view>
    </view>
</template>

<script setup lang="ts">
withDefaults(
    defineProps<{
        type?: 'loading' | 'network' | 'task' | 'learn';
        content?: string;
    }>(),
    {
        type: 'task',
        content: '暂无数据',
    },
);
</script>

<style lang="scss" scoped>
.empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    gap: 24rpx;
}

.empty-illu {
    width: 200rpx;
    height: 200rpx;
    border-radius: 60rpx;
    background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 16rpx 40rpx rgba(99, 102, 241, 0.18),
        inset 0 -6rpx 0 rgba(199, 210, 254, 0.6),
        inset 0 4rpx 0 rgba(255, 255, 255, 0.9);

    &.empty-illu-network {
        .art-dot {
            background: #fca5a5;
        }
    }

    &.empty-illu-learn {
        .art-dot {
            background: #86efac;
        }
    }
}

.empty-text {
    font-size: 28rpx;
    color: #6366f1;
    font-weight: 500;
}

.empty-art {
    position: relative;
    width: 116rpx;
    height: 116rpx;
}

.art-card {
    position: absolute;
    border-radius: 22rpx;
}

.art-card-back {
    right: 6rpx;
    bottom: 4rpx;
    width: 78rpx;
    height: 86rpx;
    background: linear-gradient(180deg, #dbeafe 0%, #c7d2fe 100%);
    opacity: 0.9;
    transform: rotate(9deg);
}

.art-card-front {
    left: 8rpx;
    top: 6rpx;
    width: 86rpx;
    height: 98rpx;
    background: #ffffff;
    box-shadow: 0 10rpx 24rpx rgba(79, 70, 229, 0.12);
}

.art-dot {
    width: 24rpx;
    height: 24rpx;
    margin: 20rpx 0 0 18rpx;
    border-radius: 50%;
    background: #93c5fd;
}

.art-line {
    height: 8rpx;
    margin: 12rpx 0 0 18rpx;
    border-radius: 999rpx;
    background: #c7d2fe;
}

.art-line-long {
    width: 50rpx;
}

.art-line-mid {
    width: 38rpx;
}

.art-line-short {
    width: 28rpx;
}

.art-spark {
    position: absolute;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #a5f3fc;
}

.art-spark-left {
    left: 0;
    bottom: 24rpx;
}

.art-spark-right {
    right: 0;
    top: 18rpx;
    background: #fde68a;
}

/* loading dots */
.empty-loader {
    display: flex;
    gap: 16rpx;

    .dot {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        background: #818cf8;
        animation: bounce 1.4s infinite ease-in-out both;

        &.dot-1 { animation-delay: -0.32s; background: #4f46e5; }
        &.dot-2 { animation-delay: -0.16s; background: #818cf8; }
        &.dot-3 { background: #c7d2fe; }
    }
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
    40% { transform: scale(1); opacity: 1; }
}
</style>
