<template>
    <tr id="row_ufd_cnx_list_fields_visit_id" obj_val="visit_id" class="field_node" node_type="field_node" :active="active"  @click.ctrl.exact="onCtrlClick" @click.exact='selectItem' @dblclick='itemDoubleClick' >
        <td v-show="hasCheck" style="width: 20px;cursor: pointer;">
            <i id="ico_ufd_cnx_list_fields_visit_id" :class="[ checkItem.checked ? 'fas fa-check' : 'far fa-square' ]" style="font-size: 14px;margin-top: 1px" :checked="checkItem.checked"></i>
        </td>
        <td style="width: 20px;">
            <i :class="this.checkItem.getIco()" data-v-a15d8858="" style="font-size: 14px;"></i>
        </td>
        <td :draggable="draggable" @dragstart="onDrag($event, checkItem)" class="drag-el" style="cursor: pointer;width: 100%;">
            {{checkItem.text}}
        </td>
    </tr>
</template>
<script lang="ts">
import { ColumnItem } from '../../../domain/models/ColumnItem.class';
export default{
    name : 'ColumnItem',
    emits : ['itemDoubleClick', 'changeCheckedItem'],
    props:{
        checkItem : { type : ColumnItem, required : true },
        hasCheck: { type:Boolean, default: true },
        draggable: { type:Boolean, default: false },
    },
    components: {
    },
    data : () => {
        return {
            showDatabaseObjects : false,
            active : false,
            dataTypeIco: '',
        }
    },
    watch:{
        checkItem:{ handler(item){
            
            //if(item.checked == false){
                this.active = item.checked;
                console.log("change checkItem");
            //}
        },
        deep: true
        }
    },
    methods: {
        selectItem(){
            if(this.hasCheck){
                this.checkItem.checked = !this.checkItem.checked;
                this.active = (this.checkItem.checked);
                this.$emit('changeCheckedItem', this.checkItem);
            }
        },
        itemDoubleClick(){
            if(!this.hasCheck){
                this.$emit('itemDoubleClick', this.checkItem.text);
            }
        },
        onDrag(event, column){
            event.dataTransfer.dropEffect = 'move';
            event.dataTransfer.effectAllowed = 'move';
            event.dataTransfer.setData('column', JSON.stringify(column));
        },
        onCtrlClick(){
            this.checkItem.checked = !this.checkItem.checked;
            this.active = !this.active;
            console.log('onCtrlClick', this.checkItem.text);
        }

    },
    async mounted(){
        this.active = (this.checkItem.checked && this.hasCheck);
    },
}
</script>
<style scoped>
td{
    border:0;
}
.drag-el:nth-last-of-type(1){
    margin-bottom: 0;
}
</style>
