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

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

// Props 정의
const props = defineProps({
    title: {
        type: String,
        default: '라벨',
        required: true,
    },
    name: {
        type: String,
        default: 'nameplz',
        required: true,
    },
    isEssential: {
        type: Boolean,
        default: false,
    },
    type: {
        type: String,
        default: 'text',
    },
    modelValue: {
        type: String,
        default: '',
    },
    maxlength: {
        type: Number,
        default: 30,
    },
    isAlert: {
        type: Boolean,
        default: false,
    },
    isLabel : {
        type: Boolean,
        default: true,
        required: false,
    },
});

// Emits 정의
const emits = defineEmits(['update:modelValue']);

// 로컬 상태로 사용하기 위한 `inputValue`
const inputValue = ref(props.modelValue);

// 부모로 데이터 업데이트
watch(inputValue, (newValue) => {
    emits('update:modelValue', newValue);
});

// 초기값 동기화
watch(() => props.modelValue, (newValue) => {
    if (inputValue.value !== newValue) {
        inputValue.value = newValue;
    }
});
</script>

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