import "./index.css";
import "core-js/modules/web.dom.iterable";

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
import { createComponentName, componentMixin } from '../_utils/component';
import Icon from '../Icon';
import NomoreTemplets from './NomoreTemplets';
const __vue_script__ = {
  name: createComponentName('loadmore'),
  components: {
    Icon
  },
  NomoreTemplets,
  mixins: [componentMixin],
  props: {
    loadmore: {
      type: Function,
      required: true
    },
    autoLoadingTimes: {
      type: Number,
      default: 2
    },
    showNoMore: {
      type: Boolean,
      default: true
    },
    threshold: {
      type: Number,
      default: 0.9
    },
    offset: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      status: '',
      times: 0
    };
  },

  mounted() {
    // 传入fn进来 dom 渲染交给业务  返回promise 来操作页面loading状态
    const onIntersection = observation => {
      observation.forEach(change => {
        if (this.status !== 'loading' && change.intersectionRatio > this.threshold) {
          if (this.times === this.autoLoadingTimes) {
            return;
          }

          this.load();
        }
      });
    };

    this.observer = new IntersectionObserver(onIntersection, {
      threshold: this.threshold,
      rootMargin: `0px 0px ${this.offset}px 0px`
    });
    const bottom = this.$refs.loadmore;
    this.observer.observe(bottom);
  },

  beforeDestroy() {
    if (this.$refs.loadmore && this.observer) {
      this.observer.unobserve(this.$refs.loadmore);
    }
  },

  methods: {
    resetData() {
      // 初始化子组件数据
      this.status = '';
      this.times = 0;
    },

    async reload() {
      await this.load();

      if (this.status !== 'error') {
        this.times = 0;
      }
    },

    async load() {
      this.status = 'loading';

      try {
        const status = await this.loadmore();

        if (status === false) {
          this.status = 'nomore';
        } else {
          this.status = '';
        }

        this.times++;
      } catch (error) {
        this.status = 'error';
      }
    }

  }
};
/* template */

var __vue_render__ = function () {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c("div", {
    class: _vm.bem()
  }, [_vm._t("default"), _vm._v(" "), _c("div", {
    ref: "loadmore"
  }), _vm._v(" "), _vm.status === "nomore" && _vm.showNoMore ? _c("div", [_c("div", {
    class: _vm.bem("nomore")
  }, [_vm._t("nomore", [_vm._v("\n                没有更多了\n            ")])], 2)]) : _vm.status === "error" ? _c("div", {
    class: [_vm.bem("btn"), _vm.bem("error")]
  }, [_vm._t("error", [_vm._v("加载失败，请重试")])], 2) : _vm.times === _vm.autoLoadingTimes ? _vm._t("more", [_c("div", {
    class: _vm.bem("btn"),
    on: {
      click: _vm.reload
    }
  }, [_vm.status === "loading" ? _c("Icon", {
    attrs: {
      name: "loading"
    }
  }) : _vm._e(), _vm._v("\n            加载更多\n        ")], 1)], {
    reload: _vm.reload,
    isLoading: _vm.status === "loading"
  }) : _vm.status === "loading" ? _c("div", {
    class: _vm.bem("loading")
  }, [_vm._t("loading", [_c("span", [_vm._v("玩命加载中...")])])], 2) : _c("div", {
    class: _vm.bem("min-height")
  }), _vm._v(" "), _vm._t("footer")], 2);
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

const __vue_inject_styles__ = undefined;
/* scoped */

const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* component normalizer */

import __vue_normalize__ from '../_utils/vue-normalize-component.js';
/* style inject */

/* style inject SSR */

export default __vue_normalize__({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);