<template>
    <div class="row">
        <div class="col-lg-3 col-md-5">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">Khu vực</div>
                </div>
                <div class="main-content-left main-content-left-mail card-body p-0 " style="min-height: 250px;">
                    <location-tree-view ref="locationRef" @selected="selectLocation" :addressType="2" />
                </div>
            </div>
        </div>
        <div class="col-lg-9 col-md-7">
            <div class="card custom-card">
                <div class="card-body p-0">
                    <OrderList @reload="reload" v-if="!isLoading" :addressType="5" :locationId="selectedLocationId">
                    </OrderList>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import LocationTreeView from '../components/locationTree/index.vue';
import OrderList from '../components/orderList/index.vue';

const orders = reactive([]);
const isLoading = ref(false);
const selectedLocationId = ref(0);

const locationRef = ref(null);


function selectLocation(location) {
    selectedLocationId.value = location.id;
}

const reload = async () => {
    await locationRef.value.reload();
};



</script>