<template>
    <div class="card">
        <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>Properties</h6>
                    </div>
                    <div class="col text-right text-check"><span class="spinner-border spinner-border-sm align-top" role="status" id="ufd_cnx_tree_view_spn" v-show="showSpinner=='true'"></span></div>
                </div>
            </div>
            <div  style="overflow: auto;height: 240px;border: 1px dashed #d1d3e2;font-size: 12px;">
                <table class="table" :draggable="draggable" @dragstart="onDrag($event, columnList)">
                    <tbody id="ufd_cnx_list_fields">
                        <tr v-for="(property, index) in propertyList" :key="index"  @drop="onDrop($event, property)" @dragenter.prevent @dragover.prevent>
                            <td>
                                <InputForm :value='property.field' placeholder='field name' readonly="true" style="background: #ffffff00"></InputForm>
                            </td>
                            <td>
                                <InputForm :value='property.name' placeholder='property' readonly="true" style="background: #ffffff00"></InputForm>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import InputForm from '@/lib-components/component/InputForm.vue';
export default {
    name: 'PropertyList',
    components:{
        InputForm
    },
    props: {
        propertyList: [],
        id: { type: String, default: '' },
    },
    mounted(){
    },
    methods:{
        onDrop(event, property){
            const id = event.dataTransfer.getData('id');
            if(id == this.id){
                const item = JSON.parse(event.dataTransfer.getData('column'));
                property.field = item.text;
            }
        },
    }
}
</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>