<template>
    <tr class="objects_node" id="cnxt_tables_node_" :active="itemObject.selected" node_type="folder" state="collapsed" @click='getObject'>
        <td style="width: 24px; border:0;">&nbsp;</td>
        <td style="width: 24px; border:0;">&nbsp;</td>
        <td style="width: 20px;cursor: pointer; border:0;"><i class="fa fa-folder" style="font-size: 14px"></i></td>
        <td style="cursor: pointer;width: 100%; border:0;">{{name}}</td>
    </tr>
    <tr>
        <td colspan="4" style="padding: 0px;">
            <table>
                <tbody id="cnxt_objects_tables">
                    <nodo v-for="(object, objectIndex) of objects"  :key="objectIndex" :name="object.name" :idConnection="idConnection" :schema="schema" :typeObject='name' @getColumns='getColumns' @selectedNodo='selectedNodo' v-show="itemObject.selected" :nodo='object'></nodo>
                </tbody>
            </table>
        </td>
    </tr>
</template>
<script lang="ts">
import { Connection } from '@/domain/models/connections/Connection';
import { ConnectionService } from '@/domain/services/Connection.service'
import  Nodo  from '@/lib-components/component/ConnectionExplorerComponent/Nodo.vue';

export default{
    name : 'ItemObject',
    emits : ['getColumns', 'selectedItemObject', 'getSource', 'getObject' ],
    props:{
        name : { type: String, default: '' },
        schema : { type: String, default: '' },
        idConnection : { type: String, default: '' },
        connection : { type: Connection, default: null },
        itemObject : {} as any,
        selectedObject : { type: String, default: '' },
        object : { type: String, default: '' },
        selectedSchema : { type: String, default: '' },
        tableName : { type: String, default: '' },
    },
    components: {
        Nodo,
    },
    data : () => {
        return {
            connectionService : {} as ConnectionService,
            schemaList : [],
            objects : [],
            showDatabaseObjects : false,
            active : false,
            columnList : [],
        }
    },
    methods: {
        selectedNodo(name : String){
            for(let indexItem = 0; indexItem < this.objects.length; indexItem++){
                this.objects[indexItem].selected = (this.objects[indexItem].name == name);
            }
            this.$emit("getSource",name);
        },
        selectedItemObject(){
            this.itemObject.selected =  true;
            this.$emit("selectedItemObject",this.name);
        },
        async getObject(){
            this.selectedItemObject();
            if(this.name == 'tables')this.getTables();
            else this.getViews();

        },
        mapObject(objects : []) : any {
            if(objects != null){
                this.objects = objects.map((item : String) : any => ({
                    name : item,
                    selected : (item ==  this.tableName)
                    }));
            }
        },
        async getTables(){
            let objects = (await this.connectionService.getDatabaseTableList(this.idConnection, this.schema)).tables;
            this.mapObject(objects);
        },
        async getViews(){
            let objects = (await this.connectionService.getDatabaseViewList(this.idConnection, this.schema)).views;
            this.mapObject(objects);
        },
        getColumns(columnList : []){
            this.columnList = columnList;
            this.$emit("getColumns", this.columnList);
        },
    },
    async mounted(){
        this.connectionService = new ConnectionService();
        if(this.selectedSchema.selected && this.name == this.object)
        {
            if(this.object == 'tables')this.getTables();
            else this.getViews();
        }
        
    },
}
</script>
<style scoped>
td{
    border:0;
}
</style>
