<template>
    <div>
        <div class="d-flex flex-row justify-content-center">
            <!-- <label class="pd-r-10 pd-t-6">Chọn khách hàng: </label> -->
            <div class="col-9">
                <label class="pd-r-10 pd-t-6">Chọn lái xe: </label>
                <v-select v-model="selectedDriver" :reduce="(option) => option.UserId" label="FullName"
                    :filterable="false" :options="drivers" @search="searchDrivers"
                    placeholder="Chọn / tìm theo lái xe, biển số xe">
                    <template #no-options="{ search, searching, loading }">
                        Gõ từ khóa để tìm xe / lái xe....
                    </template>
                    <template #option="{ FullName, PhoneNumber, UserName, Quantity }">
                        <div class="mt-0 pb-1">
                            <h5 class="mb-1 tx-14">
                                {{ FullName }} <b>({{ Quantity }})</b>
                            </h5>
                            <p class="mb-0 tx-13">
                                <span>
                                    <i class="fas fa-phone tx-11"></i>
                                    {{ PhoneNumber }}
                                </span>
                                <span class="mg-l-10">
                                    <i class="fas fa-user tx-11"></i>
                                    {{ UserName }}
                                </span>
                            </p>
                        </div>
                    </template>
                    <template #selected-option="{ FullName, PhoneNumber, Quantity }">
                        <div style="display: flex; align-items: baseline">
                            <strong>{{ FullName }}</strong>
                            <span class="mg-r-5 mg-l-10">|</span>
                            <span style="margin-left: 0.5rem"> Số đơn: {{ Quantity }}</span>
                        </div>
                    </template>
                </v-select>
            </div>

        </div>
        <div class="row row-sm mt-3">
            <div class="col-12 order-info">
                <div class="card custom-card">
                    <div class="card-body p-0">
                        <orderList :driver-id="selectedDriver"></orderList>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import _ from 'lodash';
import warehouseService from "@/services/business/warehouseService";

//#region Components
import orderList from './components/orderList.vue';
import { useToast } from "vue-toastification";
const toast = useToast();
//#endregion

//#region props

//#endregion

//#region DATA
const loading = ref(false);
const model = reactive({});

const drivers = reactive([]);
const orders = reactive([]);
const selectedDriver = ref();

//#endregion


//#region Methods
async function searchDrivers(keyword, loading) {
    if (keyword.length) {
        loading(true);
        await loSugDrivers(loading, keyword);
    }
}
let loSugDrivers = _.debounce(async (loading, keyword) => {
    drivers.splice(0, drivers.length);
    var driverResult = await warehouseService.SearchInboundDrivers(keyword);
    if (driverResult != null && driverResult.length > 0) {
        driverResult.forEach(customer => {
            drivers.push(customer);
        });
        console.log(drivers);
    }
    loading(false);

}, 300);

//#endregion


onMounted(async () => {

});

</script>

<style scoped>
.timeline-panel {
    padding: 15px !important;
}

h6.timeline-title {
    font-size: .98rem !important;
    font-weight: 500;
}

.timeline-footer span {
    font-size: .83rem !important;
}

.order-info {
    min-height: 80vh;
}
</style>