<template>
    <div>
        <div class="flex-fill d-flex flex-row justify-content-between">
            <div class="address-info">
                <div class="mg-b-10 field-label">
                    {{ addressModel.AddressTypeStr }}
                </div>
                <h6 class="tx-16">
                    <i class="far fa-user mg-r-10"></i>
                    {{ addressModel.Name }} | {{ addressModel.PhoneNumber1 }}
                </h6>
                <p class="tx-14 mg-b-5">
                    <i class="fas fa-map-marker-alt mg-r-10"></i>
                    {{ addressModel.FullAddress }}
                </p>
                <p class="tx-14 mg-b-5"
                    v-if="addressModel.ScheduledTimeStr != null && addressModel.ScheduledTimeStr.length > 0">
                    <i class="fas fa-calendar-day mg-r-10"></i>
                    {{ addressModel.ScheduledTimeStr }}
                </p>

                <p class="tx-14">
                    <i class="">Ghi chú: </i>
                    <i>{{ addressModel.Note }}</i>
                </p>
            </div>
            <div class="address-actions pd-r-20">
                <a type="button" @click="edit" href="javascript:void(0);" class="btn button-icon mb-1" v-if="editable">
                    <i class="far fa-edit"></i>
                    Sửa
                </a>
            </div>



        </div>
        <LadaDialog :visible="showEditDialog">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title">Cập nhật địa chỉ</h5>
                    <button @click="close" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>

            <template #body>
                <update-address :addressId="addressModel.Id" @cancel="close"></update-address>
            </template>

        </LadaDialog>
    </div>

</template>

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


import UpdateAddress from "@/views/orders/shared/updateAddress.vue";

const props = defineProps({
    addressModel: Object,
    editable: Boolean
});

const emit = defineEmits(['reload']);



//#region DATA

//#region Dialog
const showEditDialog = ref(false);

//#endregion

//#endregion

//#region methods
function edit() {
    showEditDialog.value = true;
}
function close() {
    showEditDialog.value = false;
    emit('reload');
}
//#endregion


</script>

<style scoped>
.field-label {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
}

.field-value {
    font-size: .96rem;
    font-weight: 500;
    color: #000;
}

.address-actions {
    padding-top: 2rem;
}

.address-actions .btn {
    font-size: .8rem;
    font-weight: 400;
}
</style>