<style>
.__cov-progress {
    position: fixed;
    opacity: 1;
    z-index: 999999;
}
</style>
<template>
  <div class="__cov-progress" :style="style"></div>
</template>
<script>
const inBrowser = typeof window !== 'undefined'
export default {
name: 'VueProgress',
    serverCacheKey: () => 'Progress',
computed: {
    style () {
        let location = this.progress.options.location
        let style = {
            'background-color': this.progress.options.canSuccess ? this.progress.options.color : this.progress.options.failedColor,
            'opacity': this.progress.options.show ? 1 : 0
        }
        if (location == 'top' || location == 'bottom') {
            location === 'top' ? style.top = '0px' : style.bottom = '0px'
            if (!this.progress.options.inverse) {
                style.left = '0px'
            } else {
                style.right = '0px'
            }
            style.width = this.progress.percent + '%'
            style.height = this.progress.options.thickness
            style.transition = "width " + this.progress.options.transition.speed + ", opacity " + this.progress.options.transition.opacity
        } else if (location == 'left' || location == 'right') {
            location === 'left' ? style.left = '0px' : style.right = '0px'
            if (!this.progress.options.inverse) {
                style.bottom = '0px'
            } else {
                style.top = '0px'
            }
            style.height = this.progress.percent + '%'
            style.width = this.progress.options.thickness
            style.transition = "height " + this.progress.options.transition.speed + ", opacity " + this.progress.options.transition.opacity
        }
        return style
    },
    progress() {
        if (inBrowser) {
            return window.VueProgressBarEventBus.RADON_LOADING_BAR
        } else {
            return {
                percent: 0,
                options: {
                    canSuccess: true,
                    show: false,
                    color: 'rgb(19, 91, 55)',
                    failedColor: 'red',
                    thickness: '2px',
                    transition: {
                        speed: '0.2s',
                        opacity: '0.6s',
                        termination: 300
                    },
                    location: 'top',
                    autoRevert: true,
                    inverse: false
                }
            }
        }
    }
}
}

</script>