<!-- 文档预览面板 -->
<template>
    <div class="document-preview-panel">
        <div class="panel-content">
            <!-- 文档预览区域 -->
            <div class="document-viewer-wrapper">
                <!-- 左侧文档切换栏 -->
                <div class="document-sidebar">
                    <div
                        v-for="(doc, index) in documents"
                        :key="doc.id"
                        class="document-item"
                        :class="{ active: currentIndex === index }"
                        @click="switchDocument(index)"
                    >
                        {{ doc.title }}
                    </div>
                </div>
                <div v-if="currentDocument" class="document-viewer">
                    <div v-if="currentDocument.type === 'pdf'" class="embedded-viewer" :key="`pdf-${currentDocument.id}`">
                        <DocumentSearch :file-url="currentDocument.url" :key="`pdf-viewer-${currentDocument.id}`" />
                    </div>
                    <div v-else-if="currentDocument.type === 'word'" class="embedded-viewer" :key="`word-${currentDocument.id}`">
                        <DocumentSearchWord :file-url="currentDocument.url" :key="`word-viewer-${currentDocument.id}`" />
                    </div>
                    <div v-else-if="currentDocument.type === 'excel'" class="embedded-viewer" :key="`excel-${currentDocument.id}`">
                        <DocumentExcel :file-url="currentDocument.url" :key="`excel-viewer-${currentDocument.id}`" />
                    </div>
                    <div v-else class="document-placeholder">
                        <div class="placeholder-content">
                            <i class="el-icon-document placeholder-icon"></i>
                            <p class="placeholder-text">暂不支持的文件类型</p>
                            <p class="placeholder-desc">{{ currentDocument.title || currentDocument.url }}</p>
                        </div>
                    </div>
                </div>
                <div v-else class="empty-state">
                    <i class="el-icon-document-empty empty-icon"></i>
                    <p class="empty-text">暂无文档</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import DocumentSearch from '@/views/common/DocumentSearch.vue'
import DocumentSearchWord from '@/views/common/DocumentSearchWord.vue'
import DocumentExcel from '@/views/common/DocumentExcel.vue'

const WORD_EXTS = ['.doc', '.docx']
const PDF_EXTS = ['.pdf']
const EXCEL_EXTS = ['.xls', '.xlsx', '.csv', '.xlsm']

const DEFAULT_DOCUMENTS = [
    {
        id: 'sample-pdf',
        title: '示例 PDF 文档',
        url: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/10/30/fe5b46ea37554516a71e7c0c486d3715.pdf',
        type: 'pdf'
    },
    {
        id: 'sample-excel',
        title: '示例 Excel 文档',
        url: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/12/928206a2fdc74c349781f441d9c010f8.xlsx',
        type: 'excel'
    },
    {
        id: 'sample-word',
        title: '示例 Word 文档',
        url: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/11/887b35d28b2149b6a7555fb639be9411.docx',
        type: 'word'
    }
]

export default {
    name: 'DocumentPreviewPanel',
    components: {
        DocumentSearch,
        DocumentSearchWord,
        DocumentExcel
    },
    props: {
        tenderDocumentUrl: {
            type: String,
            default: ''
        },
        tenderDocumentTitle: {
            type: String,
            default: ''
        },
        bidDocumentUrl: {
            type: String,
            default: ''
        },
        bidDocumentTitle: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            documents: [],
            currentIndex: -1
        }
    },
    computed: {
        currentDocument() {
            return this.documents[this.currentIndex] || null
        }
    },
    created() {
        this.buildDocuments()
    },
    watch: {
        tenderDocumentUrl() {
            this.buildDocuments()
        },
        bidDocumentUrl() {
            this.buildDocuments()
        }
    },
    methods: {
        switchDocument(index) {
            if (index >= 0 && index < this.documents.length) {
                this.currentIndex = index
                const current = this.currentDocument
                this.$emit('document-switch', current?.id || 'none')
            }
        },
        resolveViewerType(url, title) {
            const value = (url || title || '').toLowerCase()
            if (!value) {
                return 'none'
            }
            if (PDF_EXTS.some(ext => value.includes(ext))) {
                return 'pdf'
            }
            if (WORD_EXTS.some(ext => value.includes(ext))) {
                return 'word'
            }
            if (EXCEL_EXTS.some(ext => value.includes(ext))) {
                return 'excel'
            }
            return 'unsupported'
        },
        buildDocuments() {
            const docs = []
            if (this.tenderDocumentUrl) {
                docs.push({
                    id: 'tender',
                    title: this.tenderDocumentTitle || '招标文件',
                    url: this.tenderDocumentUrl,
                    type: this.resolveViewerType(this.tenderDocumentUrl, this.tenderDocumentTitle)
                })
            }
            if (this.bidDocumentUrl) {
                docs.push({
                    id: 'bid',
                    title: this.bidDocumentTitle || '标段文件',
                    url: this.bidDocumentUrl,
                    type: this.resolveViewerType(this.bidDocumentUrl, this.bidDocumentTitle)
                })
            }
            if (!docs.length) {
                DEFAULT_DOCUMENTS.forEach(doc => docs.push({ ...doc }))
            }
            this.documents = docs
            this.currentIndex = docs.length ? 0 : -1
            const current = this.currentDocument
            this.$emit('document-switch', current?.id || 'none')
        }
    }
}
</script>

<style scoped lang="scss">
.document-preview-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;

    .panel-content {
        flex: 1;
        overflow: hidden;
        position: relative;

        .document-sidebar {
            position: absolute;
            right: 8px;
            top: 80px;
            bottom: 16px;
            width: 140px;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 100;
            pointer-events: none;

            .document-item {
                padding: 7px 16px;
                border-radius: 8px;
                background: #fff;
                color: #303133;
                font-size: 13px;
                line-height: 1.4;
                cursor: pointer;
                transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
                text-align: center;
                user-select: none;
                border: none;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                pointer-events: auto;
                position: relative;

                &:hover {
                    background: #f5f7fa;
                    color: #409EFF;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
                    transform: translateY(-1px);
                }

                &.active {
                    background: #409EFF;
                    color: #ffffff;
                    font-weight: 500;
                    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
                    transform: translateY(-1px);
                }
            }

            // 自定义滚动条样式
            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 3px;
                transition: background 0.3s;

                &:hover {
                    background: rgba(0, 0, 0, 0.3);
                }
            }
        }

        .document-viewer-wrapper {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .document-viewer {
            width: 100%;
            height: 100%;
            position: relative;

            .embedded-viewer {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            ::v-deep .embedded-viewer .document-search,
            ::v-deep .embedded-viewer .document-search-word,
            ::v-deep .embedded-viewer .document-excel {
                height: 100%;
                padding: 0;
                background: transparent;
                box-sizing: border-box;
            }

            ::v-deep .embedded-viewer .viewer-container {
                min-height: auto;
                border-radius: 0;
            }
        }

        .document-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #FAFAFA;

            .placeholder-content {
                text-align: center;

                .placeholder-icon {
                    font-size: 64px;
                    color: #C0C4CC;
                    margin-bottom: 16px;
                }

                .placeholder-text {
                    font-size: 16px;
                    color: #606266;
                    margin: 0 0 8px 0;
                }

                .placeholder-desc {
                    font-size: 14px;
                    color: #909399;
                    margin: 0;
                }
            }
        }

        .empty-state {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #FAFAFA;

            .empty-icon {
                font-size: 64px;
                color: #C0C4CC;
                margin-bottom: 16px;
            }

            .empty-text {
                font-size: 14px;
                color: #909399;
                margin: 0;
            }
        }
    }
}
</style>

