<template>
    <tr :id="'tr_' + id">
        <td style="width: 20px;"><i class="fa fa-times-circle validation-icon"  v-if='invalid' :id="'ico_' + id"></i></td>
        <td style="width: 150px;"><span :id="'label_'+id" class="text-dark label"><strong>{{label}}</strong><br></span></td>
        <td colspan="2"><input class="input-number" type="number" :id="id" :min="min" :max="max" style="" :value="value" :name='name' :group="group" @input="$emit('update:value', $event.target.value)"></td>
        <td style="width: 20px;"></td>
    </tr>
</template>
<script lang="ts">
export default {
    name: 'InputNumber',
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        label: { type: String, default: '' },
        value: { type: String, default: '' },
        group: { type: String, default: '' },
        invalid: { type: Boolean, default: false },
        min: { type: Number, default: -999999 },
        max: { type: Number, default: 999999 },
    },
    data: ()=>{
        return {
            isEditing: false
        }
    },
    watch:{
        value: function(){
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        }
    },

}
</script>
<style scoped>
.input-number{
    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) !important;
    color: var(--label-form-color) !important;
}
</style>