<template>
    <div class="filtersearch" data-effect="fadeIn">

        <div class="hpanel hblue">
            <div class="panel-heading hbuilt">

                <div class="panel-tools">
                    <a class="showhide">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
                {{ title }}
            </div>

            <div class="panel-body" style="padding: 5px 0 0 10px">

                <prime-tab-view :class="tabClass" class="filtersearch tab-view">
                    <prime-tab-panel v-for="tabOrder in quantityTab"
                                     :key="tabOrder"
                                     :header="tabName(tabOrder)">

                        <div class="grid" v-for="(row, index) in rows(tabOrder)" :key="index">

                            <template v-for="field in fields(tabOrder, row)" :key="tabOrder + field.id">

                                <div :class="this.classColumn(field.span)">
                                    <label class="filter-condition-value">
                                        {{ field.description }}
                                    </label>

                                    <table>
                                        <tbody>
                                        <tr>
                                            <td>
                                                <prime-dropdown
                                                    v-if="field.showCondition"
                                                    :disabled="field.disabledCondition"
                                                    v-model="field.condition"
                                                    size="sm"
                                                    class="select-condition condition-value"
                                                    :options="field.conditions">

                                                    <template #value="slotProps">
                                                        <div>
                                                            <div>{{ $t('label.'.concat(slotProps.value)) }}</div>
                                                        </div>
                                                    </template>
                                                    <template #option="slotProps">
                                                        <div>
                                                            <div>{{ $t('label.'.concat(slotProps.option)) }}</div>
                                                        </div>
                                                    </template>
                                                </prime-dropdown>
                                            </td>
                                            <td style="width: 100%">
                                                <prime-input-number
                                                    v-if="field.type === 'MONEY'"
                                                    locale="pt-BR"
                                                    :minFractionDigits="2"
                                                    mode="decimal"
                                                    size="12"
                                                    v-model="field.value"/>

                                                <prime-calendar
                                                    v-else-if="field.type === 'DATE'"
                                                    v-model="field.value"
                                                    :showIcon="true"
                                                    :showOnFocus="false"
                                                    size="12"
                                                    dateFormat="dd/mm/yy"
                                                    :locale="pt_BR"/>

                                                <prime-dropdown
                                                    v-else-if="field.type === 'TYPE' || field.type ==='ENUMERATED'"
                                                    class="p-dropdown-type p-inputwrapper-filled"
                                                    v-model="field.value"
                                                    :options="field.itemsCombobox"
                                                    placeholder="Selecione">

                                                    <template #value="slotProps">
                                                        <div>
                                                            <div>{{ $t('label.'.concat(slotProps.value)) }}</div>
                                                        </div>
                                                    </template>
                                                    <template #option="slotProps">
                                                        <div>
                                                            <div>{{ $t('label.'.concat(slotProps.option)) }}</div>
                                                        </div>
                                                    </template>
                                                </prime-dropdown>


                                                <prime-input-text v-else class="p-inputtext-sm" v-model="field.value"/>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>

                                </div>

                            </template>
                        </div>
                    </prime-tab-panel>
                </prime-tab-view>
            </div>

            <div class="panel-footer" style="padding: 5px">
                <table class="ui-panelgrid ui-widget" style="width: 100%;">
                    <tbody>
                    <tr>
                        <td style="text-align: left">
                            <prime-button class="button-action p-button-warning" size="sm" @click="onClear()"
                                          icon="pi pi-undo"
                                          :label="$t('label.clean')">
                            </prime-button>
                        </td>
                        <td style="text-align: right">
                            <!--                            <prime-button class="button-action" variant="primary" size="sm" @click="onSearch()" icon="pi pi-search"-->
                            <!--                                          :label="$t('label.search')">-->
                            <!--                            </prime-button>-->

                            <jarch-button-search class="button-action" @click="onSearch()"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import PrimeTabView from "primevue/tabview"
import PrimeTabPanel from "primevue/tabpanel"
import PrimeCalendar from "primevue/calendar"
import PrimeInputNumber from "primevue/inputnumber"
import PrimeDropdown from "primevue/dropdown"
import PrimeInputText from "primevue/inputtext"
import PrimeButton from "primevue/button";
import JarchButtonSearch from "../form/ButtonSearch"

import $ from 'jquery'

export default {
    name: "FilterSearch",
    // eslint-disable-next-line vue/no-unused-components
    components: {
        PrimeTabView,
        PrimeTabPanel,
        PrimeCalendar,
        PrimeInputNumber,
        PrimeDropdown,
        PrimeInputText,
        PrimeButton,
        JarchButtonSearch
    },
    props: {
        title: {type: String, required: true},
        search: {}
    },
    mounted() {
        // Function for collapse hpanel
        $('.showhide').click(function (event) {
            event.preventDefault();
            const hpanel = $(this).closest('div.hpanel');
            const icon = $(this).find('i:first');
            const body = hpanel.find('div.panel-body');
            const footer = hpanel.find('div.panel-footer');
            body.slideToggle(300);
            footer.slideToggle(200);

            // Toggle icon from up to down
            icon.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
            hpanel.toggleClass('').toggleClass('panel-collapse');
            setTimeout(function () {
                hpanel.resize();
                hpanel.find('[id^=map-]').resize();
            }, 50);
        });
    },

    created() {
    },

    data() {
        return {
            pt_BR: {
                firstDayOfWeek: 1,
                dayNames: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
                dayNamesShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
                dayNamesMin: ["D", "S", "T", "Q", "Q", "S", "S"],
                monthNames: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
                monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                today: 'Hoje',
                clear: 'Limpar',
                weekHeader: 'Sem'
            },
        }
    },
    computed: {
        tabClass() {
            return this.quantityTab && this.quantityTab.length > 1 ? 'multiple-tab' : 'one-tab'
        },
        quantityTab() {
            return this.calculeQuantityTab();
        }
    },
    methods: {
        onClear() {
            this.$emit('onClear', this.search)
        },
        onSearch() {
            this.$emit('onSearch', this.search)
        },
        calculeQuantityTab() {
            if (this.search.filters) {

                const result = Array
                    .from([...new Set(Object.entries(this.search.filters)
                        .filter(f => f[1].visible).map(f => f[1].tabOrder))])
                    .sort()

                if (result < 2) {
                    $('.p-tabview-nav-container').css('display', 'none')
                }

                return result
            }

            return 0
        },
        tabName(tabOrder) {
            if (this.search.filters)
                return this.$t([...new Set(Object.entries(this.search.filters)
                    .filter(f => f[1].visible)
                    .filter(f => f[1].tabOrder === tabOrder)
                    .map(f => f[1].tabName))][0])
        },
        rows(tabOrder) {
            if (this.search.filters)
                return [...new Set(Object
                    .entries(this.search.filters)
                    .filter(f => f[1].visible)
                    .filter(f => f[1].tabOrder === tabOrder)
                    .map(f => f[1].row))]
                    .sort((a, b) => a - b)
        },
        classColumn(span) {
            return 'col-' + span
        },
        fields(tabOrder, row) {
            if (this.search.filters) {
                const filterTab = f => f.tabOrder === tabOrder;
                const filterRow = f => f.row === row;
                return Object
                    .entries(this.search.filters)
                    .flatMap(f => f[1])
                    .filter(f => f.visible)
                    .filter(filterTab)
                    .filter(filterRow)
                    .sort((a, b) => a.column - b.column);
            }
        }
    }
}
</script>

<style lang="scss">

.filtersearch {
    margin: 5px 15px;
    padding: 0;
    font-size: 13px;

    .p-tabview .p-tabview-nav {
        border: none;
    }

    .p-component {
        font-size: 13px;
    }

    .hpanel > .panel-heading {
        color: inherit;
        font-weight: 600;
        padding: 10px 4px;
        transition: all .3s;
        border: 1px solid transparent;
    }

    .hpanel .hbuilt.panel-heading {
        border-bottom: none;
    }

    .form-group.filter-condition.hide-label > label.col-form-label-sm {
        color: #FFFFFF;
    }

    .form-group.filter-condition {
        margin-bottom: 2px !important;
    }

    .form-group.filter-value.hide-label > label.col-form-label-sm {
        color: #FFFFFF;
    }

    .p-tabview .p-tabview-panels {
        border: 0;
        margin: 2px 0 2px 0;
        padding: 2px 5px;
    }

    .panel-tools {
        display: inline-block;
        float: right;
        margin-top: 0;
        padding: 0;
        position: relative;

        a {
            margin-left: 5px;
            color: #9d9fa2;
            cursor: pointer;
        }
    }

    .hpanel.hblue {
        .panel-body {
            border-top: 2px solid #3498db;
        }
    }

    .hpanel {
        .panel-body {
            background: #fff;
            border: 1px solid #e4e5e7;
            border-radius: 2px;
            padding: 20px;
            position: relative;
        }
    }

    .panel-footer {
        padding: 10px 15px;
        /*margin-right: -15px;*/
        background-color: #f5f5f5;
        border-top: 1px solid #ddd;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .button-action {
        min-width: 100px;
        font-size: 1em;
        /*color: #FFF;*/
    }

    button {
        height: 30px;
    }

    .row > div {
        margin-right: 0;
        padding-right: 0;
    }

    .p-inputnumber-input {
        border: 1px solid #ced4da;
        text-align: right;
    }

    .form-group .bv-no-focus-ring select {
        padding: 3px;
        text-align: left;
    }

    .form-group .bv-no-focus-ring select[data-v-d4f4e374]:focus {
        -webkit-box-shadow: 0 0 0 0;
    }

    .custom-select:focus {
        border-color: rgb(118, 118, 118);
    }

    .filter-condition-value div.condition-value {
        display: flex;
    }

    .filter-condition-value div.condition-value .select-condition {
        min-width: 100px;
        max-width: 100px;
    }

    //.filter-condition-value div.condition-value input {
    //    width: 100%;
    //}

    /*.filtersearch .tab-view {*/
    /*    line-height: 0.3 !important;*/
    /*}*/

    button {
        font-size: 1em;
    }

    .custom-select-sm {
        font-size: 13px;
    }

    .p-tabview {
        margin: 0;
    }

    .form-group {
        margin-bottom: 5px;
    }

    .hpanel.panel-collapse > .panel-heading, .hpanel .hbuilt {
        background: #fff;
        border: 1px solid #e4e5e7;
        padding: 10px 10px;
        border-radius: 2px;
    }

    .hpanel.panel-collapse > .panel-heading, .hpanel .hbuilt {
        background: #fff;
        border: 1px solid #e4e5e7;
        padding: 10px 10px;
        border-radius: 2px;
    }

    .p-inputtext, .p-inputtext.p-inputtext-sm {
        font-size: 13px;
        padding: 4px;
        width: 100%;
    }

    .p-dropdown-type {
        width: 100%;
    }

    label {
        font-weight: bold;
    }
}

.p-dropdown-panel .p-dropdown-items-wrapper {
    font-size: 13px !important;
    width: 100% !important;
    line-height: 1.3 !important;
}

</style>
