<template>
    <thead>
        <tr class="blue">
            <th
                v-for="(header, index) in myheaders"
                :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': 1 * header.is_group == 0 ? header.width + 'px !important' : null,
                    'max-width': 1 * header.is_group == 0 ? header.width + 'px !important' : null,
                    'min-width': 1 * header.is_group == 0 ? header.width + 'px !important' : null,
                    
                }"
            >
                <v-hover v-slot="{hover}">
                    <div class="text-caption font-weight-medium white--text transparent">
                        <v-sheet class="transparent d-flex justify-space-between align-center white--text">
                            <div class="pl-2">
                                {{ __(header.caption) }}
                            </div>
                            <header-sort 
                                v-if="(header.column_type == 'single') && hover"
                                :column="header"
                                :app="app"
                            />
                        </v-sheet>
                        
                        <div v-if="header.type == 'STATUS'" class="transparent">
                            <v-select
                                dense
                                hide-details
                                outlined
                                :items="statusItems"
                                v-model="filteroptions.status"
                                v-if="app.platform != 'b2b'"
                                class="white"
                            >
                                <template #item="{item}">
                                    <span class="text-caption">
                                        {{__(item.text) }}
                                    </span>
                                </template>

                                <template #selection="{item}">
                                    <span class="text-caption">
                                        {{ __(item.text) }}
                                    </span>
                                </template>
                            </v-select>
                        </div>

                        <div v-if="header.type == 'STARE'" class="transparent">
                            <v-select
                                dense
                                hide-details
                                outlined
                                :items="stareItems"
                                v-model="filteroptions.stare"
                                 class="white"
                            >
                                <template #item="{item}">
                                    <span class="text-caption">
                                        {{__(item.text) }}
                                    </span>
                                </template>

                                <template #selection="{item}">
                                    <span class="text-caption">
                                        {{__(item.text)}}
                                    </span>
                                </template>
                            </v-select>
                        </div>

                        <div v-if="header.type == 'DEPARTAMENT'" class="transparent">
                            <v-select
                                dense
                                hide-details
                                outlined
                                :items="departamenteItems"
                                v-model="filteroptions.departament_id"
                                full-width
                                class="white"
                            >
                                <template #item="{item}">
                                    <span class="text-caption">
                                        {{__(item.text)}}
                                    </span>
                                </template>

                                <template #selection="{item}">
                                    <span class="text-caption">
                                        {{__(item.text)}}
                                    </span>
                                </template>
                            </v-select>
                        </div>
                        
                        <v-sheet v-if="header.type == 'NRCRT'" class="transparent ml-2 my-0 mr-0 pa-0" height="24" width="24">
                            <v-checkbox
                                dense
                                hide-details
                                :true-value="1" 
                                :false-value="0"
                                v-model="checkall"
                                class="ma-0 pa-0 white"
                            >
                            </v-checkbox>
                        </v-sheet>
                    </div> 
                </v-hover>
            </th>

            <!-- ultima coloana fake -->
            <th 
                rowspan="2"
                style=""
            >
            </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',
                        
                    }"
                >
                    <v-hover v-slot="{hover}">
                        <v-sheet class="text-caption font-weight-medium transparent white--text d-flex justify-space-between">
                            <div class="pl-2">
                                {{ __(child.caption) }}
                            </div>

                            <header-sort 
                                v-if="hover"
                                :column="child"
                                :app="app"
                            />
                        </v-sheet> 
                    </v-hover>
                </th>
            </template>
        </tr>

    </thead>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            headers: {required: true},
            statusItems: {default: () => [ 
                {
                    text: 'Toate',
                    value: 'all',
                },
                {
                    text: 'Publice',
                    value: 'public',
                },
                {
                    text: 'Nepublice',
                    value: 'protected',
                }

            ]},

            stareItems: {default: () => [ 
                {
                    text: 'Toate',
                    value: 'all',
                },
                {
                    text: 'Aprobate',
                    value: 'approved',
                },
                {
                    text: 'N/A',
                    value: 'na',
                },
                {
                    text: 'Noi',
                    value: 'new',
                },
                
                {
                    text: 'Editate',
                    value: 'editate',
                }

            ]},

            departamenteaccesibile: {default: () => []},
            allow_upload_row_files: {default: true},
        },

        computed:{
            myheaders() {
                let r = [...this.headers];

                if(this.app.platform == 'b2b')
                {
                    r = _.filter(r, item => item.type != 'STATUS')
                }

                return r;
            },

            checkall: {
                get: function() {
                    let l1 = this.controller.activeRegistru.rows.length;
                    let l2 = this.controller.selectedrows.length;

                    return l1 == l2 ? 1 : 0;
                },

                set: function(checkall) {
                    if(checkall)
                    {
                        this.controller.selectedrows = _.map(this.controller.activeRegistru.rows, item => 1 * item.id);
                    }
                    else
                    {
                        this.controller.selectedrows = [];
                    }
                }
            },

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

            filteroptions() {
                return this.app.classes.Customerregistru.filtermenu.filteroptions;
            },

            departamenteItems() {
                if(this.$user.role.id != 5)
                {
                    return [
                        {
                            text: 'Toate',
                            value: 'all',
                        },
                        ...this.app.dataSession.Departamente.selectorItems,
                    ];
                }
                let r = [
                    {
                        text: 'Toate',
                        value: 'all',
                    },
                ];

                _.each(this.departamenteaccesibile, id => {
                    let departament = _.find(this.app.dataSession.Departamente.selectorItems, item => item.value == id);
                    r.push(departament);
                })
                return r;
            },

            with_children_columns() {
                let r = _.filter(this.myheaders, header => {

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

        name: 'CustomerRegisterTableHeader',
    }
</script>

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