<template>
<div class="card-body" style="padding: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;">
    <div class="table-header table-theme">
        <div class="row">
            <div class="col text">
                <h6>Filters</h6>
            </div>
        </div>
    </div>
    <div class="table-responsive table-bordered field_list_view" style="overflow: auto;height: 240px;border: 1px dashed #d1d3e2;font-size: 12px;" @drop="onDrop($event, filterList)" @dragenter.prevent @dragover.prevent>
        <table class="table table-hover table-sm">
            <tbody id="ufd_definitions_map">
                <ItemFilter v-for="(item, indexItem) of filterList" :key="indexItem" :filter="item" :index="indexItem" @deleteItem="deleteItem" @selectchange="filterChange" @update:value='valueChange' @update:low_value='lowValueChange' @update:hight_value='hightValueChange' ></ItemFilter>
            </tbody>
        </table>
    </div>
</div>

</template>
<script lang="ts">
import ItemFilter from '@/lib-components/component/FilterSql/ItemFilter.vue';
import { Filter } from '../../../domain/models/filterSql/filter';
export default {
    name : 'FilterSql',
    props:{
        title : { type: String, default: '' },
        filterList: []
    },
    components: {
        ItemFilter
    },
    data : () => {
        return {
            isEditing: false,
        }
    },
    methods: {
        onDrop(event, list){
            const itemList = JSON.parse(event.dataTransfer.getData('columnList'));
            if(itemList.length > 0){
                itemList.forEach((item: any) => {
                    let itemFilter: Filter;
                    itemFilter =  new Filter();
                    itemFilter.columnName = item.text;
                    itemFilter.value = '';
                    itemFilter.filter = '';
                    itemFilter.datatype = item.datatype;
                    list.push(itemFilter);
                });
            }else{
                const item = JSON.parse(event.dataTransfer.getData('column'));
                let itemFilter: Filter;
                itemFilter =  new Filter();
                itemFilter.columnName = item.text;
                itemFilter.value = '';
                itemFilter.filter = '';
                itemFilter.datatype = item.datatype;
                list.push(itemFilter);
            }
            this.$emit('updateSelectedList', list);
        },
        deleteItem(index: Number){
            this.filterList.splice(index,1);
            console.log(this.filterList);
        },
        filterChange(value, index){
            this.filterList[index].filter = value;
            this.$emit('filterChange', this.filterList);
        },
        valueChange(value, index){
            this.filterList[index].value = value;
            this.$emit('filterChange', this.filterList);
        },
        lowValueChange(value, index){
            this.filterList[index].low_value = value;
            this.$emit('filterChange', this.filterList);
        },
        hightValueChange(value, index){
            this.filterList[index].higth_value = value;
            this.$emit('filterChange', this.filterList);
        },
    },
    computed:{
        fileListLength(){
            return this.filterList.length;
        }
    },
    watch:{
        fileListLength: function(){
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
            this.$emit('filterChange', this.filterList);
        }
    },
    async mounted(){
    },
}
</script>
<style scoped>
.table-theme {
    background: var(--table-header-background-color);
    color: var(--table-header-color);
}
.table-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-bottom: 0;
    background-color: var(--table-header-background-color);
    border-bottom: 1px solid  var(--table-header-background-color);
    border-radius: calc(0.35rem - 1px) calc(0.35rem - 1px) 0 0;
}
.text{
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.text-check{
    padding-top: 0.25rem;
}
h6{
    margin-bottom: 0px !important;
    font-weight: bold;
    color: var(--table-header-color);
    font-size: 14px;
}
</style>