<template>
    <tr id="connection_name-4">
        <td style="width: 20px;"><i class="fa fa-times-circle validation-icon" v-if='invalid' :id="'ico_' + id" :name="'ico_' + id"></i></td>
        <td style="width: 150px;"><span class="text-dark label"><strong>{{label}}</strong><br></span></td>
        <td colspan="2">
            <Datepicker v-model="value" :id="id" class="form-control-sm form-control input-form" :attribute="name" :label="label" :group="group" :placeholder="placeholder" starting-view="time" minimum-view="time" inputFormat="HH:mm" />
            </td>
        <td style="width: 20px;"></td>
    </tr>
</template>
<script lang="ts">
import Datepicker from "vue3-datepicker";
export default {
    name: 'InputTime',
    components:{
        Datepicker
    },
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        label: { type: String, default: '' },
        value: { type: Date, default: new Date() },
        placeholder : { type: String, default: '' },
        group: { type: String, default: '' },
        invalid: { type: Boolean, default: false },
        inputFormat: { type: String, default: 'dd-MM-yyyy' },
    },
    data: ()=>{
        return {
            isEditing: false,
        }
    },
    watch: {
        value(value){
            this.$emit('update:time', value);
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        },
    },

}
</script>
<style scoped>
.input-form{
    background: var(--input-background-color);
    border-radius: 0px;
    border-style: none;
    border-bottom: 1px dashed #d1d3e2;
    font-size: var(--input-label-font-size);
}
.validation-icon{
    color: #946464;
}
.label{
    font-size: var(--input-label-font-size);
    color: var(--label-form-color);
}
</style>