<template>
    <view class="empty">
        <view class="empty-box">
            <!-- loading 状态使用 uni-app 原生 loading -->
            <view v-if="type === 'loading'" class="loading-wrap">
                <view class="loading-spinner"></view>
            </view>
            <!-- 空状态使用内联 SVG -->
            <view v-else class="empty-icon">
                <view class="icon-box">📭</view>
            </view>
            <text class="empty-text">{{ content }}</text>
        </view>
    </view>
</template>

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

<style lang="scss" scoped>
.empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .empty-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .loading-wrap {
            width: 80rpx;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .loading-spinner {
                width: 48rpx;
                height: 48rpx;
                border: 4rpx solid #e5e5e5;
                border-top-color: #0ea5e9;
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
            }
        }

        .empty-icon {
            width: 120rpx;
            height: 120rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 24rpx;

            .icon-box {
                font-size: 56rpx;
            }
        }

        .empty-text {
            margin-top: 16rpx;
            font-family: $font-special;
            font-size: 20rpx;
            color: #94a3b8;
            text-align: center;
        }
    }
}

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