<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:{
        link: String,
        activeColor:{
            type: String,
        }
    },
    data(){
        return{
        }
    },
    computed:{
        isActive(){
            // 当前活跃路由路径跟传过来的是否一致
            // 一致返回true
            return this.$route.path.includes(this.link);
        },
        activeStyle(){
            return this.isActive ? {color: this.activeColor} : {};
        }
    },
    methods:{
        itemClick(){
            // 当前活跃路由路径跟传过来的不一致时才进行路由跳转
            if(this.$route.path != this.link){
                this.$router.push(this.link);
            }
        }
    }
}
</script>

<style scoped>
    .tab-bar-item{
        height: 49px;
        font-size: 14px;
        flex: 1;
        text-align: center;
    }
    .tab-bar-item img{
        margin-top: 3px;
        vertical-align: middle;
        margin-bottom: 2px;
    }

    .icon{
      font-size: 30px;
    }
</style>