<template>
    <view class="bottom-custom-wrap relative" style="height: 150rpx;box-sizing: content-box;">
        <!-- <image class="fixed-paly-wrap" :src="themeStore.imageUrl.tabbarBg" mode="aspectFill" /> -->
        <image src="@/static/tabbar/tabbar_bg.png" class="fixed-paly-wrap" mode="aspectFill" />
        <view class="fixed-center-wrap" @click="handleCenterClick">
            <!-- <image :src="themeStore.imageUrl.tabbar3" mode="aspectFill" class="center-img" /> -->
            <!-- <image src="@/static/tabbar/dibuzhuanpan.gif" mode="aspectFill" class="center-img" /> -->
             <view class="center-img">
                <c-lottie src="/static/tabbar/spinz.json" width="134rpx" height="134rpx"></c-lottie>
             </view>
            <text class="center-text color-linear">Get ₹{{ actData?.content?.prizeAmount ?? 200 }}</text>
        </view>
        <view class="tabbar-content">
            <view class="tabbar-bottom-line"></view>
            <view v-for="(item, index) in tabbars" :key="index" class="tabbar-item" @click="change1(index)"
                :style="{ color: index == selected ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textColor }">
                <image v-if="index === selected" class="tabbar-icon" slot="active-icon" :src="item.select"></image>
                <image v-else class="tabbar-icon" slot="inactive-icon" :src="item.normal"></image>
                <view class="tab-text" :class="{ 'color-linear': index === selected }"><text>{{ item.text }}</text></view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { useThemeStore } from '@/store/useThemeStore';
import { useI18n } from 'vue-i18n';
import { usePromoStore } from '@/store/usePromoStore';
import { onMounted, ref } from 'vue';
// import jsonData from '@/static/tabbar/spin.json'
// console.log('jsonData', jsonData);

// const _json = JSON.stringify(jsonData)

defineOptions({
    name: 'custom-tabbar',
})
defineProps({
    selected: {
        type: Number
    }
})
const themeStore = useThemeStore()
const promoStore = usePromoStore()
const { t } = useI18n()
const actData = ref({})
const tabbars = [
    {
        path: '/pages/home/Home',
        text: t('app.tabbar.home'),
        normal: '/static/tabbar/tabbar_1.png',
        select: '/static/tabbar/tabbar_select_1.png'
        // normal: themeStore.imageUrl.tabbar1,
        // select: themeStore.imageUrl.tabbar1Select
    },
    {
        path: '/pages/promo/Promo',
        text: t('app.tabbar.promo'),
        normal: '/static/tabbar/tabbar_2.png',
        select: '/static/tabbar/tabbar_select_2.png'
        // normal: themeStore.imageUrl.tabbar2,
        // select: themeStore.imageUrl.tabbar2Select
    },
    {
        path: '',
        text: '',
        normal: '',
        select: ''
    },
    {
        path: '/pages/earn/Earn',
        text: t('app.tabbar.earnMoney'),
        normal: '/static/tabbar/tabbar_4.png',
        select: '/static/tabbar/tabbar_select_4.png'
        // normal: themeStore.imageUrl.tabbar4,
        // select: themeStore.imageUrl.tabbar4Select
    },
    {
        path: '/pages/account/Account',
        text: t('app.tabbar.account'),
        normal: '/static/tabbar/tabbar_5.png',
        select: '/static/tabbar/tabbar_select_5.png'
        // normal: themeStore.imageUrl.tabbar5,
        // select: themeStore.imageUrl.tabbar5Select
    }
]
const toPage = ref('/pages/activity/Activity')
const change1 = (val) => {
    // 因为在pages中配置了需要跳转的页面为 tabbar页面 
    // 所以不能使用navigateTo 只能使用下面这个方法跳转。
    uni.switchTab({
        url: tabbars[val].path
    })
}
const handleCenterClick = () => {
    uni.navigateTo({
        url: toPage.value
        // url: '/pages/vip/Vip'
    })
}
onMounted(() => {
    if (promoStore.promoList?.length !== 0) {
        const idx = promoStore.promoList.findIndex(item => item.type === 12)
        if (idx !== -1) {
            toPage.value = '/pages/activity/Activity'
            actData.value = promoStore.promoList[idx]
        } else {
            toPage.value = '/pages/vip/Vip'
        }
    } else {
        promoStore.getPromoList().then(() => {
            const idx = promoStore.promoList?.findIndex(item => item.type === 12)
            if(idx!== -1) {
                toPage.value = '/pages/activity/Activity'
                actData.value = promoStore.promoList[idx]
            } else {
                toPage.value = '/pages/vip/Vip'
            }
            
        })
    }

})
</script>

<style lang="scss">
.bottom-custom-wrap {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;

    .fixed-center-wrap {
        position: absolute;
        bottom: 34rpx;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        display: flex;
        flex-direction: column;
        align-items: center;

        .center-text {
            font-weight: bold;
            font-size: 10px;
            line-height: 20rpx;
        }

        .tabbar-bottom-line {
            width: 100%;
            height: 1px;
            background-color: #610606;
            position: absolute;
            left: 0;
            top: 0;
            transform: translateY(0.5);
        }

        .center-img {
            //width: 165rpx;
            //height: 84rpx;
            width: 134rpx;
            height: 134rpx;
        }
    }

    .tabbar-content {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 0;
        top: 30rpx;
        z-index: 99;

        .tabbar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            position: relative;
            bottom: -10rpx;

            .tab-text {
                margin-top: 8rpx;
                font-size: 10px;
                color: #E48989;
                font-weight: 600;
            }
        }
    }


    .tabbar-icon {
        height: 46rpx;
        width: 46rpx;
    }

    .fixed-paly-wrap {
        width: 100%;
        height: 150rpx;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .audio-play-cover {
        height: 100rpx;
        width: 100rpx;
        border-radius: 50rpx;
    }

    .audio-play-btn {
        position: absolute;
        height: 48rpx;
        width: 45rpx;
    }

    .isPlay {
        animation: rotate 6s linear infinite;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

.color-linear {
    background-image: linear-gradient(-90deg, #FFDB12, #FFC300, #942509);
    background-image: -webkit-linear-gradient(-90deg, #FFDB12, #FFC300, #942509);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>