<?php
// 包含认证检查
require_once 'includes/auth.php';
checkLogin();
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="comparison_title">影像对比 - 口腔检查管理系统</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css">
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/vendor/jquery.min.js"></script>
</head>
<body>
    <!-- Modern Dashboard Layout -->
    <div class="dashboard-container">
        <!-- Sidebar -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <i class="fas fa-tooth"></i>
                    <span>口腔检查系统</span>
                </div>
                <button class="sidebar-toggle" id="sidebarToggle">
                    <i class="fas fa-bars"></i>
                </button>
            </div>

            <ul class="sidebar-menu">
                <li class="menu-item">
                    <a href="index.php" class="menu-link">
                        <i class="fas fa-tachometer-alt"></i>
                        <span data-i18n="dashboard">仪表板</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="patients.php" class="menu-link">
                        <i class="fas fa-users"></i>
                        <span data-i18n="patients">患者管理</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="capture.php" class="menu-link">
                        <i class="fas fa-camera"></i>
                        <span data-i18n="capture">影像采集</span>
                    </a>
                </li>
                <li class="menu-item active">
                    <a href="comparison.php" class="menu-link">
                        <i class="fas fa-exchange-alt"></i>
                        <span data-i18n="comparison">影像对比</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="edit.php" class="menu-link">
                        <i class="fas fa-edit"></i>
                        <span data-i18n="edit">影像编辑</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="reports.php" class="menu-link">
                        <i class="fas fa-file-medical"></i>
                        <span data-i18n="reports">报告管理</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="settings.php" class="menu-link">
                        <i class="fas fa-cog"></i>
                        <span data-i18n="settings">系统设置</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="help.php" class="menu-link">
                        <i class="fas fa-question-circle"></i>
                        <span data-i18n="help">帮助中心</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Sidebar Overlay for Mobile -->
        <div class="sidebar-overlay"></div>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Top Header -->
            <header class="top-header">
                <div class="header-left">
                    <h1 class="page-title" data-i18n="comparison">影像对比</h1>
                </div>
                <div class="header-right">
                    <div class="header-notifications">
                        <button class="notification-btn">
                            <i class="fas fa-bell"></i>
                            <span class="notification-badge">3</span>
                        </button>
                    </div>
                    <div class="header-user">
                        <div class="user-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span class="user-name">管理员</span>
                    </div>
                </div>
            </header>

            <!-- Comparison Content -->
            <div class="content-wrapper">

                <!-- 对比控制面板 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="compare-patient-select" class="form-label" data-i18n="select_patient">选择患者</label>
                                <div class="input-group">
                                    <input type="text" id="compare-patient-search" class="form-control" data-i18n="placeholder_search_patient_short" placeholder="搜索患者姓名...">
                                    <select id="compare-patient-select" class="form-select">
                                        <option value="" data-i18n="please_select_patient">请选择患者...</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label for="compare-count" class="form-label" data-i18n="comparison_count">对比数量</label>
                                <select id="compare-count" class="form-select" onchange="updateCompareButtons()">
                                    <option value="2" data-i18n="compare_2_groups">2组对比</option>
                                    <option value="3" data-i18n="compare_3_groups">3组对比</option>
                                    <option value="4" data-i18n="compare_4_groups">4组对比</option>
                                </select>
                            </div>
                            <div class="col-md-7">
                                <div class="d-flex gap-2 mt-4">
                                    <div id="image-select-buttons">
                                        <button class="btn btn-primary" onclick="openImageSelector('A')" data-i18n="select_image_a">选择影像A</button>
                                        <button class="btn btn-primary" onclick="openImageSelector('B')" data-i18n="select_image_b">选择影像B</button>
                                    </div>
                                    <button class="btn btn-success" onclick="compareImages()" data-i18n="start_comparison">开始对比</button>
                                    <button class="btn btn-secondary" onclick="resetComparison()" data-i18n="reset">重置</button>
                                    <button class="btn btn-info" onclick="toggleSyncMode()" id="sync-btn" data-i18n="sync_mode">
                                        <i class="fas fa-link"></i> 同步模式
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 同步控制 -->
                        <div id="sync-controls" class="row mt-3" style="display: none;">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <strong><i class="fas fa-link"></i> <span data-i18n="sync_mode_enabled">同步模式已启用</span></strong>
                                    <small class="d-block mt-1" data-i18n="sync_mode_description">对任意一组影像的操作将同步应用到其他所有影像</small>
                                    <div class="mt-2">
                                        <button class="btn btn-sm btn-outline-secondary me-2" onclick="syncZoomAll()" data-i18n="sync_zoom">
                                            <i class="fas fa-search"></i> 同步缩放
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary me-2" onclick="syncPanAll()" data-i18n="sync_pan">
                                            <i class="fas fa-arrows-alt"></i> 同步平移
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="clearAllAnnotations()" data-i18n="clear_annotations">
                                            <i class="fas fa-eraser"></i> 清除标记
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 对比显示区域 -->
                <div id="comparison-display-area" class="row">
                    <!-- 影像对比卡片将通过JavaScript动态生成 -->
                </div>

                <!-- 标记工具栏 -->
                <div id="annotation-toolbar" class="card mt-3" style="display: none;">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-pencil-alt"></i> <span data-i18n="annotation_tools">标记工具</span>
                            <small class="text-muted ms-2" data-i18n="annotation_description">在影像上添加标记线、标记点等</small>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <h6 data-i18n="annotation_type">标记类型</h6>
                                <div class="btn-group-vertical w-100" role="group">
                                    <input type="radio" class="btn-check" name="annotation-type" id="anno-line" value="line" checked>
                                    <label class="btn btn-outline-primary btn-sm" for="anno-line" data-i18n="annotation_line">
                                        <i class="fas fa-minus"></i> 标记线
                                    </label>
                                    <input type="radio" class="btn-check" name="annotation-type" id="anno-point" value="point">
                                    <label class="btn btn-outline-primary btn-sm" for="anno-point" data-i18n="annotation_point">
                                        <i class="fas fa-circle"></i> 标记点
                                    </label>
                                    <input type="radio" class="btn-check" name="annotation-type" id="anno-rectangle" value="rectangle">
                                    <label class="btn btn-outline-primary btn-sm" for="anno-rectangle" data-i18n="annotation_rectangle">
                                        <i class="fas fa-square"></i> 矩形框
                                    </label>
                                    <input type="radio" class="btn-check" name="annotation-type" id="anno-text" value="text">
                                    <label class="btn btn-outline-primary btn-sm" for="anno-text" data-i18n="annotation_text">
                                        <i class="fas fa-font"></i> 文字标注
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <h6 data-i18n="annotation_color">标记颜色</h6>
                                <div class="d-flex flex-wrap gap-2">
                                    <button class="btn btn-sm btn-outline-danger p-2" onclick="setAnnotationColor('#ff0000')" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ff0000;"></button>
                                    <button class="btn btn-sm btn-outline-warning p-2" onclick="setAnnotationColor('#ffaa00')" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ffaa00;"></button>
                                    <button class="btn btn-sm btn-outline-success p-2" onclick="setAnnotationColor('#00ff00')" style="width: 30px; height: 30px; border-radius: 50%; background-color: #00ff00;"></button>
                                    <button class="btn btn-sm btn-outline-info p-2" onclick="setAnnotationColor('#0088ff')" style="width: 30px; height: 30px; border-radius: 50%; background-color: #0088ff;"></button>
                                    <button class="btn btn-sm btn-outline-dark p-2" onclick="setAnnotationColor('#000000')" style="width: 30px; height: 30px; border-radius: 50%; background-color: #000000;"></button>
                                </div>
                                <div class="mt-2">
                                    <input type="color" id="custom-color" class="form-control form-control-color" value="#ff0000" onchange="setAnnotationColor(this.value)">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <h6 data-i18n="line_thickness">线条粗细</h6>
                                <input type="range" id="annotation-thickness" class="form-range" min="1" max="10" value="2" onchange="setAnnotationThickness(this.value)">
                                <div class="text-center mt-1">
                                    <small id="thickness-value">2px</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <h6 data-i18n="operations">操作</h6>
                                <button class="btn btn-outline-warning btn-sm w-100 mb-2" onclick="clearCurrentAnnotations()" data-i18n="clear_current">
                                    <i class="fas fa-eraser"></i> 清除当前
                                </button>
                                <button class="btn btn-outline-danger btn-sm w-100 mb-2" onclick="clearAllAnnotations()" data-i18n="clear_all">
                                    <i class="fas fa-trash"></i> 清除全部
                                </button>
                                <button class="btn btn-outline-success btn-sm w-100" onclick="saveAnnotations()" data-i18n="save_annotations">
                                    <i class="fas fa-save"></i> 保存标记
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 对比工具栏 -->
                <div id="comparison-toolbar" class="card mt-4" style="display: none;">
                    <div class="card-header">
                        <h5 data-i18n="comparison_tools">对比工具</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <h6 data-i18n="comparison_mode">对比模式</h6>
                                <div class="btn-group-vertical w-100" role="group">
                                    <input type="radio" class="btn-check" name="compare-mode" id="mode-side-by-side" value="side-by-side" checked>
                                    <label class="btn btn-outline-primary btn-sm" for="mode-side-by-side" data-i18n="side_by_side">并排对比</label>
                                    <input type="radio" class="btn-check" name="compare-mode" id="mode-overlay" value="overlay">
                                    <label class="btn btn-outline-primary btn-sm" for="mode-overlay" data-i18n="overlay">叠加对比</label>
                                    <input type="radio" class="btn-check" name="compare-mode" id="mode-slider" value="slider">
                                    <label class="btn btn-outline-primary btn-sm" for="mode-slider" data-i18n="slider">滑块对比</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <h6 data-i18n="overlay_settings">叠加设置</h6>
                                <div id="overlay-controls" style="display: none;">
                                    <label for="opacity-slider" class="form-label" data-i18n="opacity">透明度: <span id="opacity-value">50</span>%</label>
                                    <input type="range" id="opacity-slider" class="form-range" min="0" max="100" value="50">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <h6 data-i18n="measurement_tools">测量工具</h6>
                                <button class="btn btn-outline-info btn-sm w-100 mb-2" onclick="enableMeasurement()" data-i18n="enable_measurement">启用测量</button>
                                <button class="btn btn-outline-warning btn-sm w-100" onclick="clearMeasurements()" data-i18n="clear_measurements">清除测量</button>
                            </div>
                            <div class="col-md-3">
                                <h6 data-i18n="analysis_results">分析结果</h6>
                                <div id="analysis-results" class="small">
                                    <p class="text-muted" data-i18n="select_mode_for_analysis">选择对比模式后显示分析结果</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 历史对比记录 -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 data-i18n="comparison_history">对比历史</h5>
                    </div>
                    <div class="card-body">
                        <div id="comparison-history" class="row">
                            <div class="col-12">
                                <p class="text-muted text-center" data-i18n="no_comparison_records">暂无对比记录</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 影像选择器模态框 -->
    <div class="modal fade" id="imageSelectorModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" data-i18n="select_image">选择影像</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="image-patient-select" class="form-label" data-i18n="select_patient">选择患者</label>
                        <select id="image-patient-select" class="form-select">
                            <option value="" data-i18n="please_select_patient">请选择患者...</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="btn-group" role="group">
                            <input type="radio" class="btn-check" name="filter-type" id="filter-all" value="all" checked>
                            <label class="btn btn-outline-primary btn-sm" for="filter-all" data-i18n="all">全部</label>
                            <input type="radio" class="btn-check" name="filter-type" id="filter-images" value="image">
                            <label class="btn btn-outline-primary btn-sm" for="filter-images" data-i18n="images">图片</label>
                            <input type="radio" class="btn-check" name="filter-type" id="filter-videos" value="video">
                            <label class="btn btn-outline-primary btn-sm" for="filter-videos" data-i18n="videos">视频</label>
                        </div>
                    </div>
                    <div id="image-gallery" class="image-gallery">
                        <!-- 影像列表将在这里显示 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-i18n="cancel">取消</button>
                    <button type="button" class="btn btn-primary" onclick="selectImage()" data-i18n="select">选择</button>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/js/main.js"></script>
    <script src="assets/js/language-switcher.js"></script>
    <script>
        // 多组影像对比变量
        let compareCount = 2; // 默认2组对比
        let selectedImages = {}; // 存储各组选择的影像
        let imageViewers = {}; // 存储各组的图像查看器
        let syncMode = false; // 同步模式
        let currentAnnotationType = 'line';
        let currentAnnotationColor = '#ff0000';
        let currentAnnotationThickness = 2;

        // 兼容性变量
        let currentSide = 'A';
        let selectedImageA = null;
        let selectedImageB = null;
        let selectedGalleryImage = null;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化数据库
            initDatabase();

            // 初始化对比功能
            loadPatientSelectors();
            initComparison();

            // Sidebar toggle functionality
            document.getElementById('sidebarToggle').addEventListener('click', function() {
                document.querySelector('.sidebar').classList.toggle('collapsed');
                document.querySelector('.main-content').classList.toggle('expanded');
            });

            // 绑定患者选择器事件
            document.getElementById('compare-patient-select').addEventListener('change', function() {
                const patientId = this.value;
                if (patientId) {
                    showPatientStats(patientId, this);
                }
                // 更新image-patient-select的值以保持同步
                const imagePatientSelect = document.getElementById('image-patient-select');
                if (imagePatientSelect) {
                    imagePatientSelect.value = patientId;
                }
                // 如果图片选择器模态框是打开的，刷新图片库
                const modal = document.getElementById('imageSelectorModal');
                if (modal && modal.classList.contains('show')) {
                    loadImageGallery();
                }
            });

            // 绑定模态框中的患者选择器事件
            document.getElementById('image-patient-select').addEventListener('change', function() {
                const patientId = this.value;
                // 同步更新主页面患者选择器
                const mainPatientSelect = document.getElementById('compare-patient-select');
                if (mainPatientSelect) {
                    mainPatientSelect.value = patientId;
                }
                // 刷新图片库
                loadImageGallery();
            });

            // 绑定患者搜索事件
            document.getElementById('compare-patient-search').addEventListener('input', function() {
                searchPatients(this.value, 'compare-patient-select');
            });

            // 为搜索框添加自动清空功能
            const compareSearchInput = document.getElementById('compare-patient-search');
            if (compareSearchInput) {
                compareSearchInput.addEventListener('focus', function() {
                    clearSearchPlaceholder(this);
                });
            }

            // 绑定对比模式切换
            document.querySelectorAll('input[name="compare-mode"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    applyComparisonMode(this.value);
                });
            });

            // 绑定透明度滑块
            document.getElementById('opacity-slider').addEventListener('input', function() {
                document.getElementById('opacity-value').textContent = this.value;
                applyOverlayOpacity(this.value);
            });

            // 绑定过滤器
            document.querySelectorAll('input[name="filter-type"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    filterImages(this.value);
                });
            });
        });

        // 初始化对比功能
        function initComparison() {
            selectedImageA = null;
            selectedImageB = null;
            selectedImages = {};
            imageViewers = {};
            compareCount = parseInt(document.getElementById('compare-count').value) || 2;
            document.getElementById('comparison-toolbar').style.display = 'none';
            document.getElementById('annotation-toolbar').style.display = 'none';
            updateCompareButtons();
        }

        // 更新对比按钮
        function updateCompareButtons() {
            compareCount = parseInt(document.getElementById('compare-count').value) || 2;
            const container = document.getElementById('image-select-buttons');

            let html = '';
            const letters = ['A', 'B', 'C', 'D'];

            for (let i = 0; i < compareCount; i++) {
                const letter = letters[i];
                html += `<button class="btn btn-primary" onclick="openImageSelector('${letter}')">选择影像${letter}</button>`;
            }

            container.innerHTML = html;
        }

        // 切换同步模式
        function toggleSyncMode() {
            syncMode = !syncMode;
            const btn = document.getElementById('sync-btn');
            const controls = document.getElementById('sync-controls');

            if (syncMode) {
                btn.innerHTML = '<i class="fas fa-unlink"></i> 同步模式';
                btn.classList.remove('btn-info');
                btn.classList.add('btn-success');
                controls.style.display = 'block';
            } else {
                btn.innerHTML = '<i class="fas fa-link"></i> 同步模式';
                btn.classList.remove('btn-success');
                btn.classList.add('btn-info');
                controls.style.display = 'none';
            }
        }

        // 创建多组对比显示区域
        function createComparisonDisplay() {
            const container = document.getElementById('comparison-display-area');
            container.innerHTML = '';

            const letters = ['A', 'B', 'C', 'D'];
            const colClass = compareCount === 2 ? 'col-md-6' :
                           compareCount === 3 ? 'col-md-4' : 'col-md-3';

            for (let i = 0; i < compareCount; i++) {
                const letter = letters[i];
                const cardHtml = `
                    <div class="${colClass} mb-3">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">${getGlobalLanguagePack ? getGlobalLanguagePack().image : '影像'}${letter}</h5>
                                <div id="image-${letter.toLowerCase()}-info" class="text-muted small"></div>
                            </div>
                            <div class="card-body d-flex flex-column">
                                <div id="image-${letter.toLowerCase()}-container" class="comparison-container flex-grow-1 position-relative">
                                    <div class="text-center p-4 bg-light rounded h-100 d-flex align-items-center justify-content-center">
                                        <div>
                                            <h5 class="text-muted">${getGlobalLanguagePack ? getGlobalLanguagePack().select_image_first : '请先选择影像'}${letter}</h5>
                                            <p class="text-muted mb-0">${getGlobalLanguagePack ? getGlobalLanguagePack().click_button_to_select_image : '点击上方按钮选择要对比的影像'}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2 d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-secondary" onclick="zoomIn('${letter}')" title="${getGlobalLanguagePack ? getGlobalLanguagePack().zoom_in : '放大'}">
                                        <i class="fas fa-search-plus"></i> ${getGlobalLanguagePack ? getGlobalLanguagePack().zoom_in : '放大'}
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary" onclick="zoomOut('${letter}')" title="${getGlobalLanguagePack ? getGlobalLanguagePack().zoom_out : '缩小'}">
                                        <i class="fas fa-search-minus"></i> ${getGlobalLanguagePack ? getGlobalLanguagePack().zoom_out : '缩小'}
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary" onclick="fitToScreen('${letter}')" title="${getGlobalLanguagePack ? getGlobalLanguagePack().fit_to_screen : '适应屏幕'}">
                                        <i class="fas fa-expand"></i> ${getGlobalLanguagePack ? getGlobalLanguagePack().fit_to_screen : '适应'}
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" onclick="clearImage('${letter}')" title="${getGlobalLanguagePack ? getGlobalLanguagePack().clear_image : '清除影像'}">
                                        <i class="fas fa-times"></i> ${getGlobalLanguagePack ? getGlobalLanguagePack().clear_image : '清除'}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                container.innerHTML += cardHtml;
            }
        }

        // 缩放控制函数
        function zoomIn(letter) {
            const viewer = imageViewers[letter];
            if (viewer) {
                const currentZoom = viewer.getZoom();
                viewer.zoomTo(currentZoom * 1.2);
                if (syncMode) syncZoom(letter, currentZoom * 1.2);
            }
        }

        function zoomOut(letter) {
            const viewer = imageViewers[letter];
            if (viewer) {
                const currentZoom = viewer.getZoom();
                viewer.zoomTo(currentZoom / 1.2);
                if (syncMode) syncZoom(letter, currentZoom / 1.2);
            }
        }

        function fitToScreen(letter) {
            const viewer = imageViewers[letter];
            if (viewer) {
                viewer.fitToScreen();
                if (syncMode) syncFitToScreen(letter);
            }
        }

        function clearImage(letter) {
            const container = document.getElementById(`image-${letter.toLowerCase()}-container`);
            const info = document.getElementById(`image-${letter.toLowerCase()}-info`);
            const langPack = getGlobalLanguagePack ? getGlobalLanguagePack() : {};

            container.innerHTML = `
                <div class="text-center p-4 bg-light rounded h-100 d-flex align-items-center justify-content-center">
                    <div>
                        <h5 class="text-muted">${langPack.select_image_first || '请先选择影像'}${letter}</h5>
                        <p class="text-muted mb-0">${langPack.click_button_to_select_image || '点击上方按钮选择要对比的影像'}</p>
                    </div>
                </div>
            `;
            info.textContent = '';

            delete selectedImages[letter];
            delete imageViewers[letter];

            updateCompareButton();
        }

        // 同步操作函数
        function syncZoom(sourceLetter, zoomLevel) {
            const letters = ['A', 'B', 'C', 'D'];
            letters.forEach(letter => {
                if (letter !== sourceLetter && imageViewers[letter]) {
                    imageViewers[letter].zoomTo(zoomLevel);
                }
            });
        }

        function syncPan(sourceLetter, point) {
            const letters = ['A', 'B', 'C', 'D'];
            letters.forEach(letter => {
                if (letter !== sourceLetter && imageViewers[letter]) {
                    imageViewers[letter].panTo(point);
                }
            });
        }

        function syncFitToScreen(sourceLetter) {
            const letters = ['A', 'B', 'C', 'D'];
            letters.forEach(letter => {
                if (letter !== sourceLetter && imageViewers[letter]) {
                    imageViewers[letter].fitToScreen();
                }
            });
        }

        function syncZoomAll() {
            // 同步所有影像到第一个有影像的缩放级别
            const letters = ['A', 'B', 'C', 'D'];
            let referenceZoom = null;
            let referenceLetter = null;

            for (const letter of letters) {
                if (imageViewers[letter]) {
                    referenceZoom = imageViewers[letter].getZoom();
                    referenceLetter = letter;
                    break;
                }
            }

            if (referenceZoom !== null) {
                letters.forEach(letter => {
                    if (letter !== referenceLetter && imageViewers[letter]) {
                        imageViewers[letter].zoomTo(referenceZoom);
                    }
                });
            }
        }

        function syncPanAll() {
            // 同步所有影像到第一个有影像的中心点
            const letters = ['A', 'B', 'C', 'D'];
            let referenceCenter = null;
            let referenceLetter = null;

            for (const letter of letters) {
                if (imageViewers[letter]) {
                    referenceCenter = imageViewers[letter].getCenter();
                    referenceLetter = letter;
                    break;
                }
            }

            if (referenceCenter !== null) {
                letters.forEach(letter => {
                    if (letter !== referenceLetter && imageViewers[letter]) {
                        imageViewers[letter].panTo(referenceCenter);
                    }
                });
            }
        }

        // 标记功能
        function setAnnotationColor(color) {
            currentAnnotationColor = color;
            document.getElementById('custom-color').value = color;
        }

        function setAnnotationThickness(thickness) {
            currentAnnotationThickness = parseInt(thickness);
            document.getElementById('thickness-value').textContent = thickness + 'px';
        }

        function clearCurrentAnnotations() {
            // 清除当前激活的影像标记
            const activeViewer = getActiveViewer();
            if (activeViewer && activeViewer.clearAnnotations) {
                activeViewer.clearAnnotations();
            }
        }

        function clearAllAnnotations() {
            // 清除所有影像的标记
            Object.values(imageViewers).forEach(viewer => {
                if (viewer && viewer.clearAnnotations) {
                    viewer.clearAnnotations();
                }
            });
        }

        function saveAnnotations() {
            // 保存所有标记到数据库
            const annotations = {};

            Object.keys(imageViewers).forEach(letter => {
                const viewer = imageViewers[letter];
                if (viewer && viewer.getAnnotations) {
                    annotations[letter] = viewer.getAnnotations();
                }
            });

            // 发送到服务器保存
            apiRequest('api/save_annotations.php', 'POST', {
                patient_id: document.getElementById('compare-patient-select').value,
                annotations: annotations
            })
            .then(result => {
                if (result.success) {
                    showMessage('标记保存成功', 'success');
                } else {
                    showMessage('保存失败: ' + result.message, 'danger');
                }
            })
            .catch(error => {
                showMessage('保存标记失败: ' + error.message, 'danger');
            });
        }

        function getActiveViewer() {
            // 返回当前激活的查看器（可以根据焦点或其他方式确定）
            return Object.values(imageViewers)[0]; // 简化实现
        }

        // 打开影像选择器
        function openImageSelector(side) {
            currentSide = side;
            document.getElementById('imageSelectorModal').querySelector('.modal-title').textContent =
                `选择影像${side}`;

            // 确保模态框中的患者选择器与主页面同步
            const mainPatientSelect = document.getElementById('compare-patient-select');
            const modalPatientSelect = document.getElementById('image-patient-select');
            if (mainPatientSelect && modalPatientSelect) {
                modalPatientSelect.value = mainPatientSelect.value;
            }

            const modal = new bootstrap.Modal(document.getElementById('imageSelectorModal'));
            modal.show();
            loadImageGallery(); // 加载图片库
        }

        // 加载影像库
        function loadImageGallery() {
            const patientSelect = document.getElementById('image-patient-select');
            const patientId = patientSelect.value || document.getElementById('compare-patient-select').value;

            if (!patientId) {
                const langPack = getGlobalLanguagePack ? getGlobalLanguagePack() : {};
                document.getElementById('image-gallery').innerHTML = `<p class="text-center text-muted">${langPack.select_patient_first || '请先选择患者'}</p>`;
                return;
            }

            patientSelect.value = patientId;

            apiRequest(`api/images.php?action=list&patient_id=${patientId}`)
                .then(data => {
                    displayImageGallery(data.images);
                })
                .catch(error => {
                    console.error('加载影像库失败:', error);
                    showMessage('加载影像库失败', 'danger');
                });
        }

        // 显示影像库
        function displayImageGallery(images) {
            const container = document.getElementById('image-gallery');

            if (images.length === 0) {
                const langPack = getGlobalLanguagePack ? getGlobalLanguagePack() : {};
                container.innerHTML = `<p class="text-center text-muted">${langPack.patient_has_no_images || '该患者暂无影像数据'}</p>`;
                return;
            }

            container.innerHTML = '';

            images.forEach(image => {
                const item = document.createElement('div');
                item.className = 'image-item';
                item.onclick = () => selectGalleryImage(image);

                let mediaElement = '';
                if (image.file_type === 'image') {
                    mediaElement = `<img src="${image.file_path}" alt="${image.original_name}">`;
                } else {
                    mediaElement = `
                        <video>
                            <source src="${image.file_path}" type="video/webm">
                        </video>
                    `;
                }

                item.innerHTML = `
                    ${mediaElement}
                    <div class="image-info">
                        <div class="filename">${image.original_name}</div>
                        <div class="date">${formatDateTime(image.capture_date)}</div>
                        ${image.notes ? `<div class="notes">${image.notes}</div>` : ''}
                    </div>
                `;

                container.appendChild(item);
            });
        }

        // 选择影像库中的影像
        function selectGalleryImage(image) {
            // 移除之前的选择
            document.querySelectorAll('.image-item.selected').forEach(item => {
                item.classList.remove('selected');
            });

            // 添加新选择
            event.currentTarget.classList.add('selected');
            selectedGalleryImage = image;
        }

        // 确认选择影像
        function selectImage() {
            if (!selectedGalleryImage) {
                const langPack = getGlobalLanguagePack ? getGlobalLanguagePack() : {};
                showMessage(langPack.select_an_image_first || '请先选择一个影像', 'warning');
                return;
            }

            if (selectedGalleryImage.file_type !== 'image') {
                const langPack = getGlobalLanguagePack ? getGlobalLanguagePack() : {};
                showMessage(langPack.video_not_supported || '视频文件不支持对比功能，请选择图片文件', 'warning');
                return;
            }

            const side = currentSide;

            // 存储选择的影像
            selectedImages[side] = selectedGalleryImage;

            // 兼容旧代码
            if (side === 'A') {
                selectedImageA = selectedGalleryImage;
            } else if (side === 'B') {
                selectedImageB = selectedGalleryImage;
            }

            // 显示选择成功消息
            const langPack = getGlobalLanguagePack ? getGlobalLanguagePack() : {};
            showMessage(`${langPack.image || '影像'}${side}${langPack.select_success || '选择成功'}: ${selectedGalleryImage.original_name}`, 'success');

            // 关闭模态框
            bootstrap.Modal.getInstance(document.getElementById('imageSelectorModal')).hide();

            // 更新对比按钮状态
            updateCompareButton();
        }

        // 更新对比按钮状态
        function updateCompareButton() {
            const selectedCount = Object.keys(selectedImages).length;
            const compareBtn = document.querySelector('button[onclick="compareImages()"]');

            if (selectedCount >= 2) {
                compareBtn.disabled = false;
                compareBtn.innerHTML = `<i class="fas fa-play"></i> 开始${selectedCount}组对比`;
            } else {
                compareBtn.disabled = true;
                compareBtn.innerHTML = '<i class="fas fa-play"></i> 开始对比';
            }
        }

        // 开始对比
        function compareImages() {
            // 检查是否至少选择了两个影像
            const selectedCount = Object.keys(selectedImages).length;
            if (selectedCount < 2) {
                const langPack = getGlobalLanguagePack ? getGlobalLanguagePack() : {};
                showMessage(`${langPack.select_at_least_2_images || '请至少选择2个影像进行对比'}，${langPack.current_selected || '当前已选择'}${selectedCount}${langPack.images || '个'}`, 'warning');
                return;
            }

            // 创建对比显示区域
            createComparisonDisplay();

            // 显示工具栏
            document.getElementById('comparison-toolbar').style.display = 'block';
            document.getElementById('annotation-toolbar').style.display = 'block';

            // 加载影像到对比区域
            loadImagesForComparison();

            const langPack = getGlobalLanguagePack ? getGlobalLanguagePack() : {};
            showMessage(`${langPack.start_comparison || '开始'}${selectedCount}${langPack.groups_comparison || '组影像对比'}`, 'success');
        }

        // 加载影像到对比区域
        function loadImagesForComparison() {
            const letters = ['A', 'B', 'C', 'D'];

            letters.forEach((letter, index) => {
                if (index < compareCount && selectedImages[letter]) {
                    loadImageForComparison(letter, selectedImages[letter]);
                }
            });
        }

        // 加载单个影像到对比区域
        function loadImageForComparison(letter, imageData) {
            const container = document.getElementById(`image-${letter.toLowerCase()}-container`);
            const info = document.getElementById(`image-${letter.toLowerCase()}-info`);

            // 显示影像信息
            info.textContent = `${imageData.original_name} (${formatDateTime(imageData.capture_date)})`;

            // 创建影像查看器（简化实现，使用img标签+CSS变换）
            container.innerHTML = `
                <div class="image-viewer-wrapper position-relative h-100">
                    <img src="${imageData.file_path}"
                         class="img-fluid comparison-image"
                         id="compare-img-${letter}"
                         style="max-height: 100%; max-width: 100%; object-fit: contain;"
                         alt="${imageData.original_name}">
                    <div class="annotation-layer position-absolute top-0 start-0 w-100 h-100"
                         id="annotation-layer-${letter}"
                         style="pointer-events: none;"></div>
                </div>
            `;

            // 初始化查看器对象（简化实现）
            imageViewers[letter] = {
                element: document.getElementById(`compare-img-${letter}`),
                container: container,
                zoom: 1,
                panX: 0,
                panY: 0,
                annotations: [],

                getZoom: function() { return this.zoom; },
                zoomTo: function(level) {
                    this.zoom = level;
                    this.updateTransform();
                },
                panTo: function(point) {
                    this.panX = point.x;
                    this.panY = point.y;
                    this.updateTransform();
                },
                fitToScreen: function() {
                    this.zoom = 1;
                    this.panX = 0;
                    this.panY = 0;
                    this.updateTransform();
                },
                updateTransform: function() {
                    this.element.style.transform = `scale(${this.zoom}) translate(${this.panX}px, ${this.panY}px)`;
                },
                clearAnnotations: function() {
                    this.annotations = [];
                    document.getElementById(`annotation-layer-${letter}`).innerHTML = '';
                },
                getAnnotations: function() {
                    return this.annotations;
                }
            };
        }

        // 应用对比模式
        function applyComparisonMode(mode) {
            const containerA = document.getElementById('image-a-container');
            const containerB = document.getElementById('image-b-container');
            const imgA = document.getElementById('compare-img-A');
            const imgB = document.getElementById('compare-img-B');

            if (!imgA || !imgB) return;

            // 重置样式
            containerA.style.width = '';
            containerB.style.width = '';
            containerA.style.display = '';
            containerB.style.display = '';
            containerB.style.position = '';
            containerB.style.top = '';
            containerB.style.left = '';
            containerB.style.opacity = '';
            imgA.style.opacity = '';
            imgB.style.opacity = '';

            // 移除滑块
            const sliders = document.querySelectorAll('.comparison-slider');
            sliders.forEach(slider => slider.remove());

            // 隐藏叠加控制
            document.getElementById('overlay-controls').style.display = 'none';

            switch (mode) {
                case 'side-by-side':
                    containerA.style.width = '50%';
                    containerB.style.width = '50%';
                    containerA.style.display = 'inline-block';
                    containerB.style.display = 'inline-block';
                    break;

                case 'overlay':
                    containerA.style.width = '100%';
                    containerB.style.width = '100%';
                    containerB.style.position = 'absolute';
                    containerB.style.top = '0';
                    containerB.style.left = '0';
                    imgB.style.opacity = '0.5';
                    document.getElementById('overlay-controls').style.display = 'block';
                    break;

                case 'slider':
                    containerA.style.width = '100%';
                    containerB.style.width = '100%';
                    containerB.style.position = 'absolute';
                    containerB.style.top = '0';
                    containerB.style.left = '0';
                    containerB.style.width = '50%';
                    containerB.style.overflow = 'hidden';

                    // 添加滑块
                    const slider = document.createElement('div');
                    slider.className = 'comparison-slider';
                    slider.addEventListener('mousedown', startSliderDrag);
                    containerA.appendChild(slider);
                    break;
            }
        }

        // 应用叠加透明度
        function applyOverlayOpacity(opacity) {
            const imgB = document.getElementById('compare-img-B');
            if (imgB) {
                imgB.style.opacity = opacity / 100;
            }
        }

        // 滑块拖拽功能
        function startSliderDrag(event) {
            event.preventDefault();

            const slider = event.target;
            const container = slider.parentElement;
            const imageB = document.getElementById('image-b-container');

            function drag(event) {
                const rect = container.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));

                slider.style.left = percentage + '%';
                imageB.style.width = percentage + '%';
            }

            function stopDrag() {
                document.removeEventListener('mousemove', drag);
                document.removeEventListener('mouseup', stopDrag);
            }

            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', stopDrag);
        }

        // 重置对比
        function resetComparison() {
            selectedImageA = null;
            selectedImageB = null;
            document.getElementById('image-a-container').innerHTML = `
                <div class="text-center p-5 bg-light rounded">
                    <h5 class="text-muted">请先选择影像A</h5>
                    <p class="text-muted">点击上方按钮选择要对比的影像</p>
                </div>
            `;
            document.getElementById('image-b-container').innerHTML = `
                <div class="text-center p-5 bg-light rounded">
                    <h5 class="text-muted">请先选择影像B</h5>
                    <p class="text-muted">点击上方按钮选择要对比的影像</p>
                </div>
            `;
            document.getElementById('image-a-info').textContent = '';
            document.getElementById('image-b-info').textContent = '';
            document.getElementById('comparison-toolbar').style.display = 'none';
        }

        // 启用测量工具
        function enableMeasurement() {
            showMessage('测量功能开发中...', 'info');
        }

        // 清除测量
        function clearMeasurements() {
            showMessage('清除测量完成', 'success');
        }

        // 过滤影像
        function filterImages(type) {
            const items = document.querySelectorAll('.image-item');
            items.forEach(item => {
                if (type === 'all') {
                    item.style.display = '';
                } else {
                    const isImage = item.querySelector('img') !== null;
                    const isVideo = item.querySelector('video') !== null;

                    if ((type === 'image' && isImage) || (type === 'video' && isVideo)) {
                        item.style.display = '';
                    } else {
                        item.style.display = 'none';
                    }
                }
            });
        }

        // 清空搜索框默认文字
        function clearSearchPlaceholder(input) {
            // 如果输入框的值等于占位符文字（表示用户还没有输入内容），则清空
            if (input.value === input.placeholder || input.value.trim() === '') {
                input.value = '';
            }
        }

        // 搜索患者函数
        function searchPatients(query, selectId) {
            const select = document.getElementById(selectId || 'compare-patient-select');
            if (!select) return;

            // 清空现有选项，只保留默认选项
            select.innerHTML = '<option value="">请选择患者...</option>';

            if (query.trim().length < 2) {
                // 如果搜索词太短，不进行搜索
                return;
            }

            // 调用搜索API
            apiRequest(`api/patients.php?action=search&q=${encodeURIComponent(query)}`)
                .then(data => {
                    if (data.patients && data.patients.length > 0) {
                        data.patients.forEach(patient => {
                            const option = document.createElement('option');
                            option.value = patient.id;
                            // 格式化显示：姓名(性别,年龄) - 电话 [影像:数量|就诊:数量|预约:数量]
                            const genderText = patient.gender === 'male' ? '男' : '女';
                            const phoneText = patient.phone ? ` - ${patient.phone}` : '';
                            const idCardText = patient.id_card ? ` (${patient.id_card.substring(0, 6)}****)` : '';

                            // 统计信息
                            const stats = patient.stats || {};
                            const statsText = ` [影像:${stats.images || 0}|就诊:${stats.medical_records || 0}|预约:${stats.appointments || 0}]`;

                            option.textContent = `${patient.name}(${genderText},${patient.age}岁)${phoneText}${idCardText}${statsText}`;

                            // 存储统计数据到选项的data属性中
                            option.dataset.stats = JSON.stringify(stats);

                            select.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.error('搜索患者失败:', error);
                });
        }

        // 显示患者统计信息
        function showPatientStats(patientId, selectElement) {
            const selectedOption = selectElement.selectedOptions[0];
            if (!selectedOption || !selectedOption.dataset.stats) return;

            const stats = JSON.parse(selectedOption.dataset.stats);

            // 在对比页面显示简单的统计提示
            const message = `${selectedOption.textContent.split(' [')[0]} - 影像:${stats.images || 0}个, 就诊记录:${stats.medical_records || 0}个`;
            showMessage(message, 'info');
        }

        // 清除患者统计信息
        function clearPatientStats() {
            // 对比页面不需要特殊的清除操作
        }

    </script>

    <!-- Footer -->
    <footer class="system-footer">
        <div class="footer-content">
            <div class="copyright-info">
                <p>&copy; 2025 义乌市噢欧进出口有限公司  | <a href="http://silubaba.com.cn" target="_blank">silubaba.com.cn</a></p>
                <p>技术支持: 15057908025</p>
            </div>
        </div>
    </footer>
</body>
</html>
