<template>
    <div class="dropdown">
        <button ref="frmRef" class="btn btn-sm button-icon nobg" type="button" data-bs-toggle="dropdown"
            data-bs-auto-close="false" aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-people-carry"></i>
        </button>
        <div class="dropdown-menu p-2" style="min-width: 350px;">
            <loader v-if="isLoading" class="mt-3 mb-3"></loader>
            <form v-if="!isLoading" @submit.prevent="submit">
                <div class="form-group">
                    <label>Chọn lái xe</label>
                    <v-select v-model="selectedUser" :reduce="(option) => option.Id" label="UserName"
                        :filterable="false" :options="users" @search="getUsers">
                        <template #no-options="{ search, searching, loading }">
                            Gõ từ khóa để tìm....
                        </template>
                        <template v-slot:option="option">
                            {{ option.UserName }} ({{ option.FullName }})
                        </template>
                    </v-select>
                </div>
                <div class="d-flex flex-row justify-content-between">
                    <button type="submit" class="btn btn-primary">Xác nhận</button>
                    <button @click="close" type="button" class="btn btn-default">Bỏ qua</button>
                </div>
            </form>
        </div>
    </div>
</template>
<script setup>

import { ref, reactive, onMounted } from 'vue';
import _ from 'lodash';
import staffService from "@/services/staffService";
import deployService from "@/services/business/deployService";
import { useToast } from "vue-toastification";
const toast = useToast();
const frmRef = ref(null);


const emit = defineEmits(['reload'])

//#region props
const props = defineProps({
    addressType: Number,
    orderIds: {
        type: Array,
        required: true,
        default: []
    }
});
//#endregion

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


const getUsers = async (keyword, loading) => {
    if (keyword.length) {
        loading(true);
        await getUsersDebounce(loading, keyword);
    }
}

let getUsersDebounce = _.debounce(async (loading, keyword) => {
    users.splice(0, users.length);

    var staffResult = await staffService.sugDriver(keyword);
    if (staffResult != null && staffResult.length > 0) {
        staffResult.forEach(staff => {
            users.push(staff);
        });
    }
    loading(false);
}, 500);



const submit = async () => {
    isLoading.value = true;
    if (selectedUser == null || selectedUser.Id <= 0) {
        alert("Vui lòng chọn người dùng");
    } else {
        var model = {
            OrderIds: props.orderIds,
            UserId: selectedUser.value
        }
        var assignResult = await deployService.assign(model, props.addressType);
        if (assignResult != null && assignResult.Result === 1) {
            toast.success('Thành công!');
        } else {
            toast.error('Thất bại: ' + assignResult.Message);
        }
        emit('reload');
        isLoading.value = false;
        close();
    }

};
const close = () => {
    frmRef.value.click();
    selectedUser.value = null;
    users.splice(0, users.length);
};


</script>
<style scoped>
.btn.nobg,
.btn.nobg:active,
.btn.nobg.active,
.btn-default.active,
.btn-default:active,
.btn-default:hover,
.btn-default:focus {
    color: black !important;
}

button.btn.nobg {
    background-color: transparent;
    border-color: transparent;
    color: black;
    font-size: .88rem;
    margin-block-start: -5px;
}

button.btn.nobg:hover,
button.btn.nobg:active,
button.btn.nobg:focus {
    background-color: rgba(32, 33, 36, 0.059);
    border-radius: 50%;
    color: black !important;
}

.dropdown-menu {
    box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, .05),
        0 1px 5px 0 rgba(0, 0, 0, .05),
        2px 6px 14px 0px rgba(0, 0, 0, .13)
}
</style>