<template>
    <view class="tabbar_container">
        <view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
            <view
                class="item-top"
                :class="[
                    item.centerItem ? 'center-item-img ' : '',
                    item.centerItem && currentItem === item.id ? 'rubberBand animated' : '',
                ]"
            >
                <image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
            </view>
            <view class="badge" v-if="item.badge">{{ item.badge }}</view>
            <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
                <text>{{ item.text }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useReadMsg } from '@/stores/useReadMsg';

import useScreenStore from '@/stores/useScreenStore'

const screenStore = useScreenStore()
const {isWideScreen} = screenStore

const props = defineProps({
    currentpage: {
        type: Number,
        required: true,
        default: 0,
    },
});
const readMsg = useReadMsg();
const currentItem = ref(0);
const tabbarList = computed(() => [
    {
        id: 0,
        text: '首页',
        path: '/pages/index/index',
        iconPath: '../../static/tabbar/calendar.png',
        selectedIconPath: '../../static/tabbar/calendared.png',
        centerItem: false,
        badge: readMsg.badges[0].count,
    },
    {
        id: 1,
        text: '招聘会',
        path: '/pages/careerfair/careerfair',
        iconPath: '../../static/tabbar/post.png',
        selectedIconPath: '../../static/tabbar/posted.png',
        centerItem: false,
        badge: readMsg.badges[1].count,
    },
    {
        id: 2,
        text: '',
        path: '/pages/chat/chat',
        iconPath: '../../static/tabbar/logo3.png',
        selectedIconPath: '../../static/tabbar/logo3.png',
        centerItem: true,
        badge: readMsg.badges[2].count,
    },
    {
        id: 3,
        text: '消息',
        path: '/pages/msglog/msglog',
        iconPath: '../../static/tabbar/chat4.png',
        selectedIconPath: '../../static/tabbar/chat4ed.png',
        centerItem: false,
        badge: readMsg.badges[3].count,
    },
    {
        id: 4,
        text: '我的',
        path: '/pages/mine/mine',
        iconPath: '../../static/tabbar/mine.png',
        selectedIconPath: '../../static/tabbar/mined.png',
        centerItem: false,
        badge: readMsg.badges[4].count,
    },
]);

onMounted(() => {
    if(isWideScreen)uni.hideTabBar();
    currentItem.value = props.currentpage;
});

const changeItem = (item) => {
    uni.switchTab({
        url: item.path,
    });
};
</script>

<style lang="scss" scoped>
.badge {
    position: absolute;
    top: 4rpx;
    right: 20rpx;
    min-width: 30rpx;
    height: 30rpx;
    background-color: red;
    color: #fff;
    font-size: 18rpx;
    border-radius: 15rpx;
    text-align: center;
    line-height: 30rpx;
    padding: 0 10rpx;
}
.tabbar_container {
    background-color: #ffffff;
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 5rpx 0;
    overflow: hidden;
    // position: fixed;
    // bottom: 0rpx;
    // left: 0rpx;
    // box-shadow: 0 0 5px #999;
    // padding-bottom: env(safe-area-inset-bottom);
    // z-index: 998;
    .tabbar_item {
        width: 33.33%;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        color: #5e5f60;
        .item-top {
            width: 44.44rpx;
            height: 44.44rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .item-bottom {
            font-weight: 500;
            font-size: 22rpx;
        }
    }
}
.center-item-img {
    // position: absolute;
    // top: 0rpx;
    // left: 50%;
    // transform: translate(-50%, 0);
    width: 108rpx !important;
    height: 98rpx !important;
}
.item-active {
    color: #256bfa;
}
</style>
