<template>
<tr :active="nodo.selected" class='object_node' node_type="object" @click='selectedNode'>
    <td style="width: 24px;">&nbsp;</td>
    <td style="width: 24px;">&nbsp;</td>
    <td style="width: 24px;">&nbsp;</td>
    <td style="width: 20px;cursor: pointer;"><i class="fa fa-table" style="font-size: 14px"></i></td>
    <td style="cursor: pointer;width: 100%;">{{name}}</td>
</tr>
</template>
<script lang="ts">
import { Connection } from '@/domain/models/connections/Connection';
import { ConnectionService } from '@/domain/services/Connection.service'

export default{
    name : 'Nodo',
    emits : ['getColumns', 'selectedNodo'],
    props:{
        name : '',
        schema : '',
        idConnection : '',
        typeObject : '',
        connection : {} as Connection,
        nodo : {} as any,
    },
    data : () => {
        return {
            connectionService : {} as ConnectionService,
            schemaList : [],
            objects : [],
            showDatabaseObjects : false,
            active : false,
            columnList : [],
        }
    },
    computed:{
        selected(){
            
            return this.nodo.selected;
        }
    },
    methods: {
        selectedNode(){
            this.nodo.selected = true;
            this.$emit("selectedNodo",this.name);
        },
        async getColumns(){
            this.columnList = (await this.connectionService.getColumnNormalizedList(this.idConnection, 'database', this.schema, this.typeObject, this.name)).columns;
            this.$emit("getColumns", this.columnList);
        },
    },
    watch:{
        selected: async function (){
            if(this.nodo.selected){
                await this.getColumns();
            }
        },
    },
    async mounted(){
        this.connectionService = new ConnectionService();
        if(this.nodo.selected){
                await this.getColumns();
        }
    }
}
</script>
<style scoped>
td{
    border:0;
}
</style>
