<template>
    <v-icon 
        x-small 
        :class="{
            'white--text': issorted,
            'grey--text': ! issorted,
        }" 
        @click="OnClick"
    >
        {{ issortedasc ? 'mdi-sort-ascending' : ( issorteddesc ? 'mdi-sort-descending' : 'mdi-sort') }}
    </v-icon>
</template>

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

        computed: {
            controller() {
                return this.app.classes.Customerregistru;
            },

            sortoptions() {
                return this.controller.sortmenu.sortoptions;
            },

            issorted() {
                return this.sortoptions.column_id == this.column.id;
            },

            issortedasc() {
                return this.issorted && (this.sortoptions.direction == 'asc');
            },

            issorteddesc() {
                return this.issorted && (this.sortoptions.direction == 'desc');
            }
        },

        methods: {
            OnClick() {
                let direction = null;
                if(! this.sortoptions.column_id)
                {
                    direction = 'asc';
                }
                else
                {
                    if(this.sortoptions.direction === 'desc')
                    {
                        direction = 'asc';
                    }
                    else
                    {
                        direction = 'desc';
                    }
                }
                this.sortoptions.direction = direction;
                this.sortoptions.column_id = this.column.id;
                
            }
        },
        
        name: 'HeaderSort',
    }
</script>