<template>
    <p class="p-regular-rereg">
        <span class="text-regular" v-for="(segment, index) in processedText" :key="index">
            <a v-if="segment.isEntity" :href="`https://cn.bing.com/search?q=${segment.entity?.text_span}`"
                class="entity-link" target="_blank" rel="noopener noreferrer">
                {{ segment.entity?.text_span }}
                <img :src="SearchIcon" :width="10" :height="10" alt="search" />
            </a>
            <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 processedText = ref<ProcessedTextSegment[]>([])
// 处理文本，识别并替换实体
const processText = () => {
    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);
}

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