<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">

                <div class="input-group mb-3">
                    <v-select v-model="selectedCustomerId" :reduce="(option) => option.Id"
                        label="FullName + '' + PhoneNumber" :filterable="false" :options="customers"
                        @search="searchCustomers" placeholder="Chọn / tìm khách hàng theo tên / sđt">
                        <template #no-options="{ search, searching, loading }">
                            Gõ từ khóa để tìm khách hàng....
                        </template>
                        <template #option="{ FullName, PhoneNumber, UserName }">
                            <div class="mt-0 pb-1">
                                <h5 class="mb-1 tx-14">
                                    {{ FullName }}
                                </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, UserName }">
                            <div style="display: flex; align-items: baseline">
                                <strong>{{ FullName }}</strong>
                                <span class="mg-r-5 mg-l-10">|</span>
                                <small style="margin-left: 0.5rem">{{ PhoneNumber }}</small>
                            </div>
                        </template>
                    </v-select>
                    <div data-v-4263d063="" class="input-group-append">
                        <button class="btn btn-primary br-ts-0 br-bs-0 btn-block" type="button" @click="create">
                            <i class="fa fa-plus"></i>
                            Tạo
                        </button>
                    </div>
                </div>
            </div>

        </div>

        <LadaDialog :visible="modalControl.CreateCustomer">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title">Tạo khách hàng</h5>
                    <button @click="closeDialog" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>
            <template #body>
                <CreateCustomer @cancel="closeDialog" @added="addedCus" :id="selectedCustomerId"></CreateCustomer>
            </template>

        </LadaDialog>
    </div>
</template>
<script setup>
//#region Imports
import { ref, reactive, onMounted, watch } from 'vue';
import _ from 'lodash';
import customerService from "@/services/customerService";
import CreateCustomer from "./customer-add.vue"
//#endregion
const modalControl = reactive({
    CreateCustomer: false
});

function closeDialog() {
    modalControl.CreateCustomer = false;
}

function create() {
    // selectedCustomerId.value = 0;
    modalControl.CreateCustomer = true;
}

async function addedCus(cusId) {
    var customerResult = await customerService.getById(cusId);
    if (customerResult.Id > 0) {
        customers.splice(0, customers.length);
        customers.push(customerResult);
        selectedCustomerId.value = customerResult.Id;
    }
    closeDialog();

}


const customers = reactive([]);
const selectedCustomerId = ref();


const props = defineProps({
    customerId: Number
})
const emit = defineEmits(['update:customerId'])

async function searchCustomers(keyword, loading) {
    if (keyword.length) {
        loading(true);
        await loSugCustomers(loading, keyword);
    }
}

let loSugCustomers = _.debounce(async (loading, keyword) => {
    customers.splice(0, customers.length);
    var customerResult = await customerService.suggest(keyword);
    if (customerResult != null && customerResult.length > 0) {
        customerResult.forEach(customer => {
            customers.push(customer);
        });
    }
    loading(false);

}, 300);



watch(selectedCustomerId, async (newCustomerId) => {
    if (newCustomerId != props.customerId) {
        emit('update:customerId', newCustomerId);
    }

})

</script>
<style scoped>
.vs__dropdown-toggle {
    border-radius: 5px 0 0px 5px !important;
    padding: 1px 0 8px !important;
}

.v-select {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 400;
    position: relative;
    flex: 1 1 auto;
    width: 1%;
}
</style>