<template>
  <div class="pullDownRefresh">
    <div>
      {{refreshTxt}}
    </div>
    <div class="pull-continer" ref="pullContiner">
      <slot></slot>
    </div>
  </div>
</template>
<script>
    export default {
        name: "pull-down-refresh",
        data () {
          return {
            refreshTxt:"下拉开始",

          }
        },
        created(){
          //开始下拉
          this.pullstart()
        },
        methods:{
          //判断滚动条是否触底(是否滚动到底部)
          isReachBottom(cb,options) {
              var options = typeof options =="object"?options:{}
              // console.log(options)
              var distance = options.distance?options.distance:40
              var id = options.el?options.el:''
              var element = id?document.querySelector(id):window
              if (!document.querySelector('#loading')){
                  var img = document.createElement('img')
                  img.src = '../images/loading.gif'
                  img.className = 'loading-icon'
                  var div = document.createElement('div')
                  div.className = "loading flex flex_ct"
                  div.id = 'loading'
                  div.append(img)
                  element.append(div)
              }
              element.addEventListener('scroll',function (e) {
                // console.log(e)
                this.elementScrollCallback(cb,e,id,distance)
              })
          },
          //scroll事件回掉函数
          elementScrollCallback(cb,e,id,distance){
              var scrollTop,clientHeight,scrollHeight;
              // var element = id?document.querySelector(id):window
              //页面滚动后，隐藏的页面高度，滚动的距离
              scrollTop = id?document.querySelector(id).scrollTop:null || document.documentElement.scrollTop || document.body.scrollTop
              //页面可见区域高度
              clientHeight = id?document.querySelector(id).clientHeight:null || document.documentElement.clientHeight || document.body.clientHeight
              //获取文档总高度
              var bodyScrollHeight,documentScrollHeight;
              if (document.documentElement){
                documentScrollHeight = id?document.querySelector(id).scrollHeight:null || document.documentElement.scrollHeight
              }
              if (document.body){
                bodyScrollHeight = id?document.querySelector(id).scrollHeight:null || document.body.scrollHeight
              }
              scrollHeight = documentScrollHeight>bodyScrollHeight?documentScrollHeight:bodyScrollHeight
              // console.log('--你滚动了--scrollTop--'+scrollTop)
              // console.log('--可见区域高度--clientHeight--'+clientHeight)
              // console.log('--页面总高度--scrollHeight--'+scrollHeight)
              if (scrollTop+clientHeight >= scrollHeight-distance){
                console.log('----您已经触底了----')
                cb && cb()
              }
          },
          //判断滚动条是否在顶部
          isReachTop(cb,options) {
              var options = typeof options =="object"?options:{}
              var id = options.el?options.el:''
              var element = id?document.querySelector(id):document.documentElement || document.body,scrollTop;
              element.addEventListener('scroll',function () {
                //页面滚动后，隐藏的页面高度，滚动的距离
                scrollTop = id?document.querySelector(id).scrollTop:null || document.documentElement.scrollTop || document.body.scrollTop
                if (scrollTop===0){
                  console.log('----您已经在顶部了----')
                  cb && cb()
                }
              })
          },
          //下拉开始
          pullstart(){
            document.addEventListener('touchstart', e => {
              // console.log(this.$refs.pullContiner)
              this.$refs.pullContiner.style.transition = 'transform 0s'
              this.pstart = true
              // console.log(e.changedTouches[0])
              this.startPosX = e.changedTouches[0].pageX
              this.startPosY = e.changedTouches[0].pageY
              console.log('----开始坐标点----X：'+this.startPosX+'Y：'+this.startPosY)
              if (this.pstart){
                this.pullmove()
              }
            },false)
          },
          //下拉移动
          pullmove(){
            document.addEventListener('touchmove', e => {
              // console.log(e.touches[0])
              this.movePosX = e.changedTouches[0].pageX
              this.movePosY = e.changedTouches[0].pageY
              console.log('----当前移动到的坐标点----X：'+this.movePosX+'Y：'+this.movePosY)
              this.distanceX = this.movePosX - this.startPosX
              this.distanceY = this.movePosY - this.startPosY
              this.distance = this.distanceY -this.distanceX
              //向左滑动
              if (Math.abs(this.distanceX)-Math.abs(this.distanceY)>0&&this.distanceX<0){
                this.direction = 'left'
                // console.log('向左滑动')
              }
              //向上滑动
              if (Math.abs(this.distanceY)-Math.abs(this.distanceX)>0&&this.distanceY<0){
                this.direction = 'top'
                // console.log('向上滑动')
              }
              //向右滑动
              if (Math.abs(this.distanceX)-Math.abs(this.distanceY)>0&&this.distanceX>0){
                this.direction = 'right'
                // console.log('向右滑动')
              }
              //向下滑动或下拉刷新
              if (Math.abs(this.distanceY)-Math.abs(this.distanceX)>0&&this.distanceY>0){
                this.direction = 'bottom'
                console.log()
                this.$refs.pullContiner.style.transition = 'transform:translateY:('+parseInt(this.distanceY)+')'
                // console.log('向下滑动')
              }
              this.pmove = true
              if (this.pmove){
                this.pullend()
              }
            },false)
          },
          //下拉结束
          pullend(){
            document.addEventListener('touchend',e =>{
              // console.log(e.changedTouches[0])
              console.log(this.direction)

            },false)
          },
        }
    }
</script>

<style scoped>
  .pull-continer{
    position: relative;
    /*transition:transfrom 0s;*/
  }
</style>
