<script setup>
import {ref} from 'vue';
import AisSelect from '@/components/select/AisSelect.vue'

const options = [
  {value: 1, label: 'Option #1', disabled: false},
  {value: 2, label: 'Option #2', disabled: false},
  {value: 3, label: 'Option #3', disabled: false},
]

const selectedOption = ref(1)
let selectedObject = ref(undefined)

const initializeSelection = function (value) {
  console.log('AisSelect loaded', value)
  selectedObject.value = value
}

const handleChange = function (value) {
  console.log('AisSelect changed', value)
  selectedObject.value = value
}
</script>

<template>
  <div className="grid gap-8">
    <AisSelect
        :options="options"
        v-model="selectedOption"
        @load="initializeSelection"
        @change="handleChange"
    />

    <div className="grid gap-2 p-4 bg-ui-gray-50 border rounded">
      <div>v-model: {{ selectedOption }}</div>
      <div>selectedObject: {{ selectedObject }}</div>
    </div>
  </div>
</template>

