'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

require('./index.less');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var SnImage = {
    name: 'SnImage',

    props: {
        src: String,
        fit: {
            type: String,
            validator: function validator(value) {
                return ['', 'fill', 'contain', 'cover', 'none', 'scale-down'].indexOf(value) > -1;
            }
        },
        position: {
            type: String,
            validator: function validator(value) {
                return ['', 'center', 'top', 'bottom'].indexOf(value) > -1;
            }
        },
        alt: String,
        lazy: Boolean
    },

    data: function data() {
        return {
            loading: true,
            error: false
        };
    },


    watch: {
        src: function src() {
            if (this.lazy) {
                this.lazyObserver();
            } else {
                this.loadImage();
            }
        }
    },

    mounted: function mounted() {
        if (this.lazy) {
            this.lazyObserver();
        } else {
            this.loadImage();
        }
    },


    methods: {
        /**
         * 本地加载图片
         */
        loadImage: function loadImage() {
            var _this = this;

            this.loading = true;
            this.error = false;

            var img = new Image();
            img.src = this.src;
            img.onload = function (e) {
                return _this.onLoad(e, img);
            };
            img.onerror = function (e) {
                return _this.onError(e);
            };
        },


        /**
         * 懒加载监听
         */
        lazyObserver: function lazyObserver() {
            var _this2 = this;

            // 创建一个监听器
            var observer = new IntersectionObserver(function (_ref) {
                var _ref2 = (0, _slicedToArray3['default'])(_ref, 1),
                    entry = _ref2[0];

                if (entry.isIntersecting) {
                    observer.unobserve(entry.target);
                    observer.disconnect();

                    _this2.loadImage();
                }
            });
            observer.observe(this.$el);
        },


        /**
         * 加载完成
         */
        onLoad: function onLoad(e) {
            this.loading = false;
            this.error = false;

            this.$emit('load', e);
        },


        /**
         * 加载失败
         */
        onError: function onError(e) {
            this.loading = false;
            this.error = true;

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

    render: function render() {
        var h = arguments[0];
        var src = this.src,
            fit = this.fit,
            position = this.position,
            alt = this.alt,
            loading = this.loading,
            error = this.error,
            $slots = this.$slots;


        var renderPlaceholder = loading && ($slots['placeholder'] ? $slots['placeholder'] : h('div', { 'class': 'sn-image-placeholder' }));

        var renderError = error && ($slots['error'] ? $slots['error'] : h('div', { 'class': 'sn-image-error' }));

        var renderImg = !loading && !error && h('img', {
            attrs: {
                src: src,
                alt: alt
            },
            'class': 'sn-image-img',
            style: {
                'object-fit': fit,
                'object-position': position
            }
        });

        return h(
            'div',
            { 'class': 'sn-image' },
            [renderPlaceholder, renderError, renderImg]
        );
    }
};

SnImage.install = function (Vue) {
    Vue.component(SnImage.name, SnImage);
};

exports['default'] = SnImage;
module.exports = exports.default;