<template>
    <div>
        <loader v-if="isLoading" class="mt-5 mb-5"></loader>
        <ul>
            <tree-node v-for="node in treeData" :key="node.id" :node="node" :level="0" :selected-node="selectedNode"
                @select-node="selectNode" />
        </ul>
    </div>
</template>

<script setup>
//#region Imports
import { ref, reactive, onMounted } from 'vue';
import TreeNode from './treeNode.vue';
//#endregion

import deployService from "@/services/business/deployService";



const emit = defineEmits(['selected'])

//#region props
const props = defineProps({
    addressType: Number
});
//#endregion

//#region DATA
const selectedNode = ref(null);
const isLoading = ref(false);
const treeData = reactive([]);
//#endregion



//#region Methods


function selectNode(node) {
    selectedNode.value = node;
    emit('selected', node);
}

const reload = async () => {
    console.log('da vao day roi');
    selectedNode.value = null;
    await getLocations();
};

async function getLocations() {
    isLoading.value = true;
    treeData.splice(0, treeData.length);
    var locationsResult = await deployService.getLocations(props.addressType);
    console.log(locationsResult.toString());
    if (locationsResult == null || locationsResult) {

    }
    var tdata = convertToTreeData(locationsResult);
    if (tdata != null && tdata.length > 0) {
        tdata.forEach(element => {
            treeData.push(element);
        });
    }
    isLoading.value = false;
}


function convertToTreeData(locations) {
    const tree = [];
    const cityMap = {};
    let totalQuantity = 0;
    locations.forEach(item => {
        if (!cityMap[item.CityId]) {
            const cityNode = {
                id: item.CityId,
                label: item.CityName,
                quantity: 0,
                children: [],
            };
            cityMap[item.CityId] = cityNode;

            tree.push(cityNode);
        }
        cityMap[item.CityId].quantity += item.Quantity;
        totalQuantity += item.Quantity;

        const cityNode = cityMap[item.CityId];
        let districtNode = cityNode.children.find(d => d.id === item.DistrictId);

        if (!districtNode) {
            districtNode = {
                id: item.DistrictId,
                label: item.DistrictName,
                quantity: 0,
                children: []
            };
            cityNode.children.push(districtNode);
        }

        districtNode.quantity += item.Quantity;

        districtNode.children.push({
            id: item.WardId,
            label: item.WardName,
            quantity: item.Quantity,
            children: []
        });
    });
    const rootNode = {
        id: 0,
        label: 'Tất cả',
        quantity: totalQuantity,
        children: tree
    };
    selectNode(rootNode);
    return [rootNode];
}


//#endregion


onMounted(async () => {
    //await getParents();
    await getLocations();
})



defineExpose({
    reload
})



</script>

<style scoped>
ul {
    list-style-type: none;
    padding-left: 0px;
}

li {
    margin: 0;
}
</style>