<script setup>
import {computed, onMounted, ref} from "vue";
import {NSelect} from 'naive-ui'

const roles = ref([])

const onFetchUserRoles = async () => {
    await axios.get('/api/app/user/roles').then(res => {
        roles.value = res.data
    })
}

const roleOptions = computed(() => {
    if (roles.value.length > 0) return roles.value.map(itm => ({
        label: itm.name,
        value: itm.role_id
    }))
})

const value = ref(null)

onMounted(async () => {
    await onFetchUserRoles()
})
</script>

<template>
    <div>
        <NSelect v-model:value="value" :options="roleOptions" class="w-50!" />
    </div>
</template>

<style scoped>

</style>
