<template>
    <div class="input-div">
        <select
            :class="className"
            @input="$emit('update:modelValue', $event.target.value)"
            v-model="input"
            @change="validateInput"
        >
        <option v-if="empty" value="" disabled>{{empty}}</option>
        <option :key="item.id" v-for="item in items" :value="item.id">{{item.value}}</option>
        </select>
        <ValidationError :msg="errors[name]"/>
    </div>
</template>

<script>
import { ref } from "vue";
import useFormValidation from "@/Validation/useFormValidation";
export default {
    props:{
        className:String|Object,
        placeholder:String,
        rules:Array,
        items:Array,
        empty:String

    },
    setup(props) {
        let input = ref("");
        const name = props.placeholder
        const { validate, errors} = useFormValidation();
        const validateInput = () => {
            validate(props.rules,{},name, input.value);
        };

        if(props.errormsg){
            errors[name] = props.errormsg
        }
        console.log("errors[name]",errors);
        return { input,name, errors, validateInput };
    },
};
</script>
