<template>
    <v-img 
        v-if="customer.mylogo"
        :src="customer.mylogo"
        height="32"
        contain
        :width="logoWidth"
        position="left center"
        @contextmenu="ShowStatusForm"
    >
    </v-img>
</template>

<script>
    export default {
        props: {
            customer: {required: true},
            app: {required: true},
            form: {required: true},
        },

        computed: {
            logoWidth() {
                if(this.customer.mylogo)
                {
                    if(_.has(this.customer.logo, 'width'))
                    {
                        return  32 * this.customer.logo.width/this.customer.logo.height;
                    }

                    if(_.has(this.customer.logo, 'file_width'))
                    {
                        return  32 * this.customer.logo.file_width/this.customer.logo.file_width;
                    }
                }
                return 32;
            }
           
        },

        methods: {
            ShowStatusForm(e) {
                if(this.form)
                {
                    e.preventDefault();

                    this.form.formprovider
                        .Reset()
                        .SetAction('update')
                        .SetActiveRecord({...this.customer});
                    
                    this.form.visible = false
                    this.form.left = e.clientX
                    this.form.top = e.clientY
                    
                    this.$nextTick(() => {
                        this.form.visible = true
                    })
                }
            }
        },
        
        name: 'CustomerLogo',
    }
</script>