<template>
    <input
            class="v-date-input"
            v-bind="$props"
            :value="currentValue"
            @input="handleInput"
            @focus="handleFocus"
            @blur="handleBlur"
            type="text"
    >
</template>
<script>
    import emitter from '../../../../../src/mixins/emitter';

    export default {
        mixins: [emitter],
        data() {
            return {
                currentValue: this.value,
            };
        },

        props: {
            value: [String, Number],
            placeholder: String,
            readonly: Boolean,
        },

        watch: {
            'value'(val, oldValue) {
                this.setCurrentValue(val);
            }
        },

        methods: {
            handleBlur(event) {
                this.$emit('blur', event);
            },
            handleFocus(event) {
                this.$emit('focus', event);
            },
            handleInput(event) {
                const value = event.target.value;
                this.$emit('input', value);
                this.setCurrentValue(value);
                this.$emit('change', value);
            },
            setCurrentValue(value) {
                if (value === this.currentValue) return;
                this.currentValue = value;
            }
        },
    };
</script>
