<script setup>
import { ref, computed } from 'vue';
import navBar from '@/components/navBar.vue';
import { onLoad } from '@dcloudio/uni-app';

const ASSETS = Object.freeze({
    blank: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/d7873615505b400abd996b7498aaa4b6wcS02B18DXFm131a1e3b221f4a5853c94500ebbe1dbf.webp',
    badge1: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/672e8e6fbd5444c884675dde50c446a5Y2af2XVB0T-Jb7e73ab2397ffdb37f2b5c132dc584da.webp',
    badge2: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/cd584ad7bc204aaa92e22b7d6294d752J4r8jf1sLeDBe39016508c55312b7a0d6d0ab378c691.webp',
    badge3: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/252505de8901440b89c01ceae8ba92735cwiy47_s9O92237a043d60f2620a390cd3980a7f3c6.webp',
    badge4: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/10c6937c832d498f8e9d7e0a975263329nC4ASG9gQBka44a97e514fdb44b775b49e72d9aefbc.webp',
    badge5: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/b926e4cd469b4400bc19ba9ed6798e88XwyB9JqUSWXGcf436811eae73ba6229615399dab16aa.webp',
    badge1Gray: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/a155a0a5c619418b90e656792e2a0d1114pNJPNn64ss4e6fe0a34a2c181ecffb4ba77bace4f2.webp',
    badge2Gray: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/d495a86e446046faabfdea09d84a44d1fGL8pw_2cHR4a4d071d2ed6d75cd0227298ef969a4d9.webp',
    badge3Gray: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/22ff15d76d144306909f94c4029670abiCgKOBoreJ-1bcbb00df1ba5682386e031ccedc3c6cb.webp',
    badge4Gray: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/018385573cde45eb927283dbb8e6468acj8h_7C-hy9v38ef8079391af2ddb8785bfb0ee8f041.webp',
    badge5Gray: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/498cf3a935334fa09f0b0d45ee300795QSZy9n9Y6yBR8b4fabffd32f8517af6ba129810be346.webp',
    display1: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/d8b5013e03ed435e87df67f23a336c5004LqofmY2_AB12cc8ce7b029bc417ca372f0adf99357.webp',
    display2: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/429f24ee65ea41a08375e52561163383fHpZ7I1MpNm6dd4ee291f5836d1f4c2d2dfc18ac3af7.webp',
    display3: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/e7415cd5630e4d0e8c7526fc3b5432daZVjP7LzdCneu558949671d27a4a9165a4b04038e17dc.webp',
    display4: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/cdb8a5aa5d884b15b3b3df5ab467603aRlgBB7VFxdiZe002226923227b90a51c8e269b34a785.webp',
    display5: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/68240835222e4fdf95dce8759ea7effd89x90XC2gyYK04083bca99804e8496bbe94a90d090ab.webp',
})

const badges = computed(() => [
    { id: 1, title: '水源净化卫士', sub: '完成第一关', iconKey: 'badge1', unlocked: badgeImgs.value >= 1 },
    { id: 2, title: '滤芯工程师', sub: '完成第二关', iconKey: 'badge2', unlocked: badgeImgs.value >= 2 },
    { id: 3, title: '水质分析高手', sub: '完成第三关', iconKey: 'badge3', unlocked: badgeImgs.value >= 3 },
    { id: 4, title: '精准控水达人', sub: '完成第四关', iconKey: 'badge4', unlocked: badgeImgs.value >= 4 },
    { id: 5, title: '水质专家', sub: '完成全部关卡', iconKey: 'badge5', unlocked: badgeImgs.value >= 5 }
]);

const badgeImgs = ref(0);

onLoad((options) => {
  if (options.badge) {
    badgeImgs.value = Number(options.badge);
  }
});

const unlockedCount = computed(() => badgeImgs.value);

const currentDisplayImg = computed(() => {
    switch (badgeImgs.value) {
        case 0: return ASSETS.blank;
        case 1: return ASSETS.display1;
        case 2: return ASSETS.display2;
        case 3: return ASSETS.display3;
        case 4: return ASSETS.display4;
        case 5: return ASSETS.display5;
        default: return ASSETS.blank;
    }
});

const continueText = computed(() => {
    return badgeImgs.value === 5 ? '已完成全部闯关' : '继续闯关';
});

const toggleBadge = () => {
    if (badgeImgs.value < 5) {
        badgeImgs.value++;
    } else {
        badgeImgs.value = 0;
    }
};

const navToContinuePage = () => {
    uni.navigateTo({
        url: '/pages/start/index'
    });
}
</script>

<template>
    <view class="container">
        <navBar />
        <view class="title-box">
            <view class="title-content">
                <view class="title">我的徽章</view>
                <view class="badge-count">已获得{{ unlockedCount }}/5徽章</view>
            </view>
            <image :src="currentDisplayImg" mode="aspectFit" class="badge-display-img" />
        </view>
        <view class="badge-box box1">
            <view 
                class="badge-item" 
                v-for="item in badges.slice(0, 3)" 
                :key="item.id"
                @click="toggleBadge"
            >
                <image 
                    :src="item.unlocked ? ASSETS[item.iconKey] : ASSETS[item.iconKey + 'Gray']" 
                    mode="aspectFit" 
                    class="badge-image"
                />
                <text class="badge-title">{{ item.title }}</text>
                <text class="badge-sub">{{ item.sub }}</text>
            </view>
        </view>
        <view class="badge-box box2">
            <view 
                class="badge-item" 
                v-for="item in badges.slice(3, 5)" 
                :key="item.id"
                @click="toggleBadge"
            >
                <image 
                    :src="item.unlocked ? ASSETS[item.iconKey] : ASSETS[item.iconKey + 'Gray']" 
                    mode="aspectFit" 
                    class="badge-image"
                />
                <text class="badge-title">{{ item.title }}</text>
                <text class="badge-sub">{{ item.sub }}</text>
            </view>
        </view>
        <view class="continue" @click="navToContinuePage">
            <text class="continue-text">{{ continueText }}</text>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #73D8FF;
    box-sizing: border-box;
}

.title-box {
    margin-top: 180rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #2D4B5D;
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    text-shadow: 1rpx 1rpx 0 #FFF, -1rpx -1rpx 0 #FFF, 1rpx -1rpx 0 #FFF, -1rpx 1rpx 0 #FFF;

    .title-content {
        display: flex;
        flex-direction: column;
    }

    .title {
        font-size: 60rpx;
        margin-bottom: 20rpx;
        font-weight: 700;
    }

    .badge-count {
        font-size: 28rpx;
        font-weight: 600;
    }

    .badge-display-img {
        width: 258rpx;
        height: 258rpx;
        margin-right: -40rpx;
    }
}

.badge-box {
    width: 100%;
    height: 344rpx;
    border-radius: 24rpx;
    background: linear-gradient(180deg, #D2F2FF 0%, #e4f8ff73 69.08%, #ecfaff00 100%);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 20rpx;
    box-sizing: border-box;

    .badge-item {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        transition: transform 0.2s;

        &:active {
            transform: scale(0.95);
        }

        .badge-image {
            width: 160rpx;
            height: 160rpx;
            margin-bottom: 6rpx;
        }

        .badge-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #2D4B5D;
            margin-bottom: 4rpx;
            text-align: center;
            text-shadow: 1rpx 1rpx 0 #FFF;
        }

        .badge-sub {
            font-size: 22rpx;
            color: #2D4B5D;
            text-align: center;
        }
    }
}

.box1 {
    position: absolute;
    top: 480rpx;
}

.box2 {
    position: absolute;
    top: 760rpx;
}

.continue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 486rpx;
    height: 40rpx;
    padding: 24rpx 0;
    background: #3A9FDC;
    border: 4rpx solid #ffffff99;
    border-radius: 60rpx;
    box-shadow: 0 6rpx 2rpx #529bbda6;
    position: absolute;
    bottom: 124rpx;

    .continue-text {
        color: #ffffffe6;
        font-size: 36rpx;
        font-weight: 600;
    }
}
</style>