<template>
    <thead>
        <tr>
            <cs-header-cell 
                v-for="(header, index) in headers"
                :key="'header-' + index"
                :header="header"
                :sort="columnSort(header)"
                @click:sortcolumn="$emit('click:sortcolumn', $event)"
            />
        </tr>
    </thead>
</template>

<script>
    export default {
        props: {
            headers: {required: true},
            sort: {default: () => []},
        },

        methods: {
            columnSort(header) {

                let r = null;

                for(let i = 0; i < this.sort.length; i++)
                {
                    if(this.sort[i].field == header.value)
                    {
                        r = {
                            index: i + 1,
                            item: this.sort[i],
                        }
                    }
                }

                return r;
            }
        },

        components: {
            CsHeaderCell: require('./cell/CsHeaderCell').default,
        },

        name: 'CsDatatableHeader',
    }
</script>