<template>
    <div>
        <div class="row">
            <div class="col-lg-12">
                <div class="d-flex flex-row justify-content-between">
                    <div class="d-flex flex-row">
                        <div class="section-icon me-2 mt-1">
                            <i class="fas fa-people-carry"></i>
                        </div>
                        <!-- <div>
                            <p class="tx-18 font-weight-semibold d-flex mb-0 mt-2">Địa chỉ {{ title }}</p>
                            <p class="tx-13 text-muted mb-0">
                                Chọn địa chỉ đã lưu của khách hàng hoặc tạo địa chỉ mới
                            </p>
                        </div> -->
                        <b class="tx-18 font-weight-semibold d-flex mb-0 mg-t-15">Địa chỉ {{ title }}</b>
                    </div>
                    <div class="address-actions mg-t-10">
                        <a href="javascript:void(0);" class="btn btn-outline-dark mg-r-10" @click="openExistAddress">
                            <i class="fa fa-tasks mg-r-5"></i>
                            Chọn...
                        </a>
                        <!-- Đã bỏ nút Tạo... ở đây -->
                    </div>
                </div>
            </div>
            <div class="col-12 mt-3" v-if="addressModel.Id >= 0">
                <div class="d-flex flex-row justify-content-between pd-l-10">
                    <div class="address-info">
                        <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">
                            <i class="">Ghi chú: </i>
                            <i>{{ addressModel.Note }}</i>
                        </p>
                    </div>
                    <div class="address-actions">
                        <a v-if="addressModel.Id == 0" type="button" class="btn button-icon mb-1"><i
                                class="far fa-edit"></i>
                            Sửa</a>
                    </div>
                </div>
            </div>
        </div>
        <LadaDialog :visible="modalControl.AddNew">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title">Thêm địa chỉ</h5>
                    <button @click="closeModal" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>
            <template #body>
                <AddressAdd @submit="addNewSubmit" @cancel="closeModal" :id="selectedId" :addType="addType"
                    :customerId="customerId">
                </AddressAdd>
            </template>
        </LadaDialog>
        <LadaDialog :visible="modalControl.AddressList">
            <template #header>
                <div class="modal-header">
                    <h5>Chọn địa chỉ {{ title }}</h5>
                    <button @click="closeModal" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>
            <template #body>
                <!-- Chỉ giữ lại AddressList, xóa AddressAdd và nút tạo địa chỉ ở đây -->
                <AddressList @selected="getById" :addType="addType" :customerId="customerId"></AddressList>
            </template>
        </LadaDialog>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import AddressAdd from "./address-add.vue";
import AddressList from "./addressList.vue";

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

//#region Toast
import { useToast } from "vue-toastification";
const toast = useToast();
//#endregion


//#region Services
import customerAddressService from "@/services/customerAddressService";
// import customerAddressService from "@/services/locationService";
import locationService from '@/services/locationService';
//#endregion



//#region props
const props = defineProps({
    addType: Number,
    customerId: Number,
});
//#endregion

//#region DATA

const selectedId = ref(0);
const title = ref('');
const selectedAddress = ref(null);

const addressModel = reactive({
    Id: -1,
    Name: '',
    PhoneNumber1: '',
    Address1: '',
    FullAddress: '',
    AddressType: 1,
    CityId: null,
    DistrictId: null,
    WardId: null,
    Note: ''
});

//#endregion


//#region modals

const modalControl = reactive({
    AddNew: false,
    AddressList: false
});
function closeModal() {
    modalControl.AddNew = false;
    modalControl.AddressList = false;

}
//#endregion


//#region Methods
async function openExistAddress() {
    modalControl.AddressList = true;
}

async function getById(id) {
    var customerAddressResult = await customerAddressService.getById(id);
    addressModel.Id = customerAddressResult.Id;
    addressModel.Name = customerAddressResult.ContactName;
    addressModel.PhoneNumber1 = customerAddressResult.ContactPhoneNumber;
    addressModel.CityId = customerAddressResult.CityId;
    addressModel.DistrictId = customerAddressResult.DistrictId;
    addressModel.WardId = customerAddressResult.WardId;
    addressModel.Address1 = customerAddressResult.Address;
    addressModel.FullAddress = customerAddressResult.FullAddress;
    addressModel.Note = customerAddressResult.Note;
    modalControl.AddressList = false;
}

async function addNewSubmit(addedAddress) {
    Object.assign(addressModel, addedAddress);
    var fullAddress = await locationService.getFullAddressByWard(addressModel.WardId);
    addressModel.FullAddress = addressModel.Address1 + ", " + fullAddress;
    console.log(addressModel);
    modalControl.AddNew = false;
    selectedAddress.value = addressModel;
    // Nếu có tích lưu địa chỉ thì gọi hàm lưu
    if (addedAddress.saveAddress) {
        await saveAddress(addressModel);
    }
}

async function saveAddress(addressModel) {
    var addrModel = addressModel;
    addrModel.UpdatedByUserName = "";
    addrModel.UpdatedBy = 0;
    var addrResult = await customerAddressService.createOrUpdate(addrModel);
    if (addrResult != null && addrResult.Result === 1) {

    } else {
        toast.error('Thất bại: ' + addrResult.Message);
    }
}


//#endregion



//#region Events
onMounted(async () => {

    switch (props.addType) {
        case 1:
            title.value = "gửi";
            break;
        case 2:
            title.value = "nhận";
            break;
        default:
            break;
    }
});




//#endregion

//Mỗi lần thay đổi phường xã thì gọi sự kiện check fee
watch(() => addressModel.WardId, (newWardId) => {
    emit('checkFee');
})

//#region Expose
const getModel = () => {
    return addressModel;
};
//#endregion

defineExpose({
    getModel
})


</script>
<style scoped>
.section-icon {
    display: flex;
    text-align: center;
}

.section-icon i {
    width: 3rem;
    font-size: 18px;
    line-height: 3rem;
    height: 3rem;
    background-color: #ffcb05;
    color: #ffffff;
    border-radius: 50%;
}
</style>