<template>
    <div class="footer_nav">
        <van-tabbar class="footer-bar" v-model="data.footerActive" :route="true" safe-area-inset-bottom @change="onTabChange">
            <van-tabbar-item name="Home" replace icon="wap-home" to="/enterprise/enterpriseHome">{{
                    $t("common.lang_home")
                }}</van-tabbar-item>
           <!-- <van-tabbar-item name="Classify" replace icon="bell" to="/enterprise/lawQuery">
                法律查询
            </van-tabbar-item> -->
           <van-tabbar-item name="Classify" replace icon="notes-o" to="">
                法律查询
            </van-tabbar-item>
            <van-tabbar-item name="Classify" push to="/enterprise/nos">
                <template #icon>
                    <img src="@/assets/images/nos/off_site_bottom_icon.png" class="nos-icon" alt="" />
                </template>
                <template #icon-active>
                    <img src="@/assets/images/nos/off_site_bottom_icon.png" class="nos-icon nos-icon-active" alt="" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="Classify" replace icon="bell" to="/enterprise/messageCenter" :badge="useCommon.unreadMessageCount > 0 ? useCommon.unreadMessageCount : undefined">
                消息
            </van-tabbar-item>
            <van-tabbar-item name="My" replace icon="manager" to="/enterprise/myPage">
                我的
            </van-tabbar-item>
            <!-- <van-tabbar-item name="My" replace icon="manager-o" to="">{{
                $t("common.lang_my")
            }}</van-tabbar-item> -->
        </van-tabbar>
    </div>
</template>

<script setup name="footerNav">
import { getMessageUnreadCount } from '@/api/enterprise';

const { useCommon } = $globalStore

let data = reactive({
    footerActive: "Home",
    dot: false,
});

// ========== tabbar切换时调用消息数量接口 ==========
const onTabChange = (name) => {
    fetchMessageUnreadCount();
};

// ========== 获取消息未读数量 ==========
const fetchMessageUnreadCount = () => {
    getMessageUnreadCount({ enterpriseNumber: useCommon.enterpriseNumber}, (res) => {
        if (res && res.code === 200 && res.data) {
            const totalCount = Number(res.data.totalCount) || 0;
            useCommon.SET_UNREAD_MESSAGE_COUNT(totalCount);
        }
    }, () => {
        // 接口调用失败不处理
    });
};

</script>
<style lang="less" scoped>
.footer_body{
    // height: 1.5rem; 
}
.footer_nav{
      background: url(~@/assets/images/nos/tab_bar_bg.png) no-repeat center top;
    background-size: 100% auto;
    height: 86px;
    .footer-bar{
        position: absolute;
        bottom: 0.2rem;
    }
}

.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after {
    border: 0;
}

:deep(.van-tabbar-item) {
    color: #bbb;
}

:deep(.van-tabbar-item--active) {
    color: #1989fa;
}

.nos-icon {
    width: 86px;
    height: 86px;
}

.nos-icon-active {
    opacity: 1;
}
</style>
