<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"
                :disabled="disabled"
                :min="min"
                @focusout="$emit('focusout', modelValue)"
            />
            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">
                {{ title }}을 확인해주세요.
            </div>
            <!-- 카테고리 중복 -->
            <div class="invalid-feedback" :class="isCateAlert ? 'd-block' : ''">
                카테고리 중복입니다.
            </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,
    },
    isCateAlert : {
        type :Boolean,
        default: false,
    },
    isLabel : {
        type: Boolean,
        default: true,
        required: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    min: {
        type: String,
        default: '',
        required: false,
    }
});

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


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

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

    // 값이 입력될 때 `alert`를 false로 설정
    if (newValue.trim() !== '') {
        emits('update:alert', false);
    }
});

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


</script>

