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

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
// 兼容浏览器
import { componentMixin, createComponentName } from '../../utils/base';
import { isSSR } from '../../utils/constant';

if (!isSSR()) {
  require('intersection-observer');
}

let intersectionObservers = {};
const __vue_script__ = {
  name: createComponentName('lazy-image'),
  mixins: [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]) {
      const io = new IntersectionObserver(entries => {
        entries.forEach(e => {
          if (e.intersectionRatio >= e.target.__vue__.ratio) {
            if (e.target.__vue__.time > 0) {
              e.target.__vue__.timer = setTimeout(() => {
                e.target.__vue__.loaded = true;
                io.unobserve(e.target);
              }, e.target.__vue__.time);
            } else {
              e.target.__vue__.loaded = true;
              io.unobserve(e.target);
            }
          } else {
            if (e.target.__vue__.timer) clearTimeout(e.target.__vue__.timer);
          }
        });
      }, {
        threshold: [0, 0.25, 0.5, 0.75, 1]
      });
      intersectionObservers[this.margin] = io;
    }

    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 () {
  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 */

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);