<template>
  <Select
    v-bind="$attrs"
    :model-value="modelValue"
    :options="projectOptions"
    :fallback-option="false"
    :placeholder="placeholder"
    :field-names="{ value: 'id', label: 'name' }"
    @update:model-value="onUpdate"
  />
</template>

<script lang="ts" setup>
import { Select } from '@arco-design/web-vue';
import { toRefs } from 'vue';
import { storeToRefs } from 'pinia';
import { useSelectionStore } from '@/store';

type propType = {
  modelValue?: number | string | number[];
  multiple?: boolean;
  placeholder?: string;
  maxTagCount?: number;
};

const props = withDefaults(defineProps<propType>(), {
  multiple: false,
  maxTagCount: 0,
  placeholder: '请选择',
  modelValue: '',
});

const emits = defineEmits<{ (e: 'update:modelValue', value: number | number[]): void }>();

const { multiple } = toRefs(props);

const { projectOptions } = storeToRefs(useSelectionStore());

const onUpdate = (val?: number) => emits('update:modelValue', val || (multiple.value ? [] : 0));
</script>

<style scoped></style>