<template>
    <div class="mb-2">
        <div class="d-flex align-items-center">
            <label :for="name" class="col-md-2 col-form-label">
                {{ title }}
                <span :class="isEssential ? 'link-danger' : 'd-none'">*</span>
            </label>
            <button type="button" class="btn btn-sm btn-primary" @click="openAddressSearch">주소찾기</button>
        </div>

        <div class="col-md-12">
            <div class="d-flex mb-3">
                <input
                    :id="name"
                    class="form-control me-2 w-25"
                    type="text"
                    v-model="postcode"
                    placeholder="우편번호"
                    readonly
                />

                <input
                    class="form-control"
                    type="text"
                    v-model="address"
                    placeholder="기본주소"
                    readonly
                />

            </div>

            <div>
                <input
                    class="form-control"
                    type="text"
                    v-model="detailAddress"
                    placeholder="상세주소"
                    @input="updateDetailAddress"
                    :maxLength="maxlength"
                />
            </div>

            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
        </div>
    </div>
</template>

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

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

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

// 주소 관련 상태 관리
const postcode = ref('');
const address = ref('');
const detailAddress = ref('');

// 주소 검색 팝업 열기
const openAddressSearch = () => {
    new window.daum.Postcode({
        oncomplete: (data) => {
            postcode.value = data.zonecode;
            address.value = data.address;

            // 전체 주소 데이터 내보내기
            emitAddressData();

            // 상세주소 입력 필드로 포커스 이동
            setTimeout(() => {
                const detailInput = document.querySelector('input[placeholder="상세주소"]');
                if (detailInput) detailInput.focus();
            }, 100);
        }
    }).open();
};

// 상세주소 업데이트
const updateDetailAddress = (event) => {
    detailAddress.value = event.target.value;
    emitAddressData();
};

// 전체 주소 데이터 내보내기
const emitAddressData = () => {
    const fullAddress = {
        postcode: postcode.value,
        address: address.value,
        detailAddress: detailAddress.value,
        fullAddress: `${address.value} ${detailAddress.value}`.trim()
    };
    emits('update:data', fullAddress);
};

// isAlert를 false로 설정
watch([postcode, address], ([newPostcode, newAddress]) => {
    if (newPostcode && newAddress) {
        emits('update:alert', false);
    }
});
</script>
