<template>
    <div class="mb-4 row">
        <label :for="name" class="col-md-2 col-form-label">
            {{ title }}
            <span :class="isEssential ? 'text-red' : 'none'">*</span>
        </label>
        <div class="col-md-10">
            <input :id="name"
                class="form-control"
                :type="type"
                @input="updateInput"
                :value="value"
                :maxLength="maxlength"
                :placeholder="title" />
            <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ title }}을 확인해주세요.</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const prop = defineProps({
    title: {
        type: String,
        default: '라벨',
        required: true,
    },
    name: {
        type: String,
        default: 'nameplz',
        required: true,
    },
    isEssential: {
        type: Boolean,
        default: false,
        required: false,
    },
    type: {
        type: String,
        default: 'text',
        required: false,
    },
    value: {
        type: String,
        default: '',
        require: false,
    },
    maxlength: {
        type: Number,
        default: 30,
        required: false,
    },
    isAlert : {
        type: Boolean,
        default: false,
        required: false,
    }
});

const emits = defineEmits(['update:data'])

const updateInput = function (event) {
    //Type Number 일때 maxlength 적용 안됨 방지
    if (event.target.value.length > prop.maxlength) {
        event.target.value = event.target.value.slice(0, prop.maxlength);
    }
    emits('update:data', event.target.value);
};
</script>

<style>
.none {
    display: none;
}
</style>
