<template>
    <ion-page class="tabs">
        <ion-tabs @ionTabsDidChange="tabChange">
            <ion-router-outlet></ion-router-outlet>
            <ion-tab-bar slot="bottom" translucent>
                <ion-tab-button tab="home" href="/home">
                    <img class="tab-icon1" :src="activeTab === 'home' ? homeImgPre : homeImg" />
                    <ion-label>{{ $t('tab.home') }}</ion-label>
                </ion-tab-button>
                <ion-tab-button tab="watching" href="/watching">
                    <img class="tab-icon1" :src="activeTab === 'watching' ? videoImgPre : videoImg" />
                    <ion-label>{{ $t('tab.watching') }}</ion-label>
                </ion-tab-button>
                <ion-tab-button tab="mine" href="/mine">
                    <img class="tab-icon1" :src="activeTab === 'mine' ? mineImgPre : mineImg" />
                    <ion-label>{{ $t('tab.mine') }}</ion-label>
                </ion-tab-button>
            </ion-tab-bar>
        </ion-tabs>
    </ion-page>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useIonRouter } from '@ionic/vue'
import homeImg from '@/assets/tabbar_icon_01.png'
import homeImgPre from '@/assets/tabbar_icon_01_pre.png'
import videoImg from '@/assets/tabbar_icon_02.png'
import videoImgPre from '@/assets/tabbar_icon_02_pre.png'
import mineImg from '@/assets/tabbar_icon_03.png'
import mineImgPre from '@/assets/tabbar_icon_03_pre.png'

import '@/styles/animate.css'

const route = useRoute()
const router = useIonRouter()
const activeTab = ref(null)
if (route.path === '/home') {
    activeTab.value = 'home'
} else if (route.path == '/BLF') {
    activeTab.value = 'BLF'
} else if (route.path == '/rank') {
    activeTab.value = 'rank'
} else if (route.path == '/distribution1') {
    activeTab.value = 'distribution'
} else {
    activeTab.value = 'mine'
}
const tabChange = tabInfo => {
    if (tabInfo.tab === 'home') {
        activeTab.value = 'home'
    }
    if (tabInfo.tab === 'BLF') {
        activeTab.value = 'BLF'
    }
    if (tabInfo.tab === 'rank') {
        activeTab.value = 'rank'
    }
    if (tabInfo.tab === 'distribution') {
        activeTab.value = 'distribution'
    }

    if (tabInfo.tab === 'mine') {
        activeTab.value = 'mine'
    }
}
function goRank() {
    router.replace({ name: 'rank' })
    activeTab.value = 'rank'
}
</script>

<style lang="less" scoped>
ion-tab-bar {
    --border: none;
    // --background: rgba(28, 28, 28, 0.6);
}
ion-tab-button {
    --color: var(--ion-color-step-400);
    --color-selected: #fff;
    ion-label {
        font-size: 10px;
    }
}
// .bigTab {
//     height: 60px;
//     transform: translateY(-5px);
// }
ion-icon {
    width: 28px;
    height: 28px;
}
.tab-icon {
    width: 56px;
    height: 49px;
}
.tab-icon1 {
    width: 24px;
    height: 24px;
}
// :deep(.tab-selected) {
//     ion-label {
//         color: var(--color-selected);
//         background: linear-gradient(140deg, #fb35ff 0%, #ffcc3d 100%);
//         -webkit-background-clip: text;
//         -webkit-text-fill-color: transparent;
//     }
// }
.btn-float {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: calc(var(--ion-safe-area-bottom, 0px) + 15px);
    width: 56px;
    display: block;
    z-index: 100;
}
</style>
