<template>
  <Select
    v-bind="$attrs"
    v-model="formValue"
    :options="options"
    :fallback-option="false"
    :field-names="{ value: 'id', label: 'name' }"
    :placeholder="placeholder"
    :allow-search="true"
  />
</template>

<script lang="ts" setup>
  import { Select } from '@arco-design/web-vue';
  import { useSelectionStore } from '@/store';
  import { useVModels } from '@vueuse/core';
  import { storeToRefs } from 'pinia';
  import { computed } from 'vue';
  import { filter } from 'lodash';

  type propType = { modelValue?: number | string | number[]; placeholder?: string; filtrate?: (value: any) => boolean };

  const props = withDefaults(defineProps<propType>(), {
    filtrate: () => true,
    placeholder: '请选择',
  });
  const emits = defineEmits(['update:modelValue', 'update:loading']);

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

  const options = computed(() => filter(getProjectOptions.value, props.filtrate));

  const { modelValue: formValue } = useVModels(props, emits);
</script>

<style lang="less" scoped></style>