<template>
	<p class="p-regular-rereg">
		<span class="text-regular" v-for="(segment, index) in processedText" :key="index">
			<span v-if="segment.isEntity" @click="$emit('onEntityClick', segment.entity)" class="entity-link">
				{{ segment.entity?.text_span }}
				<img :src="SearchIcon" :width="10" :height="10" alt="search" />
			</span>
			<span v-else>
				{{ segment.text }}
			</span>
		</span>
	</p>
</template>
<script lang="ts" setup>
import { TextEntity } from "@/api/intelligent";
import { ref, watch, onMounted } from "vue";
import SearchIcon from "./images/search.png";

export interface ProcessedTextSegment {
	text: string;
	isEntity: boolean;
	entity?: TextEntity;
}
const props = defineProps({
	text: {
		type: String,
		default: ""
	},
	entities: {
		type: Array<TextEntity>,
		default: () => []
	}
});
const emit = defineEmits(["onEntityClick"]);
// 处理后的文本段
const processedText = ref<ProcessedTextSegment[]>([]);

// 处理文本，识别并替换实体
const processText = () => {
	console.log("props.entities.length", props.entities.length);
	if (!props.text || !props.entities) {
		// console.log('props.text', props.entities.length)
		processedText.value = [{ text: "", isEntity: false }];
		return;
	}

	const result = [];
	let currentPosition = 0;

	// 按实体文本长度排序，优先匹配长文本
	const sortedEntities = [...props.entities].sort((a, b) => b.text_span.length - a.text_span.length);

	while (currentPosition < props.text.length) {
		let matched = false;

		for (const entity of sortedEntities) {
			const entityText = entity.text_span;
			const endPosition = currentPosition + entityText.length;

			if (props.text.substring(currentPosition, endPosition) === entityText) {
				// 如果当前位置是实体，添加到结果
				result.push({
					isEntity: true,
					entity: { ...entity }
				});
				currentPosition = endPosition;
				matched = true;
				break;
			}
		}

		if (!matched) {
			// 如果不是实体，收集普通文本
			let nextEntityStart = props.text.length;

			for (const entity of sortedEntities) {
				const pos = props.text.indexOf(entity.text_span, currentPosition);
				if (pos !== -1 && pos < nextEntityStart) {
					nextEntityStart = pos;
				}
			}

			if (nextEntityStart > currentPosition) {
				const plainText = props.text.substring(currentPosition, nextEntityStart);
				result.push({
					text: plainText,
					isEntity: false
				});
				currentPosition = nextEntityStart;
			} else {
				// 没有更多实体，添加剩余文本
				const remainingText = props.text.substring(currentPosition);
				if (remainingText) {
					result.push({
						text: remainingText,
						isEntity: false
					});
				}
				currentPosition = props.text.length;
			}
		}
	}

	processedText.value = result;
};
// 监听文本和实体变化
watch(() => props.text, processText);
watch(() => props.entities, processText, { deep: true });

// 初始化处理
onMounted(processText);
</script>
<style lang="scss" scoped>
@use "@/styles/common.scss";

.entity-link {
	color: var(--color-primary-100);
	&:hover {
		cursor: pointer;
	}
}

.p-regular-rereg {
	text-indent: 2em;
	margin: 4px 0;
}
</style>
