<template>
  <!--回到顶按钮-->
    <div :class="showBackTop?'backToTop show':'backToTop'" @click="backToTop" style="opacity: 0.6;">
      <i class="iconfont icon-auro-Topping"></i>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                isRolling:false,
                showBackTop:false,
            }
        },
        props:{
            backPosition:{
                type:Number,
                default:0
            },
            showPosition:{
                type:Number,
                default:100
            },
            el:{
                default:null
            }
        },
        watch:{
            el:{
                handler(){
                    if(this.el){
                        this.el.addEventListener('scroll', this.ishowBackTop);
                    }
                }
            }
        },
        methods:{
            // 回到顶部按钮
            ishowBackTop() {
                if (this.el.scrollTop <= this.showPosition) {
                    this.showBackTop = false
                } else {
                    this.showBackTop = true
                }
            },
            /**点击回到顶部*/
            backToTop() {
                if(!this.isRolling){
                    let distanceY = this.el.scrollTop;
                    let i = 0;
                    this.isRolling=true;
                    this.interval = setInterval(() => {
                        let next = Math.floor(this.easeInOutQuad(10 * i, distanceY, -distanceY, 500))
                        if (next <= this.backPosition) {
                            this.el.scrollTo(0, this.backPosition)
                            clearInterval(this.interval)
                        } else {
                            this.el.scrollTo(0, next)
                        }
                        i++
                    }, 17);
                    setTimeout(()=>{
                        this.isRolling=false;
                    },1000)
                }

            },
            /**
             缓动公式（Tween算法）
             t: 动画已经执行的时间（实际上时执行多少次/帧数）
             b: 起始位置
             c: 终止位置
             d: 从起始位置到终止位置的经过时间（实际上时执行多少次/帧数）
             */
            easeInOutQuad(t, b, c, d) {
                // 判断当前时间是否总在总时间的一半以内，是的话执行缓入函数，否则的话执行缓出函数
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t + b
                } else {
                    // 将总长度设置为一半，并且时间从当前开始递减，对图像进行垂直向上平移
                    return -c / 2 * (--t * (t - 2) - 1) + b
                }
            },
        },
        mounted(){
            if(this.el){
                this.el.addEventListener('scroll', this.ishowBackTop);
            }
        },
        beforeDestroy(){
            if(this.el){
                this.el.removeEventListener('scroll', this.ishowBackTop);
            }
        }
    }
</script>

<style scoped lang="scss">


  .backToTop {
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    position: fixed;
    bottom: 90px;
    right: 30px;
    cursor: pointer;
    z-index: 1030;
    line-height: 32px;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1s;
    &.show{
      opacity: 1;
      transform: translateX(0);
    }
    i{
      color: #fff;
      font-size: 20px;
      display: block;
      margin: 0 auto;
    }
  }



</style>
