<template>
    <div class="input-div">
        <input
            autocomplete="off"
            :class="className"
            :placeholder="placeholder"
            :type="type"
            @input="$emit('update:modelValue', $event.target.value)"
            v-model="input"
            @keyup="validateInput"
            @blur="validateInput"
        />
        <ValidationError :backend="backend" :msg="messages"/>
    </div>
</template>

<script>
import {reactive, ref} from "vue";
import useFormValidation from "@/Validation/useFormValidation";
export default {
    props:{
        className:String|Object,
        placeholder:String,
        type:String,
        rules:Array,
        backend:String,
        errors:Array
    },
    setup(props) {
        let input = ref("");
        let messages = ref([])
        const name = props.placeholder

        //const { validate, errors} = useFormValidation();

        const validateInput = () => {
            messages.value = []
            if(props.errors[0]) {
                messages.value.push(props.errors[0])
            }
        }
        //console.log('ccc',messages)
        return { input,name,messages,validateInput };
    }

};
</script>
