<template>
    <div class="tab-bar-item" @click="itemClick">
        <div v-if="!isActive">
            <slot name="item-icon"></slot>
        </div>
        <div v-else>
            <slot name="item-icon-active"></slot>
        </div>
        <div :style="activeStyle">
            <slot name="item-text"></slot>
        </div>

    </div>
</template>

<script>
export default {
    name: "TabBarItem",
    props: {
        path: String,
        activeColor: {
            type: String,
            default: 'red'
        }
    },
    data() {
        return {
            // isActive:true
        }
    },
    computed: {
        isActive() {
            // 使用严格匹配来确定活动状态
            return this.$route.path === this.path;
        },
        activeStyle() {
            return this.isActive ? { color: this.activeColor } : {};
        }
    },
    watch: {
        // 监听路由变化，确保组件能够更新
        '$route.path'() {
            this.$forceUpdate(); // 强制组件重新渲染
        }
    },
    methods: {
        itemClick() {
            this.$router.replace(this.path)
            
        }
    }

}
</script>

<style>
#tab-bar {
    display: flex;

}

#tab-bar {
   
    border-top: 2px #ccc;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px -1px 1px rgba(100, 100, 100, .2);
}

.tab-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
    height: 55px;
    font-size: 14px;
}

.tab-bar-item img {
    width:30px;
    height:30px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 3px;
}

.active {
    color: red;
}
</style>
