<template>
    <div class="row">
        <p>
            <span>{{ selectedWardPrefix }}</span>&nbsp;<span>{{ selectedWardName }}</span><span
                v-if="selectedWardPrefix">,&nbsp;</span>
            <span>{{ selectedDistrictPrefix }}</span>&nbsp;<span>{{ selectedDistrictName }}</span><span
                v-if="selectedDistrictPrefix">,&nbsp;</span>
            <span>{{ selectedCityPrefix }}</span>&nbsp;<span>{{ selectedCityName }}</span>
        </p>
    </div>
</template>
<script setup>
//#region Imports
import { ref, reactive, onMounted, watch } from 'vue';
import _ from 'lodash';
import locationService from "@/services/locationService";
//#endregion



const props = defineProps({
    cityId: Number,
    districtId: Number,
    wardId: Number
})
const emit = defineEmits(['update:cityId', 'update:districtId', 'update:wardId'])


const cities = reactive([]);
const districts = reactive([]);
const wards = reactive([]);
const selectedCityId = ref();
const selectedCityName = ref();
const selectedCityPrefix = ref();
const selectedDistrictId = ref();
const selectedDistrictName = ref();
const selectedDistrictPrefix = ref();
const selectedWardId = ref();
const selectedWardName = ref();
const selectedWardPrefix = ref();



//#region Events
onMounted(async () => {
    await preLoadData();

})

async function preLoadData() {
    if (props.cityId != null && props.cityId > 0) {
        var locationResult = await locationService.getById(props.cityId);
        if (locationResult.Id > 0) {
            selectedCityId.value = locationResult.Id;
            selectedCityName.value = locationResult.Name;
            selectedCityPrefix.value = locationResult.Prefix;
        }
    }
    if (props.districtId != null && props.districtId > 0) {
        if (props.cityId != null && props.cityId > 0) {
            districts.splice(0, districts.length);
            var districtResult = await locationService.loSug("", 1, props.cityId);
            if (districtResult != null && districtResult.length > 0) {
                districtResult.forEach(district => {
                    if (district.Id == props.districtId) {
                        selectedDistrictName.value = district.Name;
                        selectedDistrictId.value = district.Id;
                        selectedDistrictPrefix.value = district.Prefix;
                    }
                });
            }
        } else {
            var locationResult = await locationService.getById(props.districtId);
            if (locationResult.Id > 0) {
                selectedDistrictId.value = locationResult.Id;
                selectedDistrictName.value = locationResult.Name;
                selectedDistrictPrefix.value = locationResult.Prefix;
            }
        }
    }
    if (props.wardId > 0) {
        if (props.districtId != null && props.districtId > 0) {
            wards.splice(0, wards.length);
            var wardResult = await locationService.loSug("", 2, props.districtId);
            if (wardResult != null && wardResult.length > 0) {
                wardResult.forEach(ward => {
                    if (ward.Id == props.wardId) {
                        selectedWardName.value = ward.Name;
                        selectedWardId.value = ward.Id;
                        selectedWardPrefix.value = ward.Prefix;
                    }
                });
            }
        } else {
            var locationResult = await locationService.getById(props.wardId);
            if (locationResult.Id > 0) {
                selectedWardName.value = locationResult.Name;
                selectedWardId.value = locationResult.Id;
                selectedWardPrefix.value = locationResult.Prefix;
            }
        }
    }
}
//#endregion

watch(() => [props.cityId, props.districtId, props.wardId], async ([valueCityId, valueDistrictId, valueWardId]) => {
    if (valueCityId || valueDistrictId || valueWardId) {
        await preLoadData()
    }

})
</script>