<script setup lang="ts">
import type { GridCodeType } from '~/types';

const value = defineModel<string>({ default: '' });

const props = defineProps<{
  options: GridCodeType[];
  className?: string;
  selectType?: 'SELECT' | 'ALL';
  isLoading?: boolean;
}>();

const selectOptions = computed(() => {
  if (props.selectType === 'REQUIRED') {
    return [{ label: '선택', value: '' }, ...props.options];
  }

  if (props.selectType === 'ALL') {
    return [{ label: '전체', value: '' }, ...props.options];
  }

  return props.options;
});

const emit = defineEmits(['change']);

const change = () => {
  emit('change');
};
</script>

<template>
  <a-select
    :class="className"
    :options="selectOptions"
    :loading="isLoading"
    v-model:value="value"
    @change="change"
  />
</template>
