<script>
import { extend } from 'nimble-lib';
import WidgetTmp from '../../_comm/WidgetTmp';
import vueUse from '../../../../_commons/helpers/vueUse';
import lazyOffset from '../../../../Directives/lazyOffset';

export default {
    extends: WidgetTmp,
    props: {
        /**
         * 图片url
         */
        imgUrl: {
            type: String
        },
        /**
         * 懒加载参数
         */
        lazyOptions: {
            type: Object
        },
        /**
         * 是否需要lazy
         */
        isLazy: {
            type: Boolean,
            default: true
        },
        // 纵横比
        aspect: {
            type: [String, Number]
        }
    },
    computed: {
        /**
         * 设置懒加载的参数
         * @returns {Object} 懒加载的参数
         */
        myLazyOptions () {
            const _that = this;
            let res = extend(false, {
                isWrap: !_that.aspect
            }, _that.lazyOptions, {
                src: _that.imgUrl
            });
            if (res && res.loading) {
                let _loading = res.loading;
                res.loading = function(evt) {
                    try {
                        _loading.call(res, evt);
                    } catch (error) {}
                    _that.$emit('imgLoading', evt);
                };
            } else {
                res.loading = function(evt) {
                    _that.$emit('imgLoading', evt);
                };
            }
            return res;
        }
    },
    beforeCreate() {
        vueUse(this.constructor, lazyOffset);
    }
};
</script>
<style lang="scss">
.nu_img-wrap{
    width: 100%;
    height: 100%;
}
</style>
