<script setup>
import { ref } from "vue"
import AisCombobox from "@/components/combobox/AisCombobox.vue";

const options = ref([
  { "id": 7032,"hawkId": "cyepiskov0", "univId": "00549444", "firstName": "Chancey", "lastName": "Yepiskov", "fullName": "Chancey Yepiskov", "email": "chancey-yepiskov@uiowa.edu", "hireDate": "05/09/1990", "retired": false,"inactive": true },
  { "id": 2701,"hawkId": "beyden1", "univId": "00120802", "firstName": "Beaufort", "lastName": "Eyden", "fullName": "Beaufort Eyden", "email": "beaufort-eyden@uiowa.edu", "hireDate": "06/05/1998", "retired": false,"inactive": false },
  { "id": 9380,"hawkId": "fstokey2", "univId": "00341804", "firstName": "Franky", "lastName": "Stokey", "fullName": "Franky Stokey", "email": "franky-stokey@uiowa.edu", "hireDate": "06/11/1993", "retired": false,"inactive": true },
  { "id": 8167,"hawkId": "mloisi3", "univId": "00769787", "firstName": "Maximilien", "lastName": "Loisi", "fullName": "Maximilien Loisi", "email": "maximilien-loisi@uiowa.edu", "hireDate": "01/02/1996", "retired": false,"inactive": false },
  { "id": 3167,"hawkId": "ckunkler4", "univId": "00580573", "firstName": "Cyrillus", "lastName": "Kunkler", "fullName": "Cyrillus Kunkler", "email": "cyrillus-kunkler@uiowa.edu", "hireDate": "06/30/1990", "retired": false,"inactive": false },
  { "id": 7137,"hawkId": "nroggerone5", "univId": "00815761", "firstName": "Noella", "lastName": "Roggerone", "fullName": "Noella Roggerone", "email": "noella-roggerone@uiowa.edu", "hireDate": "03/08/1990", "retired": false,"inactive": true },
  { "id": 7477,"hawkId": "tmcnamara6", "univId": "00198639", "firstName": "Tannie", "lastName": "McNamara", "fullName": "Tannie McNamara", "email": "tannie-mcnamara@uiowa.edu", "hireDate": "12/26/2000", "retired": true,"inactive": true },
  { "id": 8112,"hawkId": "csneesby7", "univId": "00846913", "firstName": "Cherlyn", "lastName": "Sneesby", "fullName": "Cherlyn Sneesby", "email": "cherlyn-sneesby@uiowa.edu", "hireDate": "09/20/2020", "retired": false,"inactive": false },
  { "id": 5702,"hawkId": "lcouves8", "univId": "00541147", "firstName": "Linnell", "lastName": "Couves", "fullName": "Linnell Couves", "email": "linnell-couves@uiowa.edu", "hireDate": "05/28/1997", "retired": false,"inactive": true },
  { "id": 8338,"hawkId": "gtinniswood9", "univId": "00053635", "firstName": "Gerrard", "lastName": "Tinniswood", "fullName": "Gerrard Tinniswood", "email": "gerrard-tinniswood@uiowa.edu", "hireDate": "11/25/2020", "retired": true,"inactive": true },
])
const selectedOption = ref(options.value[0].univId)
</script>

<template>
  <div class="grid grid-cols-2 gap-10 items-end">
    <AisCombobox v-model="selectedOption"
                 :options="options"
                 value-key="univId"
                 label-key="fullName"
                 disabled-key="retired"
    ></AisCombobox>

    <div class="p-2 bg-ui-gray-50 border rounded">v-model: {{ selectedOption }}</div>
  </div>

</template>