<template>
  <Select
    v-bind="$attrs"
    v-model="value"
    :options="options"
    :fallback-option="false"
    :placeholder="placeholder"
    :virtual-list-props="{ height: 200 }"
    :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 { Tag } from '@/types/tag';
import { storeToRefs } from 'pinia';
import { useSelectionStore } from '@/store';
import { isArray } from '@arco-design/web-vue/es/_utils/is';

interface propType {
  modelValue?: number | string | number[];
  placeholder?: string;
}

const props = withDefaults(defineProps<propType>(), { placeholder: '请选择' });
const emits = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>();

const onTagExceedLimitError = () => Message.warning({ content: '关联标签最多选中3个', duration: 1500 });

const value = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});

const { getTagOptions } = storeToRefs(useSelectionStore());
const options = computed(() => getTagOptions.value.filter((item: Tag) => item.type === 1));

const tagIds = computed(() => options.value?.map((item: Tag) => item.id));

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

<style scoped></style>