<template>
    <view class="vip-wrap">
        <view class="vip-box relative" @click="handleVipClick">
            <theme-image class="vip-bg flex" src="@/static/vip_bg.png" mode="aspectFill"></theme-image>
            <view class="vip-level">
                <text class="vip-level-text">{{ vipInfo.name }}</text>
            </view>
            <theme-image :src="vipInfo?.picUrl" class="vip-icon-level" mode="aspectFit"></theme-image>
            <view class="vip-progress">
                <view class="vip-upgrade-val flex row-center">
                    <text class="vip-upgrade-val-text" v-if="vipInfo.level == userStore.vipInfo.currentVipConfig.level">Continue to deposit
                        <text class="text-color-impt">
                            ₹{{ vipInfo.expLimit - userStore.vipInfo.exp }}</text>
                            to reach {{
                            userStore.vipInfo.nextLevel }}
                    </text>
                    <text class="vip-upgrade-val-text" v-else-if="vipInfo.level > userStore.vipInfo.currentVipConfig.level">Continue to deposit
                        <text class="text-color-impt">
                            ₹{{ vipInfo.expLimit }}</text>
                            to reach {{'VIP' + (vipInfo.level + 1) }}
                    </text>
                </view>
                <view class="vip-progress-bar flex col-center relative">
                    <view class="pregress-real"
                        :style="{ width: remianExp / vipInfo.expLimit * 100 + '%' }"></view>
                    <theme-image src="@/static/shink_affect.png" class="pregress-shink"></theme-image>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { computed } from 'vue';
import { useUserStore } from '@/store/useUserStore';
const userStore = useUserStore();

const props = defineProps({
    vipInfo: {
        type: Object,
        default: () => ({}),
    },
    canNavigate: {
        type: Boolean,
        default: false,
    }
});
const remianExp = computed(() => {
    if (props.vipInfo.level == userStore.vipInfo.currentVipConfig.level) {
        return userStore.vipInfo.exp
    } else if (props.vipInfo.level < userStore.vipInfo.currentVipConfig.level) {
        return props.vipInfo.expLimit
    } else {
        return 0
    }
})
const handleVipClick = () => {
    if (!props.canNavigate) return;
    uni.navigateTo({
        url: "/pages/vip/Vip",
    });
};
</script>
<style lang="scss" scoped>
.vip-wrap {
    width: 100%;

    .vip-bg {
        // width: 692rpx;
        width: 100%;
        height: 244rpx;
    }

    .vip-level {
        position: absolute;
        left: 35rpx;
        top: 35rpx;

        .vip-level-text {
            font-weight: bold;
            font-size: 85rpx;
            line-height: 90rpx;
            // line-height: 96rpx;
            // text-shadow: 0px 2px 0px #FFD98E;
            color: #BC282D;
            background-image: -webkit-linear-gradient(1.95deg, #6B0916, #BC282D);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .vip-icon-level {
        position: absolute;
        top: 0rpx;
        right: 48rpx;
        width: 108rpx;
        height: 108rpx;
    }

    .vip-progress {
        position: absolute;
        left: 35rpx;
        bottom: 30rpx;
        .vip-upgrade-val{
            max-width: 470rpx;
        }
        .vip-upgrade-val-text {
            font-weight: 400;
            font-size: 23rpx;
            color: #7D3906;
            line-height: 27rpx;
            text-align: left;
            font-style: normal;

            .text-color-impt {
                color: #ED0000;
                font-size: 26rpx;
            }
        }

        .vip-progress-bar {
            width: 470rpx;
            height: 12rpx;
            background: #AB6A1F;
            border-radius: 6rpx;
            margin-top: 23rpx;
            padding: 0 1px;

            .pregress-real {
                height: 8rpx;
                border-radius: 6rpx;
                background: linear-gradient(90deg, #FF9304 0%, #FFEF5C 77%, #FFFCDC 98%);
            }

            .pregress-shink {
                width: 65rpx;
                height: 32rpx;
                position: relative;
                left: -30rpx;
            }
        }
    }
}
</style>