smart-bid-web/src/views/common/DocumentSearchWord.vue

<template>
    <div class="document-search-word">
        <div class="viewer-container">
            <transition name="slide-fade">
                <div v-if="showSearchBar" class="floating-search">
                    <div class="search-toolbar" :class="{ 'is-searching': searching }">
                        <div class="search-box">
                            <el-input v-model="keyword" class="search-input" placeholder="输入关键字搜索" clearable
                                ref="keywordInput" @keyup.enter.native="handleSearch" @clear="resetSearch">
                            </el-input>
                            <button class="icon-btn search-icon" :disabled="searching" @click="handleSearch">
                                <i class="el-icon-search" v-if="!searching"></i>
                                <i class="el-icon-loading" v-else></i>
                            </button>
                        </div>
                        <div class="search-status">
                            <span class="result-indicator">{{ resultDisplay }}</span>
                            <button class="icon-btn" :disabled="!searchResults.length" @click="goToPrevious">
                                <i class="el-icon-arrow-up"></i>
                            </button>
                            <button class="icon-btn" :disabled="!searchResults.length" @click="goToNext">
                                <i class="el-icon-arrow-down"></i>
                            </button>
                            <button class="icon-btn" @click="handleCloseSearch">
                                <i class="el-icon-close"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </transition>
            <button v-if="!showSearchBar" class="floating-search-btn" @click="toggleSearchBar">
                <i class="el-icon-search"></i>
            </button>
            <div ref="docWrapper" class="doc-wrapper">
                <div ref="docxContainer" class="doc-content"></div>
            </div>

            <transition name="fade">
                <div v-if="loading" key="loading" class="overlay state-panel">
                    <i class="el-icon-loading state-icon"></i>
                    <p>正在加载 Word 文档，请稍候...</p>
                </div>
                <div v-else-if="error" key="error" class="overlay state-panel">
                    <i class="el-icon-warning-outline state-icon"></i>
                    <p>{{ error }}</p>
                    <el-button type="primary" @click="reload">重新加载</el-button>
                </div>
                <div v-else-if="!docUrl" key="no-url" class="overlay state-panel">
                    <i class="el-icon-document state-icon"></i>
                    <p>暂未指定 Word 文件，请通过路由参数 url 传入文件地址。</p>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
import * as docxPreview from 'docx-preview/dist/docx-preview.js'

const DEFAULT_DOC_URL = 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/11/887b35d28b2149b6a7555fb639be9411.docx'

export default {
    name: 'DocumentSearchWord',
    props: {
        fileUrl: {
            type: String,
            default: ''
        }
    },
    computed: {
        resultDisplay() {
            const total = this.searchResults.length
            if (!total) return '0/0'
            const current = this.currentResultIndex >= 0 ? this.currentResultIndex + 1 : 0
            return `${current}/${total}`
        }
    },
    data() {
        return {
            docUrl: '',
            keyword: '',
            loading: false,
            error: null,
            searchResults: [],
            currentResultIndex: -1,
            searching: false,
            searchSegments: [],
            docRendered: false,
            abortController: null,
            scrollAnimationFrame: null,
            showSearchBar: false,
        }
    },
    mounted() {
        if (!this.docUrl) {
            const initialUrl = this.fileUrl || this.$route?.query?.url || DEFAULT_DOC_URL
            this.applyDocUrl(initialUrl)
        }
    },
    beforeDestroy() {
        this.cancelFetch()
        this.cancelScrollAnimation()
    },
    watch: {
        fileUrl: {
            immediate: true,
            handler(newVal) {
                if (newVal) {
                    this.applyDocUrl(newVal)
                }
            }
        },
        '$route.query.url'(newUrl, oldUrl) {
            if (this.fileUrl) return
            if (newUrl !== oldUrl) {
                const target = newUrl || DEFAULT_DOC_URL
                this.applyDocUrl(target)
            }
        },
    },
    methods: {
        toggleSearchBar() {
            this.showSearchBar = true
            this.$nextTick(() => {
                if (this.$refs.keywordInput) {
                    this.$refs.keywordInput.focus()
                }
            })
        },
        handleCloseSearch() {
            this.keyword = ''
            this.resetSearch()
            this.showSearchBar = false
        },
        applyDocUrl(url) {
            const resolved = url || ''
            if (resolved === this.docUrl) {
                if (resolved) {
                    this.loadDocument()
                }
                return
            }
            this.docUrl = resolved
            if (this.docUrl) {
                this.loadDocument()
            } else {
                this.resetViewerState()
            }
        },
        cancelFetch() {
            if (this.abortController) {
                this.abortController.abort()
                this.abortController = null
            }
        },

        async loadDocument() {
            if (!this.docUrl) return
            this.loading = true
            this.error = null
            this.docRendered = false
            this.clearHighlights()
            this.searchSegments = []
            this.cancelFetch()
            const container = this.$refs.docxContainer
            if (container) {
                container.innerHTML = ''
            }

            try {
                const headers = {}
                const token = this.$store?.getters?.token || window?.sessionStorage?.getItem('token')
                if (token) {
                    headers.Authorization = token.startsWith('Bearer ') ? token : `Bearer ${token}`
                }
                this.abortController = new AbortController()
                const response = await fetch(this.docUrl, {
                    headers,
                    credentials: 'include',
                    signal: this.abortController.signal,
                })
                if (!response.ok) {
                    throw new Error(`加载 Word 文档失败：${response.statusText}`)
                }
                const arrayBuffer = await response.arrayBuffer()
                if (!container) {
                    throw new Error('未找到文档容器')
                }
                await docxPreview.renderAsync(arrayBuffer, container, null, {
                    className: 'docx-viewer',
                    inWrapper: true,
                    hideWrapperOnPrint: false,
                    ignoreWidth: false,
                    ignoreHeight: false,
                    ignoreFonts: false,
                    breakPages: false,
                    ignoreLastRenderedPageBreak: true,
                    experimental: false,
                    trimXmlDeclaration: true,
                    useBase64URL: false,
                    renderChanges: false,
                    renderHeaders: true,
                    renderFooters: true,
                    renderFootnotes: true,
                    renderEndnotes: true,
                    renderComments: false,
                    renderAltChunks: true,
                    useMathMLPolyfill: false,
                    debug: false,
                })
                this.normalizeTableStyles(container)
                this.docRendered = true
                this.loading = false
                this.$nextTick(() => {
                    this.prepareSearchSegments()
                    if (this.keyword.trim()) {
                        this.highlightMatches()
                    }
                })
            } catch (error) {
                if (error.name === 'AbortError') return
                console.error('Word 文档预览失败:', error)
                this.loading = false
                this.error = error?.message || 'Word 文档加载失败，请稍后重试'
                this.docRendered = false
            } finally {
                this.abortController = null
            }
        },

        getElementTextContent(element) {
            if (!element) return ''
            return (element.textContent || '').trim()
        },

        getSearchableTextContent(element) {
            if (!element) return ''
            let text = ''
            const walker = document.createTreeWalker(
                element,
                NodeFilter.SHOW_TEXT,
                {
                    acceptNode: (node) => {
                        const parent = node.parentElement
                        if (!parent) return NodeFilter.FILTER_REJECT
                        const tagName = parent.tagName ? parent.tagName.toLowerCase() : ''
                        if (tagName === 'mark' || tagName === 'script' || tagName === 'style' || tagName === 'noscript') {
                            return NodeFilter.FILTER_REJECT
                        }
                        return NodeFilter.FILTER_ACCEPT
                    }
                }
            )
            let node
            while ((node = walker.nextNode())) {
                if (node.textContent) {
                    text += node.textContent
                }
            }
            return text
        },

        prepareSearchSegments(forceReset = false) {
            if (!this.docRendered) {
                if (forceReset) {
                    this.searchSegments = []
                }
                return
            }
            const container = this.$refs.docxContainer
            if (!container) return

            const selectors = [
                '.docx-viewer p',
                '.docx-viewer li',
                '.docx-viewer td',
                '.docx-viewer th',
                '.docx-viewer h1',
                '.docx-viewer h2',
                '.docx-viewer h3',
                '.docx-viewer h4',
                '.docx-viewer h5',
                '.docx-viewer h6',
                '.docx-viewer span',
            ]

            const allElements = Array.from(container.querySelectorAll(selectors.join(',')))
            const targetTags = ['p', 'li', 'td', 'th', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span']
            
            const elements = allElements.filter((el) => {
                const text = this.getElementTextContent(el)
                if (text.length === 0) return false
                
                let parent = el.parentElement
                while (parent && parent !== container) {
                    const parentTag = parent.tagName ? parent.tagName.toLowerCase() : ''
                    if (targetTags.includes(parentTag)) {
                        return false
                    }
                    parent = parent.parentElement
                }
                return true
            })

            elements.forEach((el, idx) => {
                if (typeof el.dataset.originalHtml === 'undefined') {
                    const cleanHtml = this.cleanHtmlFromMarks(el.innerHTML)
                    el.dataset.originalHtml = cleanHtml
                } else {
                    el.dataset.originalHtml = this.cleanHtmlFromMarks(el.dataset.originalHtml)
                }
                if (typeof el.dataset.originalText === 'undefined') {
                    el.dataset.originalText = this.getElementTextContent(el)
                }
                el.dataset.segmentIndex = idx
            })

            this.searchSegments = elements
        },

        async handleSearch() {
            const keyword = this.keyword.trim()
            if (!keyword) {
                this.resetSearch()
                return
            }
            if (!this.docRendered) {
                this.prepareSearchSegments()
            }
            this.searching = true
            await this.$nextTick()
            try {
                this.highlightMatches()
            } finally {
                this.searching = false
            }
        },

        cleanHtmlFromMarks(html) {
            if (!html) return html
            const tempDiv = document.createElement('div')
            tempDiv.innerHTML = html
            const marks = tempDiv.querySelectorAll('mark')
            marks.forEach(mark => {
                const parent = mark.parentNode
                while (mark.firstChild) {
                    parent.insertBefore(mark.firstChild, mark)
                }
                parent.removeChild(mark)
            })
            return tempDiv.innerHTML
        },

        collectTextNodes(element, textNodes) {
            if (!element) return
            const walker = document.createTreeWalker(
                element,
                NodeFilter.SHOW_TEXT,
                {
                    acceptNode: (node) => {
                        const parent = node.parentElement
                        if (!parent) return NodeFilter.FILTER_REJECT
                        const tagName = parent.tagName ? parent.tagName.toLowerCase() : ''
                        if (tagName === 'mark' || tagName === 'script' || tagName === 'style' || tagName === 'noscript') {
                            return NodeFilter.FILTER_REJECT
                        }
                        return NodeFilter.FILTER_ACCEPT
                    }
                }
            )
            let node
            while ((node = walker.nextNode())) {
                if (node.textContent) {
                    textNodes.push(node)
                }
            }
        },

        highlightMatches() {
            const keyword = this.keyword.trim()
            if (!keyword) {
                this.resetSearch()
                return
            }
            if (!this.searchSegments.length) {
                this.prepareSearchSegments()
            }

            const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
            const pattern = new RegExp(`(${escapedKeyword})`, 'gi')

            this.clearHighlights()

            const results = []
            let totalTextMatches = 0
            
            this.searchSegments.forEach((el, segmentIndex) => {
                const originalHtml = el.dataset.originalHtml
                if (typeof originalHtml === 'undefined') return
                
                const cleanHtml = this.cleanHtmlFromMarks(originalHtml)
                el.innerHTML = cleanHtml
                el.dataset.originalHtml = cleanHtml
                
                const searchableText = this.getSearchableTextContent(el)
                if (!searchableText) return
                
                pattern.lastIndex = 0
                const textMatchCount = (searchableText.match(pattern) || []).length
                if (textMatchCount === 0) return
                
                totalTextMatches += textMatchCount
                
                const existingMarks = el.querySelectorAll('mark')
                if (existingMarks.length > 0) {
                    console.warn(`Segment ${segmentIndex} still has ${existingMarks.length} mark tags after cleaning`)
                }
                
                const textNodes = []
                this.collectTextNodes(el, textNodes)
                
                if (textNodes.length === 0) return
                
                const markIndexRef = { value: 0 }
                
                const nodeMap = []
                let fullText = ''
                let currentOffset = 0
                
                textNodes.forEach((textNode, nodeIndex) => {
                    const text = textNode.textContent || ''
                    const startOffset = currentOffset
                    const endOffset = currentOffset + text.length
                    
                    nodeMap.push({
                        textNode,
                        text,
                        startOffset,
                        endOffset,
                        nodeIndex
                    })
                    
                    fullText += text
                    currentOffset = endOffset
                })
                
                if (!fullText) return
                
                pattern.lastIndex = 0
                const allMatches = []
                let match
                while ((match = pattern.exec(fullText)) !== null) {
                    allMatches.push({
                        start: match.index,
                        end: match.index + match[0].length,
                        text: match[0]
                    })
                }
                
                if (allMatches.length === 0) return
                
                const nodeReplacements = new Map()
                const processedMatches = new Set()
                
                allMatches.forEach((matchInfo, matchIndex) => {
                    const matchStart = matchInfo.start
                    const matchEnd = matchInfo.end
                    const matchKey = `${matchStart}-${matchEnd}`
                    
                    if (processedMatches.has(matchKey)) {
                        return
                    }
                    processedMatches.add(matchKey)
                    
                    const affectedNodes = []
                    for (let i = 0; i < nodeMap.length; i++) {
                        const nodeInfo = nodeMap[i]
                        if (nodeInfo.endOffset > matchStart && nodeInfo.startOffset < matchEnd) {
                            affectedNodes.push({
                                ...nodeInfo,
                                matchStartInNode: Math.max(0, matchStart - nodeInfo.startOffset),
                                matchEndInNode: Math.min(nodeInfo.text.length, matchEnd - nodeInfo.startOffset)
                            })
                        }
                    }
                    
                    if (affectedNodes.length === 0) return
                    
                    affectedNodes.forEach((nodeInfo, idx) => {
                        if (!nodeReplacements.has(nodeInfo.nodeIndex)) {
                            nodeReplacements.set(nodeInfo.nodeIndex, {
                                textNode: nodeInfo.textNode,
                                ranges: [],
                                matchIndices: new Set()
                            })
                        }
                        
                        const replacement = nodeReplacements.get(nodeInfo.nodeIndex)
                        const isFirst = idx === 0
                        const isLast = idx === affectedNodes.length - 1
                        
                        if (isFirst && isLast) {
                            const rangeKey = `${nodeInfo.matchStartInNode}-${nodeInfo.matchEndInNode}-${matchIndex}`
                            if (!replacement.matchIndices.has(rangeKey)) {
                                replacement.ranges.push({
                                    start: nodeInfo.matchStartInNode,
                                    end: nodeInfo.matchEndInNode,
                                    isFullMatch: true,
                                    matchIndex: matchIndex,
                                    shouldAddToResults: true
                                })
                                replacement.matchIndices.add(rangeKey)
                            }
                        } else if (isFirst) {
                            const rangeKey = `${nodeInfo.matchStartInNode}-${nodeInfo.text.length}-${matchIndex}`
                            if (!replacement.matchIndices.has(rangeKey)) {
                                replacement.ranges.push({
                                    start: nodeInfo.matchStartInNode,
                                    end: nodeInfo.text.length,
                                    isStart: true,
                                    matchIndex: matchIndex,
                                    shouldAddToResults: true
                                })
                                replacement.matchIndices.add(rangeKey)
                            }
                        } else if (isLast) {
                            const rangeKey = `0-${nodeInfo.matchEndInNode}-${matchIndex}`
                            if (!replacement.matchIndices.has(rangeKey)) {
                                replacement.ranges.push({
                                    start: 0,
                                    end: nodeInfo.matchEndInNode,
                                    isEnd: true,
                                    matchIndex: matchIndex,
                                    shouldAddToResults: false
                                })
                                replacement.matchIndices.add(rangeKey)
                            }
                        } else {
                            const rangeKey = `0-${nodeInfo.text.length}-${matchIndex}`
                            if (!replacement.matchIndices.has(rangeKey)) {
                                replacement.ranges.push({
                                    start: 0,
                                    end: nodeInfo.text.length,
                                    isMiddle: true,
                                    matchIndex: matchIndex,
                                    shouldAddToResults: false
                                })
                                replacement.matchIndices.add(rangeKey)
                            }
                        }
                    })
                })
                
                for (let i = textNodes.length - 1; i >= 0; i--) {
                    const textNode = textNodes[i]
                    const parent = textNode.parentNode
                    if (!parent || !document.body.contains(textNode)) continue
                    
                    if (nodeReplacements.has(i)) {
                        const replacement = nodeReplacements.get(i)
                        const originalText = replacement.textNode.textContent
                        let ranges = replacement.ranges
                        
                        ranges.sort((a, b) => {
                            if (a.start !== b.start) return a.start - b.start
                            return a.end - b.end
                        })
                        
                        const mergedRanges = []
                        ranges.forEach(range => {
                            if (mergedRanges.length === 0) {
                                mergedRanges.push({ ...range })
                            } else {
                                const lastRange = mergedRanges[mergedRanges.length - 1]
                                if (range.start <= lastRange.end) {
                                    lastRange.end = Math.max(lastRange.end, range.end)
                                } else {
                                    mergedRanges.push({ ...range })
                                }
                            }
                        })
                        
                        const fragment = document.createDocumentFragment()
                        let lastIndex = 0
                        
                        mergedRanges.forEach(range => {
                            if (lastIndex < range.start) {
                                const beforeText = originalText.substring(lastIndex, range.start)
                                if (beforeText) {
                                    fragment.appendChild(document.createTextNode(beforeText))
                                }
                            }
                            
                            const mark = document.createElement('mark')
                            mark.className = 'search-highlight'
                            mark.textContent = originalText.substring(range.start, range.end)
                            fragment.appendChild(mark)
                            
                            if (range.shouldAddToResults !== false) {
                                results.push({
                                    element: mark,
                                    segmentIndex: segmentIndex,
                                    markIndex: markIndexRef.value,
                                    parentElement: el
                                })
                            }
                            
                            markIndexRef.value++
                            
                            lastIndex = range.end
                        })
                        
                        if (lastIndex < originalText.length) {
                            const afterText = originalText.substring(lastIndex)
                            if (afterText) {
                                fragment.appendChild(document.createTextNode(afterText))
                            }
                        }
                        
                        if (fragment.childNodes.length > 0) {
                            try {
                                parent.replaceChild(fragment, textNode)
                            } catch (e) {
                                console.warn(`Failed to replace text node in segment ${segmentIndex}:`, e)
                            }
                        }
                    }
                }
            })

            if (results.length !== totalTextMatches) {
                console.warn(`Total matches mismatch: expected ${totalTextMatches}, got ${results.length}`)
            }

            this.searchResults = results
            
            if (!results.length) {
                this.currentResultIndex = -1
                this.$message && this.$message.info(`未找到"${keyword}"相关内容`)
                return
            }

            this.currentResultIndex = 0
            this.updateActiveHighlight()
            this.$nextTick(() => {
                this.navigateToResult(this.currentResultIndex, false)
            })
        },

        getResultElement(result) {
            if (!result) return null
            
            if (result.element && document.body.contains(result.element)) {
                return result.element
            }
            
            if (result.parentElement && result.segmentIndex !== undefined && result.markIndex !== undefined) {
                const parent = result.parentElement
                if (document.body.contains(parent)) {
                    const marks = parent.querySelectorAll('mark.search-highlight')
                    if (marks[result.markIndex]) {
                        result.element = marks[result.markIndex]
                        return result.element
                    }
                }
            }
            
            if (result.segmentIndex !== undefined && result.markIndex !== undefined && this.searchSegments[result.segmentIndex]) {
                const segment = this.searchSegments[result.segmentIndex]
                if (document.body.contains(segment)) {
                    const marks = segment.querySelectorAll('mark.search-highlight')
                    if (marks[result.markIndex]) {
                        result.element = marks[result.markIndex]
                        result.parentElement = segment
                        return result.element
                    }
                }
            }
            
            return null
        },

        updateActiveHighlight() {
            this.searchResults.forEach((item, idx) => {
                const element = this.getResultElement(item)
                if (!element) return
                
                if (idx === this.currentResultIndex) {
                    element.classList.add('is-active', 'is-current')
                } else {
                    element.classList.remove('is-active', 'is-current')
                }
            })
        },

        calculateOffsetTop(element, container) {
            let offset = 0
            let node = element
            while (node && node !== container) {
                offset += node.offsetTop || 0
                node = node.offsetParent
            }
            return offset
        },

        cancelScrollAnimation() {
            if (this.scrollAnimationFrame) {
                cancelAnimationFrame(this.scrollAnimationFrame)
                this.scrollAnimationFrame = null
            }
        },

        smoothScrollTo(container, target, baseDuration = 350) {
            if (!container) return
            const maxScroll = container.scrollHeight - container.clientHeight
            const finalTarget = Math.min(Math.max(target, 0), Math.max(maxScroll, 0))
            const start = container.scrollTop
            const change = finalTarget - start
            if (Math.abs(change) < 1) {
                container.scrollTop = finalTarget
                return
            }

            const distance = Math.abs(change)
            const viewportHeight = container.clientHeight
            const distanceFactor = Math.min(distance / Math.max(viewportHeight, 1), 2.2)
            const duration = Math.min(600, baseDuration + distanceFactor * 90)

            const startTime = performance.now()
            this.cancelScrollAnimation()

            const easeOutExpo = (t) => {
                return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
            }

            const step = (now) => {
                const elapsed = now - startTime
                const progress = Math.min(elapsed / duration, 1)
                const eased = easeOutExpo(progress)
                const currentPosition = start + change * eased
                
                container.scrollTop = Math.min(Math.max(currentPosition, 0), maxScroll)

                if (progress < 1) {
                    this.scrollAnimationFrame = requestAnimationFrame(step)
                } else {
                    container.scrollTop = finalTarget
                    this.scrollAnimationFrame = null
                }
            }

            this.scrollAnimationFrame = requestAnimationFrame(step)
        },

        navigateToResult(index, useSmoothScroll = true) {
            if (!this.searchResults.length || index < 0 || index >= this.searchResults.length) return
            this.currentResultIndex = index
            this.updateActiveHighlight()

            this.$nextTick(() => {
                requestAnimationFrame(() => {
                    requestAnimationFrame(() => {
                        const result = this.searchResults[this.currentResultIndex]
                        const target = this.getResultElement(result)
                        const wrapper = this.$refs.docWrapper
                        if (!target || !wrapper) return

                        if (!document.body.contains(target)) {
                            return
                        }

                        const targetRect = target.getBoundingClientRect()
                        if (targetRect.width === 0 && targetRect.height === 0) {
                            return
                        }

                        const wrapperRect = wrapper.getBoundingClientRect()
                        const margin = 24
                        
                        const isInViewport = targetRect.top >= wrapperRect.top + margin && 
                                           targetRect.bottom <= wrapperRect.bottom - margin &&
                                           targetRect.left >= wrapperRect.left &&
                                           targetRect.right <= wrapperRect.right
                        
                        if (isInViewport) {
                            return
                        }

                        const performScroll = () => {
                            try {
                                const currentScrollTop = wrapper.scrollTop
                                const targetTopRelativeToWrapper = targetRect.top - wrapperRect.top + currentScrollTop
                                const desiredScrollTop = Math.max(targetTopRelativeToWrapper - margin, 0)
                                
                                if (useSmoothScroll) {
                                    this.smoothScrollTo(wrapper, desiredScrollTop)
                                } else {
                                    this.cancelScrollAnimation()
                                    wrapper.scrollTop = desiredScrollTop
                                }
                            } catch (error) {
                                try {
                                    let absoluteTop = 0
                                    let node = target
                                    while (node && node !== wrapper) {
                                        absoluteTop += node.offsetTop || 0
                                        node = node.offsetParent
                                    }
                                    const desiredScrollTop = Math.max(absoluteTop - margin, 0)
                                    
                                    if (useSmoothScroll) {
                                        this.smoothScrollTo(wrapper, desiredScrollTop)
                                    } else {
                                        this.cancelScrollAnimation()
                                        wrapper.scrollTop = desiredScrollTop
                                    }
                                } catch (e) {
                                    console.error('Scroll error:', e)
                                }
                            }
                        }

                        performScroll()
                    })
                })
            })
        },

        async goToPrevious() {
            if (!this.searchResults.length) return
            let targetIndex = this.currentResultIndex
            if (targetIndex === -1) {
                targetIndex = this.searchResults.length - 1
            } else {
                targetIndex -= 1
                if (targetIndex < 0) {
                    targetIndex = this.searchResults.length - 1
                }
            }
            this.navigateToResult(targetIndex)
        },

        async goToNext() {
            if (!this.searchResults.length) return
            let targetIndex = this.currentResultIndex
            if (targetIndex === -1) {
                targetIndex = 0
            } else {
                targetIndex += 1
                if (targetIndex > this.searchResults.length - 1) {
                    targetIndex = 0
                }
            }
            this.navigateToResult(targetIndex)
        },

        clearHighlights() {
            if (!this.searchSegments.length) return
            this.searchSegments.forEach((el) => {
                if (typeof el.dataset.originalHtml !== 'undefined') {
                    el.innerHTML = el.dataset.originalHtml
                }
            })
        },

        resetSearch() {
            this.clearHighlights()
            this.searchResults = []
            this.currentResultIndex = -1
        },

        resetViewerState() {
            this.clearHighlights()
            this.searchResults = []
            this.currentResultIndex = -1
            this.searchSegments = []
            this.docRendered = false
            this.loading = !!this.docUrl
            this.error = null
            const container = this.$refs.docxContainer
            if (container) {
                container.innerHTML = ''
            }
        },

        reload() {
            if (!this.docUrl) return
            this.loadDocument()
        },

        normalizeTableStyles(container) {
            if (!container) return
            const tables = container.querySelectorAll('table')
            tables.forEach((table) => {
                table.style.width = 'auto'
                table.style.tableLayout = 'auto'
                table.style.textAlign = 'left'
                table.style.margin = '0 auto'
                const pTags = table.querySelectorAll('td p.docx-viewer_tableparagraph')
                pTags.forEach((p) => {
                    p.style.lineHeight = '1.2'
                })
            })
        }
    },
}
</script>

<style scoped lang="scss">
.document-search-word {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 84px);
    background: #f5f7fa;
    padding: 16px;
    box-sizing: border-box;
}

.document-search-word article.docx-article-wrapper {
    display: block;
    margin: 0 auto 32px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 48px 56px;
    box-sizing: border-box;
    color: #303133;
    line-height: 1.75;
    font-size: 14px;
}

.floating-search {
    position: absolute;
    top: 20px;
    right: 20px;
    width: auto;
    max-width: calc(100% - 40px);
    z-index: 6;
    pointer-events: none;
}

.floating-search-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #2b68ff;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(31, 114, 234, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 5;
}

.floating-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(31, 114, 234, 0.3);
}

.search-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 999px;
    padding: 8px 12px;
    box-shadow: 0 8px 26px rgba(31, 114, 234, 0.18);
    border: 1px solid rgba(226, 231, 239, 0.8);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

.search-toolbar::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    pointer-events: none;
}

.search-toolbar.is-searching::after {
    border-color: rgba(43, 104, 255, 0.4);
    animation: search-pulse 1.2s ease-in-out infinite;
}

@keyframes search-pulse {
    0% {
        opacity: 0.25;
        transform: scale(0.98);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.25;
        transform: scale(0.98);
    }
}

.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
    opacity: 0;
    transform: translateY(-6px);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #e4e7f0;
    border-radius: 999px;
    padding: 0 6px 0 10px;
}

.search-input {
    width: 190px;
}

.search-input ::v-deep .el-input__inner {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    height: 30px;
    font-size: 13px;
}

.search-input ::v-deep .el-input__suffix,
.search-input ::v-deep .el-input__prefix {
    display: none;
}

.icon-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c7388;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.icon-btn:hover {
    background: rgba(64, 158, 255, 0.12);
    color: #2b68ff;
}

.icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.search-icon {
    background: #2b68ff;
    color: #fff;
}

.search-icon:hover {
    background: #1d4fd8;
    color: #fff;
}

.search-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-indicator {
    font-size: 12px;
    color: #4f5875;
    padding-left: 10px;
    font-weight: 500;
}


.viewer-container {
    flex: 1;
    background: #fafbfc;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.doc-wrapper {
    flex: 1;
    padding: 24px;
    background: #fafbfc;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.doc-content {
    max-width: 960px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 48px 56px;
}

::v-deep .docx-wrapper {
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

::v-deep .docx-viewer-wrapper>section.docx-viewer {
    background: #ffffff;
    box-shadow: none;
    margin-bottom: 5px !important;
}


.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 247, 255, 0.92);
    z-index: 10;
    text-align: center;
}

.state-panel {
    flex-direction: column;
    gap: 12px;
    color: #6072a1;
}

.state-icon {
    font-size: 28px;
    color: #1f72ea;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.25s ease;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

::v-deep .search-highlight {
    background: rgba(255, 241, 168, 0.9);
    padding: 0 2px;
    border-radius: 2px;
}

::v-deep .search-highlight.is-active,
::v-deep .search-highlight.is-current {
    background: #206dff !important;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(32, 109, 255, 0.35);
    border-radius: 4px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
</style>