<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>众享办公-合同真伪查询</title>
    <style>
        :root {
            --bg: #f8f9fa;
            --card-bg: #ffffff;
            --border: #e0e0e0;
            --text: #333333;
            --text-secondary: #666666;
            --primary: #007bff;
            --hover: #f1f5f9;
            --shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            line-height: 1.6;
            padding: 16px;
            max-width: 800px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 24px;
            padding-top: 12px;
        }

        h1 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text);
        }

        .search-box {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            box-shadow: var(--shadow);
            margin-bottom: 24px;
        }

        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 1rem;
            color: var(--text);
        }

        .search-box::before {
            content: "🔍";
            margin-right: 8px;
            color: var(--text-secondary);
            font-size: 1.1rem;
        }

        .section {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-bottom: 24px;
        }

        .section-title {
            background: #f5f7fa;
            padding: 14px 20px;
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--text);
            border-bottom: 1px solid var(--border);
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            padding: 16px 20px;
            text-align: left;
            vertical-align: top;
        }

        .table th {
            font-weight: 500;
            color: var(--text-secondary);
            background: #fafafa;
            width: 30%;
        }

        .table td {
            color: var(--text);
            font-weight: 500;
        }

        .table tr:hover {
            background-color: var(--hover);
        }

        .table tr:nth-child(even) {
            background-color: #fbfbfb;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        /* ========= 全屏图片预览模态框 (支持全屏手势缩放) ========= */
        .image-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(8px);
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .image-modal.show {
            display: flex;
            opacity: 1;
        }

        /* 图片容器：占满全屏，允许图片超出滚动（手势控制） */
        .image-viewer {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            cursor: grab;
            touch-action: none; /* 完全由JS控制触摸行为，防止页面滚动 */
        }

        .image-viewer:active {
            cursor: grabbing;
        }

        /* 图片本身不受容器尺寸限制，完全由 transform 控制位置和缩放 */
        .modal-img {
            display: block;
            max-width: none;
            max-height: none;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 0;
            box-shadow: none;
            background: transparent;
            transition: transform 0.05s linear;
            transform-origin: center center;
            will-change: transform;
            /* 初始时让图片不超过屏幕宽高，但缩放后可以超出 */
            max-width: 90vw;
            max-height: 90vh;
        }

        /* 当图片加载完成后，移除尺寸限制，实现全屏缩放体验 */
        .modal-img.fullscreen-ready {
            max-width: none;
            max-height: none;
        }

        .close-modal-btn {
            position: fixed;
            top: 20px;
            right: 28px;
            color: white;
            font-size: 32px;
            font-weight: bold;
            background: rgba(0,0,0,0.6);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            z-index: 10001;
            backdrop-filter: blur(4px);
        }

        .close-modal-btn:hover {
            background: #007bff;
            transform: scale(1.05);
        }

        .loading-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background: rgba(0,0,0,0.7);
            padding: 10px 18px;
            border-radius: 40px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 10002;
            pointer-events: none;
        }

        .loading-indicator i {
            font-style: normal;
            animation: spin 1s linear infinite;
            display: inline-block;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 原始合同链接样式优化 */
        .contract-link {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .contract-link:hover {
            text-decoration: underline;
        }

        /* 移动端关闭按钮调整 */
        @media (max-width: 480px) {
            .close-modal-btn {
                top: 16px;
                right: 16px;
                width: 36px;
                height: 36px;
                font-size: 24px;
            }
        }

        /* 重置缩放按钮，悬浮于全屏下方 */
        .reset-zoom-btn {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            color: white;
            border: none;
            border-radius: 40px;
            padding: 10px 24px;
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            z-index: 10001;
            transition: background 0.2s;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        .reset-zoom-btn:hover {
            background: #007bff;
        }
    </style>
</head>
<body>

<header>
    <h1>合同信息</h1>
</header>

<!-- 合同内容区域 -->
<div>
    <!-- 基本信息 (合同存在) -->
    

    <!-- 错误信息 (合同未找到) -->
    <div class="section">
        <div class="section-title" style="color: red">错误信息</div>
        <table class="table">
            <tbody>
            <tr>
                <td style="color: red">未找到该合同信息</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<footer>
    <!-- 页脚 -->
</footer>

<!-- ========= 全屏图片预览模态框（支持全屏手势缩放/拖动） ========= -->
<div id="imageModal" class="image-modal">
    <div class="close-modal-btn" id="closeModalBtn">✕</div>
    <div class="image-viewer" id="imageViewer">
        <img id="previewImage" class="modal-img" alt="合同原件预览" src="">
        <div id="loadingToast" class="loading-indicator" style="display: none;">
            <i>⏳</i> 加载中...
        </div>
    </div>
    <button id="resetZoomBtn" class="reset-zoom-btn">⟳ 重置缩放</button>
</div>

<script>
    (function() {
        // DOM 元素
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('previewImage');
        const closeBtn = document.getElementById('closeModalBtn');
        const loadingToast = document.getElementById('loadingToast');
        const resetBtn = document.getElementById('resetZoomBtn');
        const viewer = document.getElementById('imageViewer');

        // 手势缩放相关变量
        let currentTransform = { scale: 1, translateX: 0, translateY: 0 };
        let initialDistance = 0;
        let initialScale = 1;
        let startPan = { x: 0, y: 0 };
        let isPanning = false;
        let isZooming = false;

        // 缩放限制 (允许更大缩放范围，满足全屏细节查看)
        const MIN_SCALE = 0.8;    // 最小缩放到0.8，保证图片不会太小
        const MAX_SCALE = 5;      // 最大放大5倍，充分查看细节

        // 应用变换到图片
        function applyTransform() {
            const { scale, translateX, translateY } = currentTransform;
            modalImg.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
        }

        // 重置缩放和平移
        function resetTransform() {
            currentTransform = { scale: 1, translateX: 0, translateY: 0 };
            applyTransform();
            // 重置后也进行一次边界限制（确保图片居中）
            setTimeout(() => clampTranslate(), 10);
        }

        // 边界限制：防止图片被拖拽出屏幕太远（全屏下让图片边缘最多超出屏幕50%即可，但一般限制到不能完全消失）
        function clampTranslate() {
            if (!modalImg || !viewer) return;
            // 获取图片实际渲染尺寸（受scale影响）
            const imgRect = modalImg.getBoundingClientRect();
            const viewerRect = viewer.getBoundingClientRect();

            // 计算可允许的偏移量：图片可以超出屏幕边缘，但至少保留一部分在视野内。
            // 具体：允许图片偏移最大为 (图片宽度 - 屏幕宽度)/2 + 100px，避免完全拖出屏幕
            let maxX = (imgRect.width - viewerRect.width) / 2 + 120;
            let maxY = (imgRect.height - viewerRect.height) / 2 + 120;
            // 如果图片小于屏幕，则限制偏移范围较小，让图片保持在中心附近
            if (imgRect.width <= viewerRect.width) {
                maxX = Math.min(80, maxX);
            }
            if (imgRect.height <= viewerRect.height) {
                maxY = Math.min(80, maxY);
            }
            // 确保最大值非负
            maxX = Math.max(0, maxX);
            maxY = Math.max(0, maxY);

            let newX = currentTransform.translateX;
            let newY = currentTransform.translateY;
            newX = Math.min(maxX, Math.max(-maxX, newX));
            newY = Math.min(maxY, Math.max(-maxY, newY));

            if (newX !== currentTransform.translateX || newY !== currentTransform.translateY) {
                currentTransform.translateX = newX;
                currentTransform.translateY = newY;
                applyTransform();
            }
        }

        // 手势缩放核心逻辑
        function getDistance(touches) {
            if (touches.length < 2) return 0;
            const dx = touches[0].clientX - touches[1].clientX;
            const dy = touches[0].clientY - touches[1].clientY;
            return Math.hypot(dx, dy);
        }

        // 处理触摸开始
        function onTouchStart(e) {
            e.preventDefault();
            const touches = e.touches;
            if (touches.length === 2) {
                // 双指缩放开始
                isZooming = true;
                initialDistance = getDistance(touches);
                initialScale = currentTransform.scale;
            } else if (touches.length === 1) {
                // 单指拖动开始
                isPanning = true;
                startPan.x = touches[0].clientX - currentTransform.translateX;
                startPan.y = touches[0].clientY - currentTransform.translateY;
            }
        }

        function onTouchMove(e) {
            e.preventDefault();
            const touches = e.touches;
            if (isZooming && touches.length === 2) {
                const newDistance = getDistance(touches);
                if (initialDistance > 0) {
                    let newScale = initialScale * (newDistance / initialDistance);
                    newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale));
                    if (newScale !== currentTransform.scale) {
                        currentTransform.scale = newScale;
                        applyTransform();
                        // 缩放后重新限制边界，防止图片偏移出界
                        requestAnimationFrame(() => clampTranslate());
                    }
                }
            } else if (isPanning && touches.length === 1) {
                const newX = touches[0].clientX - startPan.x;
                const newY = touches[0].clientY - startPan.y;
                currentTransform.translateX = newX;
                currentTransform.translateY = newY;
                applyTransform();
                requestAnimationFrame(() => clampTranslate());
            }
        }

        function onTouchEnd(e) {
            e.preventDefault();
            isZooming = false;
            isPanning = false;
            // 最后边界钳制
            clampTranslate();
        }

        // 支持鼠标滚轮缩放（Ctrl+滚轮）便于PC调试
        function onWheel(e) {
            if (modal && modal.classList.contains('show')) {
                if (e.ctrlKey) {
                    e.preventDefault();
                    const delta = e.deltaY > 0 ? 0.9 : 1.1;
                    let newScale = currentTransform.scale * delta;
                    newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale));
                    if (newScale !== currentTransform.scale) {
                        currentTransform.scale = newScale;
                        applyTransform();
                        clampTranslate();
                    }
                }
            }
        }

        // 绑定手势事件到图片查看器
        function bindGestureEvents() {
            if (!viewer) return;
            viewer.addEventListener('touchstart', onTouchStart, { passive: false });
            viewer.addEventListener('touchmove', onTouchMove, { passive: false });
            viewer.addEventListener('touchend', onTouchEnd);
            viewer.addEventListener('touchcancel', onTouchEnd);
            viewer.addEventListener('wheel', onWheel, { passive: false });
        }

        let gestureBound = false;
        function initGestures() {
            if (!gestureBound) {
                bindGestureEvents();
                gestureBound = true;
            }
        }

        // 显示图片预览，重置变换，加载图片（全屏模式）
        function showImagePreview(imageUrl) {
            if (!imageUrl) {
                console.warn('图片地址无效');
                return;
            }

            // 重置变换
            resetTransform();
            // 移除全屏就绪类，先限制尺寸以正确显示初始比例
            modalImg.classList.remove('fullscreen-ready');
            modalImg.style.maxWidth = '90vw';
            modalImg.style.maxHeight = '90vh';
            modalImg.src = '';
            modalImg.alt = '加载中...';
            if (loadingToast) loadingToast.style.display = 'flex';

            modal.classList.add('show');
            document.body.style.overflow = 'hidden';

            // 加载图片
            modalImg.onload = function() {
                if (loadingToast) loadingToast.style.display = 'none';
                modalImg.alt = '合同原件 (双指缩放/拖动)';
                // 图片加载完成后，移除尺寸限制，实现全屏自由缩放
                modalImg.classList.add('fullscreen-ready');
                modalImg.style.maxWidth = 'none';
                modalImg.style.maxHeight = 'none';
                // 重新调整边界，让图片适应全屏
                setTimeout(() => {
                    clampTranslate();
                }, 30);
            };
            modalImg.onerror = function() {
                if (loadingToast) loadingToast.style.display = 'none';
                modalImg.alt = '图片加载失败，请检查网络或联系管理员';
                modalImg.classList.add('fullscreen-ready');
                modalImg.style.maxWidth = 'none';
                modalImg.style.maxHeight = 'none';
                modalImg.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="1"%3E%3Crect x="3" y="3" width="18" height="18" rx="2" ry="2"%3E%3C/rect%3E%3Ccircle cx="8.5" cy="8.5" r="1.5"%3E%3C/circle%3E%3Cpolyline points="21 15 16 10 5 21"%3E%3C/polyline%3E%3C/svg%3E';
                modalImg.style.opacity = '0.8';
            };
            modalImg.src = imageUrl;
        }

        function closeImagePreview() {
            if (!modal) return;
            modal.classList.remove('show');
            document.body.style.overflow = '';
            resetTransform();
            setTimeout(() => {
                if (modalImg) {
                    modalImg.src = '';
                    modalImg.onload = null;
                    modalImg.onerror = null;
                    modalImg.classList.remove('fullscreen-ready');
                }
                if (loadingToast) loadingToast.style.display = 'none';
            }, 200);
        }

        // 绑定预览事件
        function bindPreviewEvents() {
            const previewLinks = document.querySelectorAll('.js-preview-img');
            previewLinks.forEach(link => {
                link.removeEventListener('click', previewClickHandler);
                link.addEventListener('click', previewClickHandler);
            });
        }

        function previewClickHandler(event) {
            event.preventDefault();
            let imgUrl = this.getAttribute('href');
            if (this.dataset && this.dataset.imgUrl) {
                imgUrl = this.dataset.imgUrl;
            }
            if (!imgUrl || imgUrl === '#') {
                alert('无法预览，图片地址无效');
                return;
            }
            showImagePreview(imgUrl);
        }

        // 绑定关闭模态框事件
        function bindModalEvents() {
            if (!modal) return;

            if (closeBtn) {
                closeBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    closeImagePreview();
                });
            }

            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeImagePreview();
                }
            });

            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && modal.classList.contains('show')) {
                    closeImagePreview();
                }
            });

            if (resetBtn) {
                resetBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    resetTransform();
                    clampTranslate();
                });
            }
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            bindPreviewEvents();
            bindModalEvents();
            initGestures();
        });

        // 针对动态内容再次尝试绑定（Thymeleaf 静态渲染已存在，但保险）
        setTimeout(() => {
            bindPreviewEvents();
        }, 150);
    })();
</script>
</body>
</html>