<template>
    <img v-if="lazy" v-lazy="currentSrc" alt="" :width="width" :height="height">
    <img v-else ref="image" :src="currentSrc" alt="" :width="width" :height="height">
</template>

<script>
import {getImgUrl} from 'common/utils';

export default {
    name: 'ImgFormat',
    props: {
        src: String,
        w: [Number, String],
        h: [Number, String],
        width: [Number, String],
        height: [Number, String],
        lazy: Boolean,
        mode: {
            type: Number,
            default: 2
        }
    },
    computed: {
        currentSrc() {
            if (this.w > 0 && this.h > 0) {
                return getImgUrl(this.src, this.w, this.h, this.mode);
            }
            return this.src;
        }
    },
    mounted() {
        let timer;
        let img = new Image();
        let maxRetry = 30 * 1000;
        let start = Date.now();

        timer = setInterval(() => {
            img.src = this.$refs.image.src;

            if (!img.src) {
                clearInterval(timer);
            }

            if (img.complete || Date.now() - start > maxRetry) {
                clearInterval(timer);
            }
        }, 3000);
    }
};
</script>

<style>

</style>