<template>
  <Select
    v-bind="$attrs"
    v-model="formValue"
    :options="activityTagOptions"
    :fallback-option="false"
    :placeholder="placeholder"
    :field-names="{ value: 'id', label: 'name' }"
    @exceed-limit="onTagExceedLimitError"
  />
</template>

<script lang="ts" setup>
  import { Message, Select } from '@arco-design/web-vue';
  import { computed, onMounted } from 'vue';
  import { useSelectionStore } from '@/store';
  import { isArray } from '@/utils/is';
  import { useVModels } from '@vueuse/core';

  type propType = { modelValue?: number | string | number[]; placeholder?: string; limitErrorMsg?: string };
  const props = withDefaults(defineProps<propType>(), { placeholder: '请选择', limitErrorMsg: '超出最大选中数' });
  const emits = defineEmits(['update:modelValue', 'update:loading']);

  const { modelValue: formValue } = useVModels(props, emits);

  const { activityTagOptions } = useSelectionStore();

  const tagIds = computed(() => activityTagOptions.map((item) => item.id));

  const onTagExceedLimitError = () => Message.warning({ content: props.limitErrorMsg, duration: 1500 });

  onMounted(() => {
    if (isArray(props.modelValue)) {
      emits('update:modelValue', props.modelValue.filter((item: number) => tagIds.value?.indexOf(item) !== -1) || []);
    }
  });
</script>

<style scoped></style>