<template>
    <thead>
        <tr class="blue">
            <th
                v-for="(header, index) in headers"
                :key="'header-' + index"
                :colspan="1 * header.is_group == 1 ? header.children.length : null"
                :rowspan="1 * header.is_group == 0 ? 2 : null"
                :class="{
                    'text-center': true,
                }"
                :style="{
                    'background-color': '#0d1c45',
                    'width': ! header.is_group ? header.width + 'px !important' : null,
                    'max-width': ! header.is_group ? header.width + 'px !important' : null,
                    'min-width': ! header.is_group ? header.width + 'px !important' : null,
                    
                }"
            >
                <span class="text-caption font-weight-medium white--text">
                    {{ header.caption }}
                </span> 
            </th>

            <!-- ultima coloana fake -->
            <th 
                rowspan="2"
                style="max-width:2px !important; min-width:2px !important; width:2px !important;"
            >
            </th>
        </tr>

        <tr>
            <template
                v-for="(header, index) in with_children_columns"                
            >
                <th 
                    v-for="(child, indexChild) in header.children"
                    :key="'child-' + index + '-' + indexChild"
                    :class="{
                        'text-center': true,
                    }"
                    :style="{
                        'background-color': '#0d1c45',
                        'width': child.width + 'px !important',
                        'max-width': child.width + 'px !important',
                        'min-width': child.width + 'px !important',
                        
                    }"
                >
                    <span class="text-caption font-weight-medium white--text">
                        {{ child.caption }}
                    </span> 
                </th>
            </template>
        </tr>

    </thead>
</template>

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

        computed:{
            with_children_columns() {
                let r = _.filter(this.headers, header => {

                    if( _.isArray(header) )
                    {
                        return header.children.length > 0;
                    }
                    return _.keys(header.children).length > 0;
                });
                return r;
            }
        },

        name: 'RegistruTableHeader',
    }
</script>

<style lang="scss" scoped>
    th {
        border: 1px solid #ffffff !important;
        border-collapse: collapse !important;
    }
</style>