<template>
    <td style="width: 20px;">
        <i class="fa fa-times-circle invisible" title="Column must have a name" id="error_icon" style="color: #946464;"></i>
    </td>
    <td class="text-center align-middle">
        <input type="checkbox" v-model="entry.selected" />
    </td>
    <td class="text-center align-middle" id="col_num" attribute="col_ord" style="font-size: 12px;">
        {{entry.col_ord}}
    </td>
    <td class="align-middle">
        <input type="text" attribute="col_name" v-model="entry.col_name" class="form-control-sm form-control" style="background: #ffffff00;border-style: none;" maxlength="32" required placeholder="column name" data-placement="top" title="column name"  />
    </td>
    <td class="align-middle">
        <div class="dropdown">
            <button class="btn btn-primary btn-sm dropdown-toggle" attribute="col_type" aria-expanded="false" data-toggle="dropdown" type="button" data-boundary="window" style="background: #4e73df00;color: rgb(128,128,128);border-style: none;" data-placement="top" title="column data type">{{entry.col_type}}</button>
            <div class="dropdown-menu" style="width: 200px;">
                <a class="dropdown-item">VARCHAR</a>
            </div>
        </div>
    </td>
    <td class="align-middle">
        <input type="text" attribute="col_def" :value="entry.col_def" class="form-control-sm form-control" style="background: #ffffff00;border-style: none;color: #ed4e3e;" maxlength="32" placeholder="default value" data-placement="top" title="default column value" />
    </td>
    <td class="text-center align-middle">
        <button v-show="!isFirt" class="btn btn-primary btn-sm" type="button" attribute="up" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding: 0px;" @click="moveConfigCollectionUpRow"><i class="fas fa-arrow-up" style="color: #858796;font-size: 14px;margin-top: 1px;margin-left: 2px;margin-right: 2px;width: 16px;height: 16px;"></i></button>
    </td>
    <td class="text-center align-middle">
        <button v-show="!isLast" class="btn btn-primary btn-sm" type="button" attribute="down" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding: 0px;" @click="moveConfigCollectionDownRow"><i class="fas fa-arrow-down" style="color: #858796;font-size: 14px;margin-top: 1px;margin-left: 2px;margin-right: 2px;width: 16px;height: 16px;"></i></button>
    </td>
</template>
<script lang="ts">
import { FileSchemaDTO } from '../../../domain/models/connections/FileSchemaDTO';
export default{
    name: 'ConfigCollectionEntry',
    props : {
        entry : FileSchemaDTO,
        isFirt : Boolean,
        isLast : Boolean
    },
    data: () => {
        return {

        }
    },
    mounted(){
        
    },
    methods:{
        changeEntry(): void{
            this.$emit('changeEntry', this.entry)
        },
        moveConfigCollectionUpRow(){
            this.$emit('moveConfigCollectionUpRow', this.entry.col_ord - 1);
        },
        moveConfigCollectionDownRow(){
            this.$emit('moveConfigCollectionDownRow', this.entry.col_ord - 1)
        }
    },
}
</script>
