"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/web.dom.iterable");

require("./index.css");

var _component = require("../_utils/component");

var _constant = require("../_utils/constant");

var _vueNormalizeComponent = _interopRequireDefault(require("../_utils/vue-normalize-component.js"));

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
// 兼容浏览器
if (!(0, _constant.isSSR)()) {
  require('intersection-observer');
}

var intersectionObservers = {};
var __vue_script__ = {
  name: (0, _component.createComponentName)('lazy-image'),
  mixins: [_component.componentMixin],
  props: {
    // 图片地址
    src: {
      type: String
    },
    // 说明
    alt: {
      type: String
    },
    // 超出多少比例开始加载图片
    ratio: {
      // 可选值 0 / 0.25 / 0.5 / 0.75 / 1
      type: Number,
      default: 0.5
    },
    // 持续时长
    time: {
      type: Number,
      default: 0
    },
    // 计算交叉时添加到根(viewport)边界盒bounding box的矩形偏移量
    margin: {
      type: String,
      default: '0px 0px 0px 0px'
    }
  },

  data() {
    return {
      loaded: false
    };
  },

  computed: {
    img() {
      return this.loaded ? this.src : null;
    }

  },

  mounted() {
    if (this.$isServer) return;

    if (!intersectionObservers[this.margin]) {
      var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
          if (e.intersectionRatio >= e.target.$$lazyImage.ratio) {
            if (e.target.$$lazyImage.time > 0) {
              e.target.$$lazyImage.timer = setTimeout(function () {
                e.target.$$lazyImage.loaded = true;
                io.unobserve(e.target);
              }, e.target.$$lazyImage.time);
            } else {
              e.target.$$lazyImage.loaded = true;
              io.unobserve(e.target);
            }
          } else {
            if (e.target.$$lazyImage.timer) clearTimeout(e.target.$$lazyImage.timer);
          }
        });
      }, {
        threshold: [0, 0.25, 0.5, 0.75, 1]
      });
      intersectionObservers[this.margin] = io;
    }

    this.$el.$$lazyImage = this;
    intersectionObservers[this.margin].observe(this.$el);
  },

  beforeDestroy() {
    if (!this.loaded && !this.$isServer) {
      intersectionObservers[this.margin].unobserve(this.$el);
    }
  },

  methods: {
    onLoad(e) {
      this.$emit('load', e);
    },

    onError(e) {
      this.$emit('error', e);
    }

  }
};
/* template */

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

  var _h = _vm.$createElement;

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

  return _c("img", _vm._g({
    ref: "img",
    class: _vm.bem(),
    attrs: {
      src: _vm.img,
      alt: _vm.alt
    },
    on: {
      load: _vm.onLoad,
      error: _vm.onError
    }
  }, _vm.$listeners));
};

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

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* component normalizer */

/* style inject */

/* style inject SSR */
var _default = (0, _vueNormalizeComponent.default)({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);

exports.default = _default;