<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">
            <div class="d-flex align-items-center">
                <input
                    :id="name"
                    class="form-control"
                    :type="type"
                    v-model="inputValue"
                    :maxLength="maxlength"
                    :placeholder="title"
                    :disabled="disabled"
                    :min="min"
                    autocomplete="off"
                    @focusout="$emit('focusout', modelValue)"
                    @input="handleInput"
                />
                <div v-if="isBtn" class="ms-2">
                    <slot name="append"></slot>
                </div>
            </div>
            <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,
        },
        isBtn: {
            type: Boolean,
            default: false,
            required: false,
        }
    });

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

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

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

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

    const handleInput = event => {
        const newValue = event.target.value.slice(0, props.maxlength);

        if (newValue.trim() !== '') {
            emits('update:alert', false);
        }
    };
</script>
