<template>
    <tr id="row_ufd_cnx_list_fields_visit_id" obj_val="visit_id" class="field_node" node_type="field_node" :active="checkItem.checked && hasCheck"  @click='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="cursor: pointer;width: 100%;" @dragstart="onDrag($event, item)" >{{checkItem.text}}</td>
    </tr>
</template>
<script lang="ts">
import { ColumnItem } from '../../../domain/models/ColumnItem.class';
export default{
    name : 'CheckBoxItem',
    emits : ['itemDoubleClick'],
    props:{
        checkItem : { type : ColumnItem, required : true },
        hasCheck: { type:Boolean, default: true }
    },
    components: {
    },
    data : () => {
        return {
            showDatabaseObjects : false,
            active : false,
        }
    },
    methods: {
        selectItem(){
            this.checkItem.checked = !this.checkItem.checked;
        },
        itemDoubleClick(){
            if(!this.hasCheck){
                this.$emit('itemDoubleClick', this.checkItem.text);
            }
        }

    },
    async mounted(){
    },
}
</script>
<style scoped>
td{
    border:0;
}
</style>