<script setup lang="ts">
const emits = defineEmits<{
  (e: 'update:modelValue', tags: string[]): void
}>()

defineProps({
	modelValue:{
		type: Array<String>,
	},
})

const onTagsChange = (tags: string[]) => {
  tags = tags.map((tag: string) => tag.trim())
	emits('update:modelValue', tags)
}
</script>

<template>
  <a-row type="flex" style="align-items: center;">
    <a-col style="width: 120px; text-align: right;">
      报告模板标签：
    </a-col>
    <a-col flex="1">
      <a-select
        :value="modelValue"
        mode="tags"
        :token-separators="[',', '，', ' ']"
        @change="onTagsChange"
        placeholder="模板标签，输入逗号、空格或者回车自动分割"
      ></a-select>
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">
.ant-select {
  width: 100%;
}
</style>