<template>
    <view class="home-tab-bar">
        <view class="ul">
            <view class="li" :class="getActive('home')" @click="goto_page({url:'/common/views/pages/home/index'})">
                <view class="icon"><iconfont icon="home-fill" /></view>
                <view class="text">{{translate('home')}}</view>
            </view>
            <view class="li" :class="getActive('message')" @click="goto_page({url:'/common/views/pages/message/index'})">
                <view class="icon"><iconfont icon="message-fill" /></view>
                <view class="text">{{translate('message')}}</view>
            </view>
            <view class="li" :class="getActive('my')" @click="goto_page({url:'/common/views/pages/my/index'})">
                <view class="icon"><iconfont icon="kehu" /></view>
                <view class="text">{{translate('my')}}</view>
            </view>
        </view>
    </view>
  </template>
  
<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import Storage from '@/common/utils/storage/index'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { menusStore } from '@/common/stores/menus'
import { translate } from '@/common/utils/language/index'
import { gotoPage, gotoPageDynamic } from '@/common/utils/router/index'


    
const props = defineProps({
    active: <any>{ default: ''},  
})
const getActive = (e:string) => {
    return props.active == e ? 'active' : ''
}

onBeforeMount(async() => {
    
  /*#ifdef MP-WEIXIN*/
  uni.hideHomeButton();
  /*#endif*/
})
onMounted(()=>{
})
onUnmounted(() => {
})


const goto_page = ({url}:any) => {
    uni.reLaunch({
        url,
    });
}


</script>

<style lang="scss">
.home-tab-bar{
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100vw;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    >.ul{
        height: 80rpx;
        display: flex;
        >.li{
            flex-grow: 1;
            flex: 1;
            color: #666;
            text-align: center;
            padding: 5rpx 0;
            >.icon{
                view{
                    font-size: 50rpx;
                }
            }
            >.text{
                font-size: 20rpx;
            }

            &.active{
                color: $primary-color;
            }
        }
    }
}
</style>
  