<script setup lang="ts">
import {nextTick, ref, useTemplateRef} from "vue";

const inputTagRef = useTemplateRef('inputTagRef');
const modelValue = defineModel();
const input = ref('');

const changeInput = (e) => {
    if (e.match(/#(\S+?)(?=\s)/g)) {
        modelValue.value.push(...e.match(/#(\S+?)(?=\s)/g).map(tag => tag.slice(1)));
        input.value = null;
        nextTick(() => {
            inputTagRef.value.blur();
            nextTick(() => {
                inputTagRef.value.focus();
            })
        })
    }
}

const pressEnter = () => {
    modelValue.value = modelValue.value.filter(v => v.match(/#(\S+?)(?=\s)/g));
}
</script>

<template>
    <a-input-tag
        ref="inputTagRef"
        :retain-input-value="false"
        @press-enter="pressEnter"
        @input-value-change="changeInput"
        v-model:model-value="modelValue"
        v-model:input-value="input"
        placeholder="请输入话题"
        unique-value>
    </a-input-tag>
</template>

<style scoped lang="scss">

</style>
