<template>
    <div :class="{
            y_tabBar:1,
            y_tabBar_pet:topic == 'pet',
            y_tabBar_petYellow:topic == 'petYellow',
            y_tabBar_letterLarge:letterSpace == 'large',
        }" :style="'background:'+bgColor+';'">
        <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:{
            bgColor:"",
            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";
    .y_tabBar{
        position: relative;
        width: 100%;
        &.y_tabBar_pet{
            background: $color_topic_main;
            .y_tabBar_h5{
                height: 40px;
                display: flex;
                flex-wrap: nowrap;
                width: fit-content;
                max-width: 100%;
                margin:0 auto;
            }
        }
        &.y_tabBar_petYellow{
            background: $color_topic_main;
            .y_tabBar_h5{
                height: 40px;
                display: flex;
                flex-wrap: nowrap;
                width: fit-content;
                max-width: 100%;
                margin:0 auto;
            }
            .yTabBar_line{
                background: linear-gradient(-90deg,rgba(254,181,60,1),rgba(254,181,60,.3)) ;
                border-radius: 20px;
            }
        }

        &.y_tabBar_letterLarge{

        }
    }
    .y_tabBar_h5{
        overflow-x:auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
        align-items: center;

        &::-webkit-scrollbar {
            display: none;
        }
    }
    .yTabBar_line{
        display: block;
        position: absolute;
        bottom:9px;
        background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,.5)) ;;
        height: 5px;
        left:0;
        transition: all .2s;
        z-index: 1;
    }
</style>