<template>
    <label>
        <span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
        <input type="number" :value="formattedValue" :placeholder="$t(labelTr)" :title="$t(tooltipTr)"
            :disabled="disabled" @change="updateValue($event.target.value)" :step="step" />
        <span v-if="postfix">{{ postfix }}</span>
    </label>
</template>

<script>
export default {
    name: "FloatInputWidget",
    props: {
        labelTr: {
            type: String,
            required: true,
        },
        value: {
            type: Number,
            required: false,
        },
        tooltipTr: {
            type: String,
            required: true,
        },
        width: {
            type: Number,
            required: false,
            default: 10
        },
        decimals: {
            type: Number,
            required: false,
            default: 2
        },
        postfix: {
            type: String,
            required: false,
            default: ''
        },
        disabled: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    computed: {
        formattedValue() {
            return this.value != null ? this.value.toFixed(this.decimals) : '';
        },
        step() {
            return Math.pow(10, -this.decimals);
        }
    },
    methods: {
        updateValue(value) {
            this.$emit("input", parseFloat(value).toFixed(this.decimals));
        }
    }
};
</script>

<style scoped>
label {
    display: flex;
    align-items: center;
}

input {
    margin-right: 0.5em;
}
</style>
