<template>
    <div class="mb-4 row">
        <label :for="name" class="col-md-2 col-form-label">{{ title }} </label>
        <div class="col-md-10">
            <input class="form-control" type="file" :id="name" @change="changeHandler" multiple />
        </div>
        <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ errorMsg }}</div>
    </div>
</template>

<script setup>
import { fileMsg } from '@/common/msgEnum';
import { ref } from 'vue';

const prop = defineProps({
    title: {
        type: String,
        default: '라벨',
        required: true,
    },
    name: {
        type: String,
        default: 'nameplz',
        required: true,
    },
    isAlert : {
        type: Boolean,
        default: false,
        required: false,
    }
});

const emits = defineEmits(['update:data']);
const errorMsg = ref(fileMsg.FileMaxSizeMsg);

//파일 검사 하는거 만들어야겠지...


const changeHandler = (event) => {
    const files = Array.from(event.target.files);
    emits('update:data', files);
};
</script>

<style>
</style>
