<template>
    <b-img
        :id=id
        class="appup-image"
        :src=src
        :alt=alt
        :height=height
        :width=width
        :left=imgAlignmentLeft
        :right=imgAlignmentRight
        :center=imgAlignmentCenter
        :rounded=imgType
        :thumbnail=thumbnail
        @click="onImageClick" 
        :fluidGrow=imgAutoResize
        />
        
</template>
<script>
    import _ from 'lodash';
    
    /**
     * Appup Image
    */
    export default {
        name: 'appup-image',
        components: { 
             
        },
        props: {
            /**
             * Id of Image elements.
             */
            id: {
                type: String,
                required: false
            },

            /**
             * src attribute for image
             */
            src: {
                type: String,
                required: true
            },
            /**
             * alt attribute for image
             */
            alt: {
                type: String,
                default:"",
                required: false
            },
            /**
             * Height of the image
             */
            height: {
                type: Number,
                required: true
            },
            /** 
             * Width of the image
             */
            width: {
                type: Number,
                required: true
            },
             
            /** 
             * alignment of image
             * 
             * 'left','center','right'
             */
            align: {
                type: String,
                default: null,
                required: false
            },
            
            /** 
             * Image type is circle,square,rounded
             */
            type: {
                type: String,
                default: null,
                required: false
            },    
            /**
             * Image full width
             *
             */    
            autoresize: {
                type: Boolean,
                default: null
            },  
            /**
             * Image is thumbnail or not
             */
            thumbnail: {
                type: Boolean,
                default: null
            },                    
        },
        data: function() {
            return {
                imgAlignmentLeft: this.align == 'left',
                imgAlignmentCenter: this.align == 'center',
                imgAlignmentRight: this.align == 'right',
                imgAutoResize : this.autoresize,
                imgType
                    : this.type =='rounded' ? 'rounded' 
                    : this.type =='circle' ? 'circle' 
                    : this.type =='square' ? 'square' 
                    :'',                                      
               }
        },
        computed: {
            
        },
        methods: {
           onImageClick: function() {
                this.$emit('click');
            }
        },          
    };
</script>
