<template>
    <div :class="{
        y_tabBarItem:1,
        y_tabBarItem_pet: topic == 'pet',
        y_tabBarItem_petYellow: topic == 'petYellow',
        y_tabBarItem_letterLarge: letterSpace == 'large',
        y_tabBarItem_curernt:isCurrent
        }"
         @click.stop="fnSelect">
        <slot></slot>
    </div>
</template>

<script>
    import Vue from "vue";
    export default {
        name: "yTabBarItem",
        computed:{
            isCurrent(){
                const self = this;
                Vue.nextTick(tick=>{
                    self.fnPostPos();
                })
                return self.yTabBar.currentData == self.name;
            },
            topic(){
                return this.yTabBar.topic || "pet"
            },
            letterSpace(){
                return this.yTabBar.letterSpace || "normal"
            }
        },
        inject:["yTabBar"],
        props:{
            name:""
        },
        methods:{
            fnPostPos(){
                if(this.isCurrent &&　this.yTabBar && this.$el &&  this.yTabBar.fnSetOffset){
                    let left = this.$el.offsetLeft;
                    let width = this.$el.offsetWidth;
                    if(this.topic == 'pet'){
                        left = left - (width*1.125 - width)/2;
                        width = width *1.125;
                    }
                    this.yTabBar.fnSetOffset(left,width);
                }
            },
            fnSelect(){
                if(this.yTabBar){
                    this.yTabBar.currentData = this.name;
                }
            }
        },
        activated(){
            this.fnPostPos();
        },
        mounted() {
            const self = this;
            self.fnPostPos();
            if(self.yTabBar){
                self.yTabBar.$on("update:current",()=>{
                    self.fnPostPos();
                })
            }
        }
    }
</script>

<style lang="scss">
    @import "../../css/var.scss";


    :root,page{
        --yui-yTabBarItem-current-scale:scale(1.125);
        --yui-yTabBarItem-current-color:none;
        --yui-yTabBarItem-current-weight:normal;
        --yui-yTabBarItem-font-size: #{$font_size_t2 - 2px};
    }
    
    .y_tabBarItem{
        white-space: nowrap;
        align-self: center;
        position: relative;
        z-index: 2;

        &.y_tabBarItem_letterLarge{
            margin-right: 18px;
            margin-left: 18px;
        }
    }
    .y_tabBarItem_pet{
        margin-right: 13px;
        margin-left: 13px;
        font-size: var(--yui-yTabBarItem-font-size);
        color:$tabbar_text_color;
        transition: all .15s;
    }
    .y_tabBarItem_curernt{
        transform: var(--yui-yTabBarItem-current-scale);
        color:var(--yui-yTabBarItem-current-color);
        font-weight:var(--yui-yTabBarItem-current-weight);
        /*&:after{
            content:"";
            display: block;
            width: 100%;
            height: 5px;
            background: #fff;
            position: absolute;
            left: 0;
            bottom:-1px;
        }*/
    }
</style>
