<script setup>
import AisTypeAhead from "../AisTypeAhead.vue";
import AisTypeAheadEntry from "../AisTypeAheadEntry.vue";
import LocalPersonService from "./LocalPersonService.js";
import { ref } from "vue";

const searchService = new LocalPersonService();
const selection = ref("LatrenaCooper18");
const selectedObject = ref({});
</script>

<template>
  <div class="grid gap-4">
    <AisTypeAhead
      :service="searchService"
      lookup="hawk_id"
      v-model="selection"
      @change="selectedObject = $event"
      #default="{ item: person, disabled, active, selected }"
    >
      <AisTypeAheadEntry
        :label="searchService.format(person)"
        :context="person.department"
      />
    </AisTypeAhead>
    <div class="grid gap-4 bg-ui-gray-50 p-4">
      <div><span class="font-semibold">v-model:</span>{{ selection }}</div>
      <div><span class="font-semibold">@change:</span>{{ selectedObject }}</div>
    </div>
  </div>
</template>
