<template>
    <view class="babyclass">
        <!-- 根据展示等级动态显示对应等级页面 -->
        <view v-if="currentLevelName === 'diamond'" class="diamond">
            <image class="diamondbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BG}`"></image>
            <image class="diamondtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.TITLE}`" mode="aspectFit"></image>
            <view class="diamondips">
                <image class="diamondips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS1}`" mode="aspectFit">
                </image>
                <image class="diamondips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS2}`" mode="aspectFit">
                </image>
                <image class="diamondips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS3}`" mode="aspectFit">
                </image>
                <image class="diamondips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS4}`" mode="aspectFit">
                </image>
            </view>
            <image class="diamondbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BTN}`" mode="aspectFit"
                @click="jump('diamond')"></image>
            <image class="diamonddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.DESC}`" mode="aspectFit"></image>
        </view>

        <view v-if="currentLevelName === 'starshine'" class="starshine">
            <image class="starshinebg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BG}`"></image>
            <image class="starshinetitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.TITLE}`" mode="aspectFit">
            </image>
            <view class="starshineips">
                <image class="starshineips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS1}`" mode="aspectFit">
                </image>
                <image class="starshineips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS2}`" mode="aspectFit">
                </image>
                <image class="starshineips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS3}`" mode="aspectFit">
                </image>
                <image class="starshineips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS4}`" mode="aspectFit">
                </image>
            </view>
            <image class="starshinebtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BTN}`" mode="aspectFit"
                @click="jump('starshine')"></image>
            <image class="starshinedesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.DESC}`" mode="aspectFit">
            </image>
        </view>

        <view v-if="currentLevelName === 'starlight'" class="starlight">
            <image class="starlightbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BG}`"></image>
            <image class="starlighttitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.TITLE}`" mode="aspectFit">
            </image>
            <view class="starlightips">
                <image class="starlightips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS1}`" mode="aspectFit">
                </image>
                <image class="starlightips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS2}`" mode="aspectFit">
                </image>
                <image class="starlightips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS3}`" mode="aspectFit">
                </image>
                <image class="starlightips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS4}`" mode="aspectFit">
                </image>
            </view>
            <image class="starlightbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BTN}`" mode="aspectFit"
                @click="jump('starlight')"></image>
            <image class="starlightdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.DESC}`" mode="aspectFit">
            </image>
        </view>

        <view v-if="currentLevelName === 'gold'" class="gold">
            <image class="goldipsbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BG}`"></image>
            <image class="goldipstitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.TITLE}`" mode="aspectFit"></image>
            <view class="goldips">
                <image class="goldips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS1}`" mode="aspectFit"></image>
                <image class="goldips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS2}`" mode="aspectFit"></image>
                <image class="goldips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS3}`" mode="aspectFit"></image>
                <image class="goldips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS4}`" mode="aspectFit"></image>
            </view>
            <image class="goldbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BTN}`" mode="aspectFit"
                @click="jump('gold')"></image>
            <image class="golddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.DESC}`" mode="aspectFit"></image>
        </view>

        <view v-if="currentLevelName === 'platinum'" class="platinum">
            <image class="platinumbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BG}`"></image>
            <image class="platinumtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.TITLE}`" mode="aspectFit">
            </image>
            <view class="platinumips">
                <image class="platinumips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS1}`" mode="aspectFit">
                </image>
                <image class="platinumips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS2}`" mode="aspectFit">
                </image>
                <image class="platinumips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS3}`" mode="aspectFit">
                </image>
                <image class="platinumips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS4}`" mode="aspectFit">
                </image>
            </view>
            <image class="platinumbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BTN}`" mode="aspectFit"
                @click="jump('platinum')"></image>
            <image class="platinumdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.DESC}`" mode="aspectFit"></image>
        </view>

    </view>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { BABY_CLASS_IMAGES } from './babyClassImages.js'
import { computed } from 'vue'

// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl

// 接收用户等级参数
const props = defineProps({
    currentLevel: {
        type: Number,
        required: true,
        validator: (value) => [0, 1, 2, 3, 4].includes(value),
    },
    userLevel: {
        type: Number,
        required: true,
        validator: (value) => [0, 1, 2, 3, 4].includes(value),
    },
})

// 等级映射常量
const LEVEL_MAP = {
    0: 'gold',
    1: 'platinum',
    2: 'diamond',
    3: 'starlight',
    4: 'starshine'
}

// 计算属性：当前展示等级
const currentLevelName = computed(() => LEVEL_MAP[props.currentLevel])

// 计算属性：用户等级名称
const userLevelName = computed(() => LEVEL_MAP[props.userLevel])

// 跳转方法
const jump = (level) => {
    console.log(`跳转到 ${level} 等级页面`)

    // 检查用户等级是否符合要求
    // const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    // const userLevelIndex = levelOrder.indexOf(props.userLevel);
    // const requiredLevelIndex = levelOrder.indexOf(props.currentLevel);

    // if (userLevelIndex < requiredLevelIndex) {
    //     uni.showToast({
    //         title: '等级不够，无法访问',
    //         icon: 'none',
    //         duration: 2000
    //     })
    //     return;
    // }

    // 跳转到 H5 页面，地址暂时默认 https://www.baidu.com
    // 可以根据不同等级跳转到不同的地址
    const url = 'https://member.feihe.com/memberH5/#/courses'

    // 使用 uni.navigateTo 跳转到 webview 页面
    uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
    })
}
</script>

<style lang="less" scoped>
.babyclass {
    width: 655rpx;
    height: 773rpx;
    left: 0rpx;
    top: 0rpx;
    right: 0rpx;
    margin: auto;
    position: relative;

    .diamond {
        width: 635rpx;
        height: 753rpx;
        left: 10rpx;
        top: 10rpx;
        position: absolute;

        .diamondbg {
            width: 655rpx;
            height: 763rpx;
            left: -10rpx;
            top: -10rpx;
            position: absolute;
            opacity: 0.2;
            border-radius: 45rpx;
        }

        .diamondtitle {
            width: 126rpx;
            height: 31rpx;
            left: 8rpx;
            top: 30rpx;
            position: absolute;
        }

        .diamondips {
            width: 610rpx;
            height: 373rpx;
            left: 13rpx;
            top: 96rpx;
            position: absolute;

            .diamondips1 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .diamondips2 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 0rpx;
                position: absolute;
            }

            .diamondips3 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 200rpx;
                position: absolute;
            }

            .diamondips4 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 200rpx;
                position: absolute;
            }
        }

        .diamondbtn {
            width: 442rpx;
            height: 85rpx;
            left: 97rpx;
            top: 513rpx;
            position: absolute;
            
            transition: transform 0.2s ease;

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

        .diamonddesc {
            width: 635rpx;
            height: 92rpx;
            left: 0rpx;
            top: 641rpx;
            position: absolute;
        }
    }

    .starshine {
        width: 635rpx;
        height: 753rpx;
        left: 10rpx;
        top: 10rpx;
        position: absolute;

        .starshinebg {
            width: 655rpx;
            height: 763rpx;
            left: -10rpx;
            top: -10rpx;
            border-radius: 45rpx;
            position: absolute;
            opacity: 0.1;
        }

        .starshinetitle {
            width: 126rpx;
            height: 31rpx;
            left: 8rpx;
            top: 30rpx;
            position: absolute;
        }

        .starshineips {
            width: 610rpx;
            height: 373rpx;
            left: 13rpx;
            top: 96rpx;
            position: absolute;

            .starshineips1 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .starshineips2 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 0rpx;
                position: absolute;
            }

            .starshineips3 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 200rpx;
                position: absolute;
            }

            .starshineips4 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 200rpx;
                position: absolute;
            }
        }

        .starshinebtn {
            width: 442rpx;
            height: 85rpx;
            left: 97rpx;
            top: 513rpx;
            position: absolute;
            
            transition: transform 0.2s ease;

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

        .starshinedesc {
            width: 635rpx;
            height: 92rpx;
            left: 0rpx;
            top: 641rpx;
            position: absolute;
        }
    }

    .starlight {
        width: 635rpx;
        height: 753rpx;
        left: 10rpx;
        top: 10rpx;
        position: absolute;

        .starlightbg {
            width: 655rpx;
            height: 763rpx;
            left: -10rpx;
            top: -10rpx;
            border-radius: 45rpx;
            position: absolute;
            opacity: 0.2;
        }

        .starlighttitle {
            width: 126rpx;
            height: 31rpx;
            left: 8rpx;
            top: 30rpx;
            position: absolute;
        }

        .starlightips {
            width: 610rpx;
            height: 373rpx;
            left: 13rpx;
            top: 96rpx;
            position: absolute;

            .starlightips1 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .starlightips2 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 0rpx;
                position: absolute;
            }

            .starlightips3 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 200rpx;
                position: absolute;
            }

            .starlightips4 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 200rpx;
                position: absolute;
            }
        }

        .starlightbtn {
            width: 442rpx;
            height: 85rpx;
            left: 97rpx;
            top: 513rpx;
            position: absolute;
            
            transition: transform 0.2s ease;

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

        .starlightdesc {
            width: 635rpx;
            height: 92rpx;
            left: 0rpx;
            top: 641rpx;
            position: absolute;
        }
    }

    .gold {
        width: 635rpx;
        height: 753rpx;
        left: 10rpx;
        top: 10rpx;
        position: absolute;

        .goldipsbg {
            width: 655rpx;
            height: 763rpx;
            left: -10rpx;
            top: -10rpx;
            position: absolute;
            border-radius: 45rpx;
            opacity: 0.2;
        }

        .goldipstitle {
            width: 126rpx;
            height: 31rpx;
            left: 8rpx;
            top: 30rpx;
            position: absolute;
        }

        .goldips {
            width: 610rpx;
            height: 373rpx;
            left: 13rpx;
            top: 96rpx;
            position: absolute;

            .goldips1 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .goldips2 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 0rpx;
                position: absolute;
            }

            .goldips3 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 200rpx;
                position: absolute;
            }

            .goldips4 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 200rpx;
                position: absolute;
            }
        }

        .goldbtn {
            width: 442rpx;
            height: 85rpx;
            left: 97rpx;
            top: 513rpx;
            position: absolute;
            
            transition: transform 0.2s ease;

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

        .golddesc {
            width: 634rpx;
            height: 57rpx;
            left: 1rpx;
            top: 641rpx;
            position: absolute;
        }
    }

    .platinum {
        width: 635rpx;
        height: 753rpx;
        left: 10rpx;
        top: 10rpx;
        position: absolute;

        .platinumbg {
            width: 655rpx;
            height: 763rpx;
            left: -10rpx;
            top: -10rpx;
            border-radius: 45rpx;
            position: absolute;
            opacity: 0.2;
        }

        .platinumtitle {
            width: 126rpx;
            height: 31rpx;
            left: 8rpx;
            top: 30rpx;
            position: absolute;
        }

        .platinumips {
            width: 610rpx;
            height: 373rpx;
            left: 13rpx;
            top: 96rpx;
            position: absolute;

            .platinumips1 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;
            }

            .platinumips2 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 0rpx;
                position: absolute;
            }

            .platinumips3 {
                width: 292rpx;
                height: 173rpx;
                left: 0rpx;
                top: 200rpx;
                position: absolute;
            }

            .platinumips4 {
                width: 291rpx;
                height: 173rpx;
                left: 319rpx;
                top: 200rpx;
                position: absolute;
            }
        }

        .platinumbtn {
            width: 442rpx;
            height: 85rpx;
            left: 97rpx;
            top: 513rpx;
            position: absolute;
            
            transition: transform 0.2s ease;

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

        .platinumdesc {
            width: 635rpx;
            height: 92rpx;
            left: 0rpx;
            top: 641rpx;
            position: absolute;
        }
    }

    .default-text {
        width: 635rpx;
        height: 753rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36rpx;
        color: #999;
    }
}
</style>
