<template>
  <div v-bind="$attrs">
  <q-select v-model="selectedValue" :use-chips="multiple" :label="displayName" label-color="primary" :options="options" stack-label
  :multiple="multiple"/>
</div>
</template>

<script lang="ts">
import { defineComponent,ref,watchEffect,computed } from 'vue';

export default defineComponent({
  name: 'SelectBox',
  inheritAttrs:false,
  props: {
    displayName:{
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    options: {
      type: Array,
      required: true,
    },
    selectType:{
      type:String,
      default:'',
    },
    modelValue: {
      type: [Array,String],
      default: null,
    },
  },
  setup(props, { emit }) {
    const selectedValue = ref(props.modelValue);
    const multiple = computed(()=>{
      return props.selectType==='multiple'
    });
    watchEffect(() => {
      emit('update:modelValue', selectedValue.value);
    });

    return {
      selectedValue,
      multiple
    };
  },
});
</script>
