<template>
    <div class="w-full  px-4" :class="size ? size : 'lg:w-6/12'">
        <div class="relative w-full mb-3" :class="subSectionClass">
            <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" :for="id" :class="labelClass"> {{ label }}
                <span class="text-red-600" v-if="required">*</span>
            </label>
            <input
                :class="inputClass"
                :id="id"
                type="file"
                :required="required"
                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                @input="updateInput"
                :autofocus="autofocus"
                ref="filei"
                :multiple="multiple"
            />
            <span v-if="error" class="text-red-600">{{error}}</span>
        </div>
    </div>
</template>

<script>
/**
 * @props mainSectionClass
 * @props subSectionClass
 * @props labelClass
 * @props inputClass
 * @props label
 * @props type
 * @props id
 * @props required
 * @props value
 * @props readonly
 */
export default {
    props:["mainSectionClass", "subSectionClass", "labelClass", "inputClass", "label",  "id", "required", "value", 'error', 'autofocus', 'size', 'multiple'],
    data(){
        return{
            pushfile: []
        }
    },
    name: 'input',
    methods: {
        updateInput(event) {
            this.pushfile = (this.multiple) ? this.$refs.filei.files : this.$refs.filei.files[0];
            this.$emit("update:file", this.pushfile);
        },
    },
}
</script>


<style scoped>
    input:read-only {
        background-color:rgb(242, 242, 242);
    }
</style>
