<template>
    <v-card
        :color="isDisabled ? 'grey lighten-1' : 'blue darken-2'"
        outlined
        rounded
        :disabled="isDisabled"
    >
        <v-sheet
            color="white"
            class="d-flex align-center justify-space-between pa-2"
        >
            <image-icon 
                :src="app.url + 'imgs/blue-icons/' + card.image + '.png'"
            />
            
            <v-sheet width="100%" class="text-left text-dark-blue text-body-2 font-weight-bold">
                {{ card.caption }} 
            </v-sheet>

            <cs-btn 
                icon="mdi-chevron-right"
                @click="OnClick"
            />
        </v-sheet>

    </v-card>
</template>

<script>
    const Redirect = require('@CsFunc/global/Redirect');

    export default {

        props: {
            app: {required: true},
            customer: {required: true},
            card:  {required: true},
        },


        computed: {
            isDisabled() {
                return this.card.disabled();
            }
        },

        methods: {
            OnClick() { 
                let url = this.app.url + this.card.url + '/' + this.customer.id;
                return Redirect(url);
            }
        },

        components: {
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CustomerProfileCard',   
    }
</script>