<script setup>
const props = defineProps({
    // 徽章编号 1-5
    badgeIndex: {
        type: Number,
        default: 1
    },
    // 徽章标题
    title: {
        type: String,
        default: '水源净化卫士'
    },
    // 副标题
    subTitle: {
        type: String,
        default: '已完成第一关卡'
    },
    // 是否显示
    show: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['close', 'confirm']);

const ASSETS = Object.freeze({
    bg: '/static/success/bg.webp',
    left: '/static/success/left.webp',
    right: '/static/success/right.webp',
    badge1: '/static/success/badge1.webp',
    badge2: '/static/success/badge2.webp',
    badge3: '/static/success/badge3.webp',
    badge4: '/static/success/badge4.webp',
    badge5: '/static/success/badge5.webp',
});

const getBadgeImage = () => {
    return ASSETS[`badge${props.badgeIndex}`] || ASSETS.badge1;
};

const handleConfirm = () => {
    emit('confirm');
    emit('close');
};
</script>

<template>
    <view v-if="show" class="success-overlay" @click="handleConfirm">
        <view class="success-content" @click.stop>
            <!-- 顶部标题 -->
            <view class="header-text">
                <image class="arrow-img arrow-left" :src="ASSETS.left" mode="scaleToFill" />
                <text :class="['title-text', { 'title-text-type2': badgeIndex === 5 }]">
                    <template v-if="badgeIndex === 5">关卡全部完成！获得</template>
                    <template v-else>恭喜获得<text class="highlight">1</text>枚新徽章</template>
                </text>
                <image class="arrow-img arrow-right" :src="ASSETS.right" mode="scaleToFill" />
            </view>

            <!-- 徽章区域 -->
            <view class="badge-area">
                <image class="badge-bg" :src="ASSETS.bg" mode="aspectFit" />
                <image class="badge-img" :src="getBadgeImage()" mode="aspectFit" />
            </view>

            <!-- 徽章信息 -->
            <view class="badge-info">
                <text class="badge-title">{{ title }}</text>
                <text class="badge-sub">{{ subTitle }}</text>
            </view>

            <!-- 按钮 -->
            <view class="confirm-btn" @click="handleConfirm">
                <text class="btn-text">立即收下</text>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(49, 47, 47, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
}

.header-text {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .arrow-img {
        position: absolute;
        top: 304rpx;
        width: 126rpx;
        height: 14rpx;
    }

    .arrow-left {
        left: 30rpx;
    }

    .arrow-right {
        right: 30rpx;
    }

    .title-text {
        position: absolute;
        top: 258rpx;
        left: 0;
        right: 0;
        text-align: center;
        color: #FFFFFF;
        font-size: 48rpx;
        font-weight: 600;

        .highlight {
            color: #7ADBFF;
            font-size: 66rpx;
            margin: 0 8rpx;
        }
    }

    .title-text-type2 {
        top: 280rpx;
    }
}

.badge-area {
    position: relative;
    width: 854rpx;
    height: 832rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .badge-bg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .badge-img {
        position: relative;
        width: 464rpx;
        height: 484rpx;
        z-index: 2;
    }
}

.badge-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 76rpx;
    margin-top: -96rpx;

    .badge-title {
        color: #FFFFFF;
        font-size: 62rpx;
        font-weight: 500;
        margin-bottom: 16rpx;
    }

    .badge-sub {
        color: #ffffffb3;
        font-size: 30rpx;
    }
}

.confirm-btn {
    width: 354rpx;
    height: 76rpx;
    background: linear-gradient(180deg, #51C3E5 0%, #267FD4 100%);
    border-radius: 48rpx;
    border: 4rpx solid #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 0 0 #00000040;

    .btn-text {
        color: #FFFFFF;
        font-size: 40rpx;
        font-weight: 600;
    }
}
</style>
