<!--
 * @Date: 2025-01-21
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-10-21 15:20:39
 * @FilePath: /mlaj/src/components/ui/PdfViewer.vue
 * @Description: PDF预览组件 - 使用pdf-vue3库
-->
<template>
    <van-popup v-if="show" :show="show" @update:show="emit('update:show', $event)" position="right"
        :style="{ height: '100%', width: '100%' }">
        <div class="pdf-viewer-container">
            <!-- PDF内容区域 -->
            <div class="pdf-content" :class="{ 'pdf-no-select': preventSave }">
                <PDF v-if="url && show && !loadingError" :src="url" :showProgress="true" :progressColor="'#1989fa'"
                    :showPageTooltip="true" :showBackToTopBtn="true" :scrollThreshold="300"
                    :pdfWidth="`${Math.round(100 * zoomLevel)}%`"
                    :rowGap="8" :page="1" :cMapUrl="'https://unpkg.com/pdfjs-dist@3.7.107/cmaps/'"
                    :withCredentials="false" :useSystemFonts="true" :stopAtErrors="false" :disableFontFace="false"
                    :disableRange="false" :disableStream="false" :disableAutoFetch="false" @onProgress="handleProgress"
                    @onComplete="handleComplete" @onScroll="handleScroll" @onPageChange="handlePageChange"
                    @onPdfInit="handlePdfInit" @onError="handlePdfError" />

                <!-- 错误状态显示 -->
                <div v-if="loadingError" class="error-container">
                    <div class="error-content">
                        <van-icon name="warning-o" size="48" color="#ff4444" />
                        <div class="error-title">加载失败</div>
                        <div class="error-message">{{ errorMessage }}</div>
                        <van-button type="primary" size="small" @click="retryLoad" class="retry-btn">
                            重新加载
                        </van-button>
                    </div>
                </div>
            </div>

            <!-- 关闭按钮 -->
            <van-button class="close-btn" type="default" icon="cross" round @click="emit('update:show', false)" />

            <!-- 缩放控制按钮 -->
            <div v-if="!loading && !loadingError" class="zoom-controls">
                <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" />
                <div class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</div>
                <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" />
                <van-button class="zoom-btn zoom-reset-btn" type="default" round @click="resetZoom">
                    <van-icon name="replay" size="16" />
                </van-button>
            </div>

            <!-- 加载遮罩 -->
            <van-overlay :show="loading && !loadingError">
                <div class="wrapper" @click.stop>
                    <div class="loading-content">
                        <!-- 进度环形图 -->
                        <div class="progress-circle">
                            <div class="progress-percent">{{ loadingProgress }}%</div>
                        </div>

                        <!-- 加载文字 -->
                        <div class="loading-text">
                            <div class="loading-title">{{ title }}</div>
                            <div class="loading-subtitle">
                                {{ loadingProgress < 10 ? '正在连接服务器...' : loadingProgress < 50 ? '正在下载文件...' :
                                    loadingProgress < 90 ? '正在解析文档...' : '即将完成...' }} </div>
                            </div>
                        </div>
                    </div>
            </van-overlay>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import PDF from "pdf-vue3";

/**
 * 组件属性定义
 */
const props = defineProps({
    // 是否显示弹窗
    show: {
        type: Boolean,
        default: false
    },
    // PDF文件URL
    url: {
        type: String,
        default: ''
    },
    // PDF标题
    title: {
        type: String,
        default: ''
    },
    // 是否防止保存（禁用右键、长按等）
    preventSave: {
        type: Boolean,
        default: true
    }
});

/**
 * 事件定义
 */
const emit = defineEmits(['update:show', 'onLoad', 'onProgress', 'onComplete']);

// 响应式数据
const loading = ref(true);
const loadingProgress = ref(0);
const loadingError = ref(false);
const errorMessage = ref('');
const zoomLevel = ref(1); // 缩放级别，1为100%
const scrollPosition = ref({ x: 0, y: 0 }); // 记录滚动位置

/**
 * 监听show属性变化，控制PDF加载
 */
watch(() => props.show, (newVal) => {
    if (newVal && props.url) {
        // 重置所有状态
        loading.value = true;
        loadingError.value = false;
        loadingProgress.value = 0;
        errorMessage.value = '';
        zoomLevel.value = 1; // 重置缩放级别
    } else if (!newVal) {
        // 弹窗关闭时重置状态
        loading.value = true;
        loadingError.value = false;
        loadingProgress.value = 0;
        errorMessage.value = '';
        zoomLevel.value = 1; // 重置缩放级别
    }
});

/**
 * 监听URL变化，重新加载PDF
 */
watch(() => props.url, (newUrl) => {
    if (newUrl && props.show) {
        // URL变化时重置状态
        loading.value = true;
        loadingError.value = false;
        loadingProgress.value = 0;
        errorMessage.value = '';
        zoomLevel.value = 1; // 重置缩放级别
    }
});

/**
 * 处理PDF下载进度
 * @param {number} loadRatio - 加载进度 0-100
 */
const handleProgress = (loadRatio) => {
    loadingProgress.value = Math.round(loadRatio);
    emit('onProgress', loadRatio);
};

/**
 * 处理PDF下载完成
 */
const handleComplete = () => {
    loading.value = false;
    loadingError.value = false;
    loadingProgress.value = 100;
    emit('onLoad', false);
    emit('onComplete');
};

/**
 * 处理PDF滚动事件
 * @param {number} scrollOffset - 滚动偏移量
 */
const handleScroll = (scrollOffset) => {
    // 记录当前滚动位置
    const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
    if (pdfContainer) {
        scrollPosition.value = {
            x: pdfContainer.scrollLeft,
            y: pdfContainer.scrollTop
        };
    }
};

/**
 * 处理页面变化事件
 * @param {number} page - 当前页码
 */
const handlePageChange = (page) => {
    // 可以在这里处理页面变化事件
};

/**
 * 处理PDF初始化完成
 * @param {Object} pdf - PDF文档对象
 */
const handlePdfInit = (pdf) => {
    // PDF初始化完成后的处理
    loadingError.value = false;
    nextTick(() => {
        if (props.preventSave) {
            // 添加防止保存的事件监听器
            addPreventSaveListeners();
        }
    });
};

/**
 * 处理PDF加载错误
 * @param {Error} error - 错误对象
 */
const handlePdfError = (error) => {
    console.error('PDF加载失败:', error);
    loading.value = false;
    loadingError.value = true;
    loadingProgress.value = 0;

    // 根据错误类型设置不同的错误信息
    if (error.name === 'NetworkError' || error.message.includes('network')) {
        errorMessage.value = '网络连接失败，请检查网络后重试';
    } else if (error.name === 'InvalidPDFException' || error.message.includes('Invalid PDF')) {
        errorMessage.value = 'PDF文件格式错误或已损坏';
    } else if (error.message.includes('404') || error.message.includes('Not Found')) {
        errorMessage.value = '文件不存在或已被删除';
    } else if (error.message.includes('403') || error.message.includes('Forbidden')) {
        errorMessage.value = '没有权限访问此文件';
    } else {
        errorMessage.value = '文件加载失败，请重试';
    }
};

/**
 * 重试加载PDF
 */
const retryLoad = () => {
    loadingError.value = false;
    loading.value = true;
    loadingProgress.value = 0;
    errorMessage.value = '';
    zoomLevel.value = 1; // 重置缩放级别
};

/**
 * 放大PDF
 */
const zoomIn = () => {
    if (zoomLevel.value < 3) { // 最大放大到300%
        // 记录缩放前的滚动位置
        const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
        if (pdfContainer) {
            const centerX = pdfContainer.scrollLeft + pdfContainer.clientWidth / 2;
            const centerY = pdfContainer.scrollTop + pdfContainer.clientHeight / 2;
            
            const oldZoom = zoomLevel.value;
            zoomLevel.value = Math.min(3, zoomLevel.value + 0.25);
            const newZoom = zoomLevel.value;
            
            // 使用nextTick确保DOM更新后再调整滚动位置
            nextTick(() => {
                const zoomRatio = newZoom / oldZoom;
                const newScrollLeft = centerX * zoomRatio - pdfContainer.clientWidth / 2;
                const newScrollTop = centerY * zoomRatio - pdfContainer.clientHeight / 2;
                
                pdfContainer.scrollTo({
                    left: Math.max(0, newScrollLeft),
                    top: Math.max(0, newScrollTop),
                    behavior: 'smooth'
                });
            });
        }
    }
};

/**
 * 缩小PDF
 */
const zoomOut = () => {
    if (zoomLevel.value > 0.5) { // 最小缩小到50%
        // 记录缩放前的滚动位置
        const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
        if (pdfContainer) {
            const centerX = pdfContainer.scrollLeft + pdfContainer.clientWidth / 2;
            const centerY = pdfContainer.scrollTop + pdfContainer.clientHeight / 2;
            
            const oldZoom = zoomLevel.value;
            zoomLevel.value = Math.max(0.5, zoomLevel.value - 0.25);
            const newZoom = zoomLevel.value;
            
            // 使用nextTick确保DOM更新后再调整滚动位置
            nextTick(() => {
                const zoomRatio = newZoom / oldZoom;
                const newScrollLeft = centerX * zoomRatio - pdfContainer.clientWidth / 2;
                const newScrollTop = centerY * zoomRatio - pdfContainer.clientHeight / 2;
                
                pdfContainer.scrollTo({
                    left: Math.max(0, newScrollLeft),
                    top: Math.max(0, newScrollTop),
                    behavior: 'smooth'
                });
            });
        }
    }
};

/**
 * 重置缩放
 */
const resetZoom = () => {
    const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
    if (pdfContainer) {
        // 重置到顶部中央位置
        zoomLevel.value = 1;
        
        nextTick(() => {
            pdfContainer.scrollTo({
                left: 0,
                top: 0,
                behavior: 'smooth'
            });
        });
    } else {
        zoomLevel.value = 1;
    }
};

/**
 * 添加防止保存的事件监听器
 */
const addPreventSaveListeners = () => {
    const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
    if (pdfContainer) {
        // 防止上下文菜单（右键菜单）
        pdfContainer.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            return false;
        });

        // 防止长按选择
        pdfContainer.addEventListener('selectstart', (e) => {
            e.preventDefault();
            return false;
        });

        // 防止拖拽
        pdfContainer.addEventListener('dragstart', (e) => {
            e.preventDefault();
            return false;
        });

        // 防止触摸回调（移动端长按）
        pdfContainer.addEventListener('touchstart', (e) => {
            if (e.touches.length > 1) {
                e.preventDefault();
            }
        });

        // 防止双指缩放等手势
        pdfContainer.addEventListener('gesturestart', (e) => {
            e.preventDefault();
        });
    }
};
</script>

<style scoped>
.pdf-viewer-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f5f5f5;
}

.pdf-content {
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* 防止PDF内容被选择和保存的样式 */
.pdf-no-select {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-tap-highlight-color: transparent;
    /* 移除点击高亮 */
    pointer-events: auto;
    /* 保持可点击 */
}

/* 深度选择器，防止PDF内部元素被保存 */
:deep(.pdf-no-select img) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
    /* 禁用图片的所有交互 */
    -webkit-user-drag: none;
    /* 禁止拖拽 */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 防止Canvas元素被保存 */
:deep(.pdf-no-select canvas) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 关闭按钮样式 */
.close-btn {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 100;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

/* 缩放控制按钮样式 */
.zoom-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.zoom-controls:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%) translateY(-2px);
}

.zoom-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e8e8e8;
    color: #333;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.zoom-btn:hover {
    background: #1989fa;
    color: #fff;
    border-color: #1989fa;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
}

.zoom-btn:active {
    transform: scale(0.95);
}

.zoom-level {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
    min-width: 50px;
    padding: 8px 12px;
    background: rgba(25, 137, 250, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(25, 137, 250, 0.2);
}

/* 加载遮罩样式 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* 加载内容样式 */
.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.progress-circle {
    width: 80px;
    height: 80px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-percent {
    font-size: 18px;
    font-weight: bold;
    color: #1989fa;
}

.loading-text {
    max-width: 200px;
}

.loading-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #fff;
}

.loading-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* 错误状态样式 */
.error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f8f9fa;
}

.error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    max-width: 300px;
}

.error-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 16px 0 8px 0;
}

.error-message {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.retry-btn {
    min-width: 100px;
}
</style>