<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>{{title}}</h6>
                </div>
                <div v-show="selectableAll" class="col text-right text-check">
                    <i  :class="[selectAll ? 'fas fa-check' : 'far fa-square' ]" id="ufd_all" style="color: rgb(255, 255, 255); cursor: pointer;" @click="setCheckAll" active="false">
                    </i>
                    <span class="spinner-border spinner-border-sm align-top" role="status" id="ufd_cnx_list_fields_spn" style="display: none;"></span>
                </div>
            </div>
        </div>
        <div class="table-responsive table-bordered field_list_view" style="overflow: auto;height: 240px;border: 1px dashed #d1d3e2;font-size: 12px;">
            <table class="table table-bordered table-sm" :draggable="draggable" @dragstart="onDrag($event, columnList)">
                <tbody id="ufd_cnx_list_fields">
                    <ColumnItem :draggable="draggable" :hasCheck="hasCheck" v-for="(checkItem, indexItem) of columnList" :key="indexItem" :checkItem='checkItem' @itemDoubleClick='itemDoubleClick' @changeCheckedItem='changeCheckedItem'></ColumnItem>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script lang="ts">
import ColumnItem from '@/lib-components/component/ColumnList/ColumnItem.vue';
export default {
    name : 'ColumnList',
    emits : ['getColumns', 'chkItemDoubleClick'],
    props:{
        title : { type: String, default: '' },
        schemaList : [],
        columnList : [],
        hasCheck: { type: Boolean, default: true },
        draggable: { type:Boolean, default: false },
        selectableAll: { type:Boolean, default: true },
        id: { type: String, default: '' },
        multiple: { type: Boolean, default: true },
    },
    components: {
        ColumnItem
    },
    data : () => {
        return {
            showDatabaseObjects : false,
            active : false,
            selectAll : false,
            isEditing: false,
        }
    },
    watch:{
        columnList:function(){
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        }
    },
    methods: {
        setCheckAll(){
            console.log('setCheckAll');
            this.selectAll = !(this.selectAll);
            for(let indexItem = 0; indexItem < this.columnList.length; indexItem++){
                this.columnList[indexItem].checked = this.selectAll;
            }
            this.$emit('changeCheckedItem');
        },
        changeCheckedItem(value: any){
            if(this.multiple == "false"){
                console.log('changeCheckedItem', this.multiple);
                this.columnList.forEach((item: any) => { 
                    console.log(item.text, value.text);
                    if(item.text != value.text){ 
                        console.log(value);
                        item.checked = false;
                    }
                });
            }
            this.$emit('changeCheckedItem');
        },
        itemDoubleClick(selectedText : String){
            if(!this.hasCheck){
                this.$emit('chkItemDoubleClick', selectedText);
            }
        },
        onDrag(event, columnList){
            console.log('drag');
            event.dataTransfer.dropEffect = 'move';
            event.dataTransfer.effectAllowed = 'move';
            event.dataTransfer.setData('id',this.id);
            event.dataTransfer.setData('columnList', JSON.stringify(columnList.filter((item: any) => item.checked)));
            for(let indexItem = 0; indexItem < this.columnList.length; indexItem++){
                this.columnList[indexItem].checked = false;
            }
            this.selectAll = false;
        },
    },
    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>