<template>
  <div
    style="overflow-y: auto;overflow-x: hidden;"
    :style="style"
    ref="panel"
    :id="id"
  >
    <slot></slot>
    <load-more :show-loading="loading" :tip="statusText" v-if="showLoading"></load-more>
  </div>
</template>

<script>
  import {loadJquery} from "../math/load";
  import {Global} from "../math/global";
  import {LoadMore} from 'vux';

  export default {
    name: "rollingLoad",
    components: {LoadMore},
    props: {
      /**
       * div模式下 滚动区域高度
       */
      height: {
        type: Number,
        default: 400
      },
      /**
       * 是否启用窗口模式
       */
      isWindow: {
        type: Boolean,
        default: false
      },
      /**
       * 是否正在加载中
       */
      loading: {
        type: Boolean,
        default: false
      },
      /**
       * 加载状态文本
       */
      statusText: {
        type: String,
        default: ''
      },
      /**
       * 是否显示加载状态
       */
      showLoading: {
        type: Boolean,
        default: true
      },
      /**
       * 是否自动启动滚动加载
       */
      autoStart: {
        type: Boolean,
        default: true

      }
    },
    data() {
      return {
        id: 'rollingLoad' + Global.newId(),
        $div: undefined,
        $win: undefined,
        $body: undefined,
        winHeight: 0,
        isStart: false,     // 是否启动状态
        wait: false
      }
    },
    mounted() {
      loadJquery().then($ => {
        if (this.isWindow) {
          this.$win = $(window);
          this.$body = $(document.body);
          this.winHeight = this.$win.height();
        } else {
          this.$div = $('#' + this.id);
        }
        if (this.autoStart) {
          this.start();
        }
      });
    },
    methods: {
      stop() {
        if (this.isWindow) {
          this.$win && this.$win.unbind();
        } else {
          this.$div && this.$div.unbind();
        }
        this.isStart = false;
      },
      start() {
        if (this.isStart) {
          return;
        }

        this.isStart = true;
        const vm = this;
        if (this.isWindow) {
          this.$win.scroll(() => {
            this.winWatch();
          });
        } else {
          this.$div.scroll(function () {
            const nScrollTop = this.scrollTop;//滚动条距顶部的高度
            const nDivHeight = vm.$div.outerHeight();//可见区域的高度
            const nScrollHeight = this.scrollHeight;//为整个UL的高度（包括屏幕外的高度）

            if (nScrollTop + nDivHeight + 20 >= nScrollHeight) {
              vm.next();
            }
          });
        }
      },
      winWatch() {
        const pageH = this.$body.height();
        const scrollT = this.$win.scrollTop();
        const aa = (pageH - this.winHeight - scrollT) / this.winHeight;
        if (aa < 0.02) {
          this.next();
        }
      },
      next() {
        //延迟触发加载
        if (this.wait) {
          return;
        }
        this.wait = true;
        this.$emit('on-next');
        setTimeout(() => {
          this.wait = false;
        }, 500);
      }
    },

    computed: {
      style() {
        if (this.isWindow) {
          return {}
        } else {
          return {
            height: this.height + 'px'
          }
        }
      }
    },

    destroyed() {
      if (this.isWindow) {
        this.$win && this.$win.unbind();
      } else {
        this.$div && this.$div.unbind();
      }
    },
  }
</script>

<style scoped>
</style>
