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

        <div :class="isRow ? 'col-md-10 ms-auto' : '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="우편번호"
                    disabled="true"
                    readonly
                />

                <input
                    class="form-control"
                    type="text"
                    v-model="address"
                    placeholder="기본주소"
                    disabled="true"
                    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 postcode = ref('');
const address = ref('');
const detailAddress = ref('');

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,
    },
    isRow: {
        type: Boolean,
        default: false,
        required: false,
    },
    isAlert: {
        type: Boolean,
        default: false,
        required: false,
    },
    modelValue: {
        type: Object,
        default: () => ({
            postcode: '',
            address: '',
            detailAddress: ''
        }),
        required: false
    }
});

// watch 설정 수정
watch(() => props.modelValue, (newValue) => {
    if (newValue) {
        postcode.value = newValue.postcode || '';
        address.value = newValue.address || '';
        detailAddress.value = newValue.detailAddress || '';
    }
}, { immediate: true });

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

// 주소 검색 팝업 열기
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,
    };
    emits('update:data', fullAddress);
    emits('update:modelValue', fullAddress); // modelValue도 부모로 전달
};

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