<template>
    <ion-page class="tabs">
        <ion-tabs ref="tab" @ionTabsDidChange="tabChange">
            <ion-router-outlet></ion-router-outlet>
            <ion-tab-bar slot="bottom">
                <ion-tab-button tab="home" href="/home">
                    <ion-icon :icon="activeTab === 'home' ? tabIconHomePre : tabIconHome" />
                    <ion-label>{{ $t('common.home') }}</ion-label>
                </ion-tab-button>

                <ion-tab-button tab="mine" href="/mine">
                    <ion-icon :icon="activeTab === 'mine' ? tabIconMinePre : tabIconMine" />
                    <ion-label>{{ $t('common.mine') }}</ion-label>
                </ion-tab-button>
            </ion-tab-bar>
        </ion-tabs>
    </ion-page>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import tabIconHome from '@/assets/tabbar_icon_home.svg'
import tabIconHomePre from '@/assets/tabbar_icon_home_pre.svg'
import tabIconMine from '@/assets/tabbar_icon_mine.svg'
import tabIconMinePre from '@/assets/tabbar_icon_mine_pre.svg'
export default defineComponent({
    name: 'TabsPage',
    setup() {
        const route = useRoute()
        const activeTab = ref(null)
        if (route.path === '/home') {
            activeTab.value = 'home'
        } else {
            activeTab.value = 'mine'
        }
        const tabChange = tabInfo => {
            if (tabInfo.tab === 'home') {
                activeTab.value = 'home'
            }
            if (tabInfo.tab === 'mine') {
                activeTab.value = 'mine'
            }
        }
        return {
            tabChange,
            activeTab,
            tabIconHome,
            tabIconHomePre,
            tabIconMine,
            tabIconMinePre
        }
    }
})
</script>

<style lang="less" scoped>
ion-tab-bar {
    --background: var(--ion-color-step-0);
    --border: none;
}
ion-tab-button {
    --color: var(--ion-color-step-400);
    --color-selected: var(--ion-color-step-850);
}
ion-icon {
    width: 28px;
    height: 28px;
}
</style>
