<!--
改版内容：
1：去掉petYellow主体
2：增加css变量
-->
<template>
    <div :class="{
            y_tabBar:1,
            y_tabBar_pet:topic == 'pet',
            y_tabBar_letterLarge:letterSpace == 'large',
        }">
        <scroll-view v-if="isWx" class="yTabBar">
            <slot></slot>
        </scroll-view>
        <div ref="body" :class="{y_tabBar_h5:1}" v-else>
            <slot></slot>
            <!--  #ifdef  H5 -->
            <i v-if="lineLeft>-1 && !disLine" class="yTabBar_line" :style="'width:'+lineWidth+'px;left:'+lineLeft+'px;'"></i>
            <!--  #endif -->

        </div>
        </div>
</template>

<script>
    export default {
        name: "yTabBar",
        computed:{

        },
        data(){
            return {
                ast:false,
                currentData:this.current,
                lineWidth:20,
                lineLeft:0,
            }
        },
        methods:{
            fnSetOffset(offset,width){
                const self = this;
                if(!isNaN(offset)){
                    // #ifdef H5
                    let w =this.$el.offsetWidth ;
                    if(!isNaN(w)){
                        let target = offset-w/2;
                        if(target<0){
                            target = 0;
                        }
                        let speed = w / self.speed * 24;
                        let prev = false;
                        let now = self.$refs["body"].scrollLeft;
                        if(target - now <0){
                            speed = 0 - speed;
                        }

                        //设置宽度
                        self.lineWidth = width;
                        self.lineLeft = offset;

                        clearInterval(self.ast)
                        if(self.$refs["body"]) {
                            self.ast = setInterval(time => {
                                let nowLeft = self.$refs["body"].scrollLeft;
                                let left = nowLeft + speed;
                                if (Math.abs(target - nowLeft) < Math.abs(speed)) {
                                    left = target;
                                    clearInterval(self.ast);
                                }
                                self.$refs["body"].scrollLeft = left;

                                if (prev === nowLeft) {
                                    clearInterval(self.ast);
                                }
                                prev = nowLeft;
                            }, 30)
                        }

                    }
                    // #endif
                }
            }
        },
        props:{
            current:"",
            disLine:Boolean,
            isWx:Boolean,
            letterSpace:{
                default:"normal"
            },
            speed:{
                default:500
            },
            topic:{
                default:"pet"
            }
        },
        provide(){
            return {
                yTabBar:this
            }
        },
        watch:{
            current(){
                this.lineLeft = -1;
                this.currentData = this.current;
            },
            currentData(){
                this.$emit("update:current",this.currentData)
            }
        },
        destroyed() {
            clearInterval(this.ast)
        }
    }
</script>

<style lang="scss">
    @import "../../css/var.scss";
    :root,page{
        --yui-yTabBar-align:center;
        --yui-yTabBar-background:#{$color_topic_main};
        --yui-yTabBar-slide-background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,.5));
        --yui-yTabBar-slide-bottom:9px;
        --yui-yTabBar-slide-height:5px;
    }
    .y_tabBar{
        position: relative;
        width: 100%;
        &.y_tabBar_pet{
            background: var(--yui-yTabBar-background);
            display: flex;
            justify-content: var(--yui-yTabBar-align);
            .y_tabBar_h5{
                height: 40px;
                display: flex;
                flex-wrap: nowrap;
                width: fit-content;
                max-width: 100%;
            }
        }

        &.y_tabBar_letterLarge{

        }
        &>y-tab-bar-item{
            height: fit-content;
        }
    }
    .y_tabBar_h5{
        overflow-x:auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;

        &::-webkit-scrollbar {
            display: none;
        }
    }
    .yTabBar_line{
        display: block;
        position: absolute;
        bottom:var(--yui-yTabBar-slide-bottom);
        background: var(--yui-yTabBar-slide-background);
        height: var(--yui-yTabBar-slide-height);
        left:0;
        transition: all .2s;
        z-index: 1;
    }
</style>
