<template>
  <div class="tag-list">
    <div v-for="(item, index) in tags" :key="index" class="tag-item" @click="handleClick(item)">
      <span class="tag-text">{{ item }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { onMounted } from "vue";
import {
  SCROLL_TO_BOTTOM,
  SEND_MESSAGE_CONTENT_TEXT,
} from "@/constants/constant";

const props = defineProps({
  question: {
    type: String,
    default: "",
  },
});

const tags = ref([]);

const handleClick = (item) => {
  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
};

onMounted(() => {
  tags.value = props.question.split(/[&|;]/).filter((tag) => tag.trim() !== "");
  nextTick(() => {
    setTimeout(() => {
      uni.$emit(SCROLL_TO_BOTTOM, true);
    }, 300);
  });
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
