<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, 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.9);
            z-index: 10000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(4px);
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .image-modal.show {
            display: flex;
            opacity: 1;
        }

        .modal-content {
            max-width: 90%;
            max-height: 90%;
            position: relative;
            cursor: default;
            animation: zoomIn 0.2s ease-out;
        }

        .modal-img {
            width: auto;
            height: auto;
            max-width: 90vw;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            background: #fff;
            display: block;
            margin: 0 auto;
        }

        .close-modal-btn {
            position: absolute;
            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: absolute;
            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); }
        }

        @keyframes zoomIn {
            from {
                transform: scale(0.92);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* 原始合同链接样式优化 */
        .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;
            }
            .modal-img {
                max-height: 80vh;
            }
        }
    </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>

<!-- ========= 图片预览模态框 DOM ========= -->
<div id="imageModal" class="image-modal">
    <div class="close-modal-btn" id="closeModalBtn">✕</div>
    <div class="modal-content">
        <img id="previewImage" class="modal-img" alt="合同原件预览" src="">
        <div id="loadingToast" class="loading-indicator" style="display: none;">
            <i>⏳</i> 加载中...
        </div>
    </div>
</div>

<script>
    (function() {
        // 获取模态框元素及子元素
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('previewImage');
        const closeBtn = document.getElementById('closeModalBtn');
        const loadingToast = document.getElementById('loadingToast');

        // 防止重复绑定标志
        let isModalBound = false;

        // 显示模态框并加载图片
        function showImagePreview(imageUrl) {
            if (!imageUrl) {
                console.warn('图片地址无效');
                return;
            }

            // 重置图片src，显示加载动画
            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.onerror = function() {
                if (loadingToast) loadingToast.style.display = 'none';
                modalImg.alt = '图片加载失败，请检查网络或联系管理员';
                // 可设置一个占位图或错误提示样式
                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" stroke-linecap="round" stroke-linejoin="round"%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.7';
            };
            modalImg.src = imageUrl;
        }

        // 关闭模态框
        function closeImagePreview() {
            if (!modal) return;
            modal.classList.remove('show');
            document.body.style.overflow = '';
            // 可选：延迟清空图片，避免闪烁
            setTimeout(() => {
                if (modalImg) {
                    modalImg.src = '';
                    modalImg.onload = null;
                    modalImg.onerror = null;
                }
                if (loadingToast) loadingToast.style.display = 'none';
            }, 200);
        }

        // 绑定预览事件: 查找所有带有 .js-preview-img 的链接
        function bindPreviewEvents() {
            const previewLinks = document.querySelectorAll('.js-preview-img');
            if (previewLinks.length === 0) return;

            previewLinks.forEach(link => {
                // 移除旧监听避免重复绑定 (使用新事件)
                link.removeEventListener('click', previewClickHandler);
                link.addEventListener('click', previewClickHandler);
            });
        }

        // 统一的点击处理函数
        function previewClickHandler(event) {
            event.preventDefault();   // 阻止默认跳转
            let imgUrl = this.getAttribute('href');
            // 优先使用 data-img-url 属性，兼容 thymeleaf 渲染
            if (this.dataset && this.dataset.imgUrl) {
                imgUrl = this.dataset.imgUrl;
            }
            // 如果仍然没有有效URL，尝试获取 th:href 渲染后的实际href (已在上方获取)
            if (!imgUrl || imgUrl === '#' || imgUrl === '') {
                console.warn('未获取到图片地址');
                // 可选提示
                alert('无法预览，图片地址无效');
                return;
            }
            showImagePreview(imgUrl);
        }

        // 绑定关闭模态框事件：点击关闭按钮、点击背景遮罩、ESC键
        function bindModalEvents() {
            if (isModalBound) return;
            if (!modal) return;

            // 关闭按钮
            if (closeBtn) {
                closeBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    closeImagePreview();
                });
            }

            // 点击模态框背景关闭（点击modal自身区域且不是图片区域）
            modal.addEventListener('click', (e) => {
                // 如果点击的目标是modal背景（即遮罩层本身），则关闭
                if (e.target === modal) {
                    closeImagePreview();
                }
            });

            // 按 ESC 键关闭
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && modal.classList.contains('show')) {
                    closeImagePreview();
                }
            });

            isModalBound = true;
        }

        // 初始化：等待DOM加载完成，由于页面可能动态渲染（Thymeleaf服务端渲染，但DOM内容已就绪）
        document.addEventListener('DOMContentLoaded', function() {
            bindPreviewEvents();
            bindModalEvents();
        });

        // 如果flag==1时，原始合同行可能是通过th:if动态插入，但DOMContentLoaded时已存在，无需额外处理
        // 若后续有异步加载，可考虑MutationObserver，但当前场景为服务端渲染，直接绑定即可。
        // 额外处理：对于可能动态生成的合同内容（理论上不会），但为了更稳健，监听变化（可选）
        // 简单实现：在setTimeout中重新绑定一次，确保所有链接捕获（应对轻微渲染延迟）
        setTimeout(() => {
            bindPreviewEvents();
        }, 100);
    })();
</script>
</body>
</html>