
<template>
  <div class="wl_scroll_wrapper">
      <div class="wl_scroll_loading" ref="wl_scroll_loading" :style="{'color':loadingColor}">
        <span class="wl_scroll_iconfont">&#xe6ca;</span> 加载中...</div>
      <div class="wl_scroll_content"  ref="wl_scroll_wrapper" :style="{'overflowX':conf.scrollX ? 'auto' : 'hidden','overflowY':conf.scrollX ? 'hidden' : 'auto'}">
        <slot></slot>
      </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll';
import mixin from '../mixin';
  export default {
    name: mixin.prefix+'scroll',
    props: ['configOption','data','loadingColor'],
    data() {
      return {
        optionDefault: {}
      }
    },
    computed: {
      conf() {
        return Object.assign(this.optionDefault,this.configOption)
      }
    },
    mounted() {
      var sUserAgent = navigator.userAgent.toLowerCase();
      var ios = /iphone|ipad|ipod/.test(sUserAgent);
      this.optionDefault= {
        click:true,
        probeType: 3,
        // listenScroll:true,
        useTransition:!!ios ? false : true,
        pullUpLoad: {
          threshold: 50
        },
        pullDownRefresh: {
          threshold: 50,
          stop:30
        }
      }
      // 保证在DOM渲染完毕后初始化better-scroll
      setTimeout(() => {
        this._initScroll()
      }, 20)
    },
    methods: {
      _initScroll() {
        if (!this.$refs.wl_scroll_wrapper) {
          return
        }
        if(!this.scroll){
           // better-scroll的初始化
           console.log(this.conf)
          this.scroll = new BScroll(this.$refs.wl_scroll_wrapper, this.conf)
        }else{
          // BetterScroll 重新计算
          this.refresh() // dom发生改变会刷新
        }
        this.scroll.on('refresh', (pos) => {
          this.$emit('refresh', pos)
        })
        //上拉加载
        this.scroll.on('pullingDown',()=>{
          this.$refs.wl_scroll_loading.style.top='0'
          setTimeout(() => {
            this.$emit('pullingDown')
            this.scroll.refresh()
            this.scroll.finishPullDown()
            this.$refs.wl_scroll_loading.style.top='-30px'
          }, 1200);
        })
        // 正在滚动
        this.scroll.on('scroll', (pos) => {
          this.$emit('scroll', pos)
        })
        // BetterScroll 启用，开始响应用户交互
        this.scroll.on('enable', (pos) => {
          this.$emit('enable', pos)
        })
        // BetterScroll 禁用，不再响应用户交互
        this.scroll.on('disable', (pos) => {
          this.$emit('disable', pos)
        })
        // 滚动结束，或者让一个正在滚动的 content 强制停止
        this.scroll.on('pullingUp', (pos) => {
          // 滚动到底部
          this.$emit('pullingUp')
          this.scroll.refresh()
          this.scroll.finishPullUp()
        })
        // 滚动取消
        this.scroll.on('scrollCancel', (pos) => {
          this.$emit('scrollCancel', pos)
        })
        // 触发时机：用户手指放在滚动区域的时候
        this.scroll.on('beforeScrollStart', (pos) => {
          this.$emit('beforeScrollStart', pos)
        })
        // content 元素满足滚动条件，即将开始滚动
        this.scroll.on('scrollStart', (pos) => {
          this.$emit('scrollStart', pos)
        })
        // 用户触发轻拂操作
        this.scroll.on('flick', (pos) => {
          this.$emit('flick', pos)
        })
        // BetterScroll 销毁
        this.scroll.on('destroy', (pos) => {
          this.$emit('destroy', pos)
        })
        // 在调用 bs.refresh()，探测到 content DOM 变成了其他元素的时候
        this.scroll.on('contentChanged', (pos) => {
          this.$emit('contentChanged', pos)
        })

      },
      disable() {
        // 代理better-scroll的disable方法
        this.scroll && this.scroll.disable()
      },
      enable() {
        // 代理better-scroll的enable方法
        this.scroll && this.scroll.enable()
      },
      refresh() {
        // 代理better-scroll的refresh方法
        this.scroll && this.scroll.refresh()
      },
      scrollTo() {
        // 代理better-scroll的scrollTo方法
        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
      },
      scrollToElement() {
        // 代理better-scroll的scrollToElement方法
        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
      },
      stop() {
        this.scroll && this.scroll.stop.apply(this.scroll, arguments)
      },
      destroy() {
        this.scroll && this.scroll.destroy.apply(this.scroll, arguments)
      },
      once() {
        this.scroll && this.scroll.once.apply(this.scroll, arguments)
      },
      off() {
        this.scroll && this.scroll.off.apply(this.scroll, arguments)
      },
      on() {
        this.scroll && this.scroll.on.apply(this.scroll, arguments)
      },
    },
    watch: {
      // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
      data() {
        setTimeout(() => {
          this.refresh()
        }, 200)
      }
    }
  }
</script>

<style lang="less" scoped>
.wl_scroll_wrapper{
  width: 100%;
  height: 100%;
  position:relative;
}

.wl_scroll_content{
  width:100%;
  height:100%;
  overflow-x: hidden;
  overflow-y: auto;
  background:#fff;
}
.wl_scroll_loading{
  width:100%;
  text-align:center;
  font-size:14px;
  color:#888;
  height:30px;
  line-height:30px;
  position:absolute;
  top:-30px;
  left:0;
  transition:top 0.3s ;
  overflow: hidden;
}

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('./iconfont.ttf?t=1647504205070') format('truetype');
}

.wl_scroll_iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation:turning 1s linear infinite;
  -webkit-animation:turning 1s linear infinite;
  display:inline-block;
  vertical-align: middle;
  margin-top:-3px
}
@keyframes turning{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes turning{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
</style>