<?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="edit_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>
    <!-- Fabric.js for image editing -->
    <script src="assets/js/vendor/fabric.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 data-i18n="system_name">口腔检查系统</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">
                    <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 active">
                    <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="edit">影像编辑</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>

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

                <!-- 编辑控制面板 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="edit-patient-select" class="form-label" data-i18n="select_patient">选择患者</label>
                                <div class="input-group">
                                    <input type="text" id="edit-patient-search" class="form-control" data-i18n="placeholder_search_patient" placeholder="搜索患者姓名、电话或身份证号...">
                                    <select id="edit-patient-select" class="form-select">
                                        <option value="" data-i18n="please_select_patient">请选择患者...</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="d-flex gap-2 mt-4">
                                    <button class="btn btn-primary" onclick="openImageSelector()" data-i18n="select_image">选择影像</button>
                                    <button class="btn btn-success" id="save-edits" onclick="saveEditedImage()" disabled data-i18n="save_edits">保存编辑</button>
                                    <button class="btn btn-secondary" onclick="resetCanvas()" data-i18n="reset">重置</button>
                                    <button class="btn btn-danger" onclick="clearCanvas()" data-i18n="clear_canvas">清空画布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 编辑工具栏 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 data-i18n="edit_tools">编辑工具</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2">
                                <h6 data-i18n="drawing_tools">绘图工具</h6>
                                <div class="btn-group-vertical w-100" role="group">
                                    <input type="radio" class="btn-check" name="draw-tool" id="tool-select" value="select" checked>
                                    <label class="btn btn-outline-primary btn-sm" for="tool-select" data-i18n="select">选择</label>
                                    <input type="radio" class="btn-check" name="draw-tool" id="tool-pencil" value="pencil">
                                    <label class="btn btn-outline-primary btn-sm" for="tool-pencil" data-i18n="pencil">铅笔</label>
                                    <input type="radio" class="btn-check" name="draw-tool" id="tool-line" value="line">
                                    <label class="btn btn-outline-primary btn-sm" for="tool-line" data-i18n="line">直线</label>
                                    <input type="radio" class="btn-check" name="draw-tool" id="tool-rectangle" value="rectangle">
                                    <label class="btn btn-outline-primary btn-sm" for="tool-rectangle" data-i18n="rectangle">矩形</label>
                                    <input type="radio" class="btn-check" name="draw-tool" id="tool-circle" value="circle">
                                    <label class="btn btn-outline-primary btn-sm" for="tool-circle" data-i18n="circle">圆形</label>
                                    <input type="radio" class="btn-check" name="draw-tool" id="tool-arrow" value="arrow">
                                    <label class="btn btn-outline-primary btn-sm" for="tool-arrow" data-i18n="arrow">箭头</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <h6 data-i18n="color_settings">颜色设置</h6>
                                <div class="mb-2">
                                    <label for="stroke-color" class="form-label small" data-i18n="stroke_color">线条颜色</label>
                                    <input type="color" id="stroke-color" class="form-control form-control-color" value="#ff0000">
                                </div>
                                <div class="mb-2">
                                    <label for="fill-color" class="form-label small" data-i18n="fill_color">填充颜色</label>
                                    <input type="color" id="fill-color" class="form-control form-control-color" value="#ff0000">
                                </div>
                                <div class="mb-2">
                                    <label for="stroke-width" class="form-label small" data-i18n="stroke_width">线条宽度</label>
                                    <input type="range" id="stroke-width" class="form-range" min="1" max="20" value="2">
                                    <small class="text-muted" id="stroke-width-value">2px</small>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <h6 data-i18n="text_tools">文字工具</h6>
                                <button class="btn btn-outline-info btn-sm w-100 mb-2" onclick="addText()" data-i18n="add_text">添加文字</button>
                                <div class="mb-2">
                                    <label for="font-size" class="form-label small" data-i18n="font_size">字体大小</label>
                                    <select id="font-size" class="form-select form-select-sm">
                                        <option value="12">12px</option>
                                        <option value="16">16px</option>
                                        <option value="20" selected>20px</option>
                                        <option value="24">24px</option>
                                        <option value="32">32px</option>
                                        <option value="48">48px</option>
                                    </select>
                                </div>
                                <div class="mb-2">
                                    <label for="text-color" class="form-label small" data-i18n="text_color">文字颜色</label>
                                    <input type="color" id="text-color" class="form-control form-control-color" value="#000000">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <h6 data-i18n="image_adjustment">图像调整</h6>
                                <div class="mb-2">
                                    <label for="brightness" class="form-label small" data-i18n="brightness">亮度</label>
                                    <input type="range" id="brightness" class="form-range" min="-100" max="100" value="0">
                                    <small class="text-muted" id="brightness-value">0</small>
                                </div>
                                <div class="mb-2">
                                    <label for="contrast" class="form-label small" data-i18n="contrast">对比度</label>
                                    <input type="range" id="contrast" class="form-range" min="-100" max="100" value="0">
                                    <small class="text-muted" id="contrast-value">0</small>
                                </div>
                                <div class="mb-2">
                                    <label for="saturation" class="form-label small" data-i18n="saturation">饱和度</label>
                                    <input type="range" id="saturation" class="form-range" min="-100" max="100" value="0">
                                    <small class="text-muted" id="saturation-value">0</small>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <h6 data-i18n="transform_tools">变换工具</h6>
                                <div class="mb-2">
                                    <label class="form-label small" data-i18n="rotation_angle">旋转角度</label>
                                    <input type="number" id="rotation-angle" class="form-control form-control-sm" value="0" step="1" min="-360" max="360">
                                </div>
                                <button class="btn btn-outline-warning btn-sm w-100 mb-2" onclick="rotateLeft()" data-i18n="rotate_left_90">左转90°</button>
                                <button class="btn btn-outline-warning btn-sm w-100 mb-2" onclick="rotateRight()" data-i18n="rotate_right_90">右转90°</button>
                                <button class="btn btn-outline-warning btn-sm w-100 mb-2" onclick="rotateCustom()" data-i18n="custom_rotation">自定义旋转</button>
                                <button class="btn btn-outline-warning btn-sm w-100 mb-2" onclick="flipHorizontal()" data-i18n="flip_horizontal">水平翻转</button>
                                <button class="btn btn-outline-warning btn-sm w-100 mb-2" onclick="flipVertical()" data-i18n="flip_vertical">垂直翻转</button>
                                <div class="mt-2">
                                    <label class="form-label small" data-i18n="scale_ratio">缩放比例</label>
                                    <input type="range" id="scale-factor" class="form-range" min="0.1" max="3" step="0.1" value="1">
                                    <small class="text-muted" id="scale-value">1.0x</small>
                                </div>
                                <button class="btn btn-outline-warning btn-sm w-100 mt-2" onclick="applyScale()" data-i18n="apply_scale">应用缩放</button>
                            </div>
                            <div class="col-md-2">
                                <h6 data-i18n="measurement_tools">测量工具</h6>
                                <button class="btn btn-outline-success btn-sm w-100 mb-2" onclick="enableMeasurement()" data-i18n="measurement_mode">测量模式</button>
                                <button class="btn btn-outline-primary btn-sm w-100 mb-2" onclick="measureLength()" data-i18n="length_measurement">长度测量</button>
                                <button class="btn btn-outline-primary btn-sm w-100 mb-2" onclick="measureAngle()" data-i18n="angle_measurement">角度测量</button>
                                <button class="btn btn-outline-primary btn-sm w-100 mb-2" onclick="measureArea()" data-i18n="area_measurement">面积测量</button>
                                <button class="btn btn-outline-info btn-sm w-100 mb-2" onclick="finishAreaMeasurement()" data-i18n="finish_area_measurement">结束面积测量</button>
                                <button class="btn btn-outline-warning btn-sm w-100" onclick="clearMeasurements()" data-i18n="clear_measurements">清除测量</button>
                            </div>
                        </div>

                        <!-- 预设模板栏 -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <h6 data-i18n="preset_templates">预设模板</h6>
                                <div class="d-flex gap-2 flex-wrap">
                                    <button class="btn btn-outline-secondary btn-sm" onclick="loadTemplate('basic')" data-i18n="basic_annotation">基础标注</button>
                                    <button class="btn btn-outline-secondary btn-sm" onclick="loadTemplate('dental')" data-i18n="dental_specialized">牙科专用</button>
                                    <button class="btn btn-outline-secondary btn-sm" onclick="loadTemplate('measurement')" data-i18n="measurement_specialized">测量专用</button>
                                    <button class="btn btn-outline-success btn-sm" onclick="saveAsTemplate()" data-i18n="save_as_template">保存为模板</button>
                                    <button class="btn btn-outline-info btn-sm" onclick="loadCustomTemplate()" data-i18n="load_template">加载模板</button>
                                </div>
                            </div>
                        </div>

                        <!-- 图层管理栏 -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <h6 data-i18n="layer_management">图层管理</h6>
                                <div class="d-flex gap-2 align-items-center flex-wrap">
                                    <select id="layer-select" class="form-select form-select-sm" style="width: auto;">
                                        <option value="" data-i18n="select_layer">选择图层...</option>
                                    </select>
                                    <button class="btn btn-outline-primary btn-sm" onclick="addNewLayer()" data-i18n="create_new_layer">新建图层</button>
                                    <button class="btn btn-outline-warning btn-sm" onclick="toggleLayerVisibility()" data-i18n="toggle_visibility">切换可见性</button>
                                    <button class="btn btn-outline-danger btn-sm" onclick="deleteCurrentLayer()" data-i18n="delete_layer">删除图层</button>
                                    <div class="form-check ms-3">
                                        <input class="form-check-input" type="checkbox" id="show-measurements-only" onchange="toggleMeasurementView()">
                                        <label class="form-check-label small" for="show-measurements-only" data-i18n="show_measurements_only">
                                            只显示测量
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>

                <!-- 编辑画布区域 -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 data-i18n="edit_area">编辑区域</h5>
                            </div>
                            <div class="card-body">
                                <div id="canvas-container" class="text-center">
                                    <canvas id="edit-canvas" width="800" height="600"></canvas>
                                    <div id="canvas-placeholder" class="p-5 bg-light rounded" style="display: none;">
                                        <h4 class="text-muted" data-i18n="select_image_to_edit">请先选择影像进行编辑</h4>
                                        <p class="text-muted" data-i18n="click_button_to_select_image">点击上方按钮选择要编辑的影像</p>
                                    </div>
                                </div>
                            </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="edit-image-patient-select" class="form-label" data-i18n="select_patient">选择患者</label>
                        <select id="edit-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="edit-filter-type" id="edit-filter-all" value="all" checked>
                            <label class="btn btn-outline-primary btn-sm" for="edit-filter-all" data-i18n="all">全部</label>
                            <input type="radio" class="btn-check" name="edit-filter-type" id="edit-filter-images" value="image">
                            <label class="btn btn-outline-primary btn-sm" for="edit-filter-images" data-i18n="images">图片</label>
                            <input type="radio" class="btn-check" name="edit-filter-type" id="edit-filter-videos" value="video">
                            <label class="btn btn-outline-primary btn-sm" for="edit-filter-videos" data-i18n="videos">视频</label>
                        </div>
                    </div>
                    <div id="edit-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="selectEditImage()" data-i18n="select">选择</button>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/js/main.js"></script>
    <script src="assets/js/language-switcher.js"></script>
    <script src="assets/js/image.js"></script>
    <script>
        let canvas = null;
        let currentTool = 'select';
        let selectedImageData = null;
        let originalImage = null;

        // 测量相关变量
        let measurementMode = false;
        let measurementPoints = [];
        let measurements = [];
        let calibrationFactor = 1.0; // 像素到实际单位的转换因子

        // 图层管理变量
        let currentLayer = null;
        let layers = [];
        let layerCounter = 0;

        // 预设模板
        const predefinedTemplates = {
            basic: {
                name: '基础标注',
                elements: [
                    { type: 'text', text: '标注', x: 50, y: 50, fontSize: 20, fill: '#ff0000' }
                ]
            },
            dental: {
                name: '牙科专用',
                elements: [
                    { type: 'text', text: '牙齿编号', x: 50, y: 50, fontSize: 16, fill: '#0066cc' },
                    { type: 'circle', x: 100, y: 100, radius: 30, fill: 'transparent', stroke: '#ff6600', strokeWidth: 2 }
                ]
            },
            measurement: {
                name: '测量专用',
                elements: [
                    { type: 'text', text: '测量结果', x: 50, y: 50, fontSize: 14, fill: '#009900' }
                ]
            }
        };

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadPatientSelectors();
            initCanvas();
            initToolListeners();
            initAdjustmentListeners();

            // 绑定患者选择器事件
            document.getElementById('edit-patient-select').addEventListener('change', function() {
                const patientId = this.value;
                if (patientId) {
                    showPatientStats(patientId, this);
                } else {
                    clearPatientStats();
                }
                // 更新模态框中的患者选择器
                const modalPatientSelect = document.getElementById('edit-image-patient-select');
                if (modalPatientSelect) {
                    modalPatientSelect.value = patientId;
                }
                // 清空当前编辑状态
                clearCanvas();
            });

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

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

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

        // 初始化画布
        function initCanvas() {
            canvas = new fabric.Canvas('edit-canvas', {
                selection: true,
                backgroundColor: '#f8f9fa'
            });

            // 禁用右键菜单
            canvas.on('mouse:down', function(options) {
                if (options.e.button === 3) {
                    options.e.preventDefault();
                    return false;
                }
            });

            // 监听选择变化
            canvas.on('selection:created', updateToolState);
            canvas.on('selection:updated', updateToolState);
            canvas.on('selection:cleared', updateToolState);

            // 初始化自动保存
            initAutoSave();

            // 初始化图层管理
            initLayerManagement();

            console.log('画布初始化完成');
        }

        // 初始化自动保存
        function initAutoSave() {
            let autoSaveTimer = null;
            let hasUnsavedChanges = false;

            // 监听画布变化
            canvas.on('object:added', markAsChanged);
            canvas.on('object:removed', markAsChanged);
            canvas.on('object:modified', markAsChanged);

            function markAsChanged() {
                hasUnsavedChanges = true;

                // 清除之前的定时器
                if (autoSaveTimer) {
                    clearTimeout(autoSaveTimer);
                }

                // 设置新的自动保存定时器（30秒后自动保存）
                autoSaveTimer = setTimeout(function() {
                    if (hasUnsavedChanges && selectedImageData) {
                        console.log('自动保存中...');
                        saveEditedImage();
                        hasUnsavedChanges = false;
                    }
                }, 30000); // 30秒
            }

            // 页面卸载时保存
            window.addEventListener('beforeunload', function(e) {
                if (hasUnsavedChanges && selectedImageData) {
                    // 取消自动保存，改为同步保存
                    if (autoSaveTimer) {
                        clearTimeout(autoSaveTimer);
                    }
                    saveEditedImage();
                }
            });
        }

        // 初始化图层管理
        function initLayerManagement() {
            // 创建默认图层
            addNewLayer('背景层');
            addNewLayer('标注层');
            addNewLayer('测量层');

            updateLayerSelect();
        }

        // 添加新图层
        function addNewLayer(name = null) {
            if (!name) {
                name = `图层 ${++layerCounter}`;
            }

            const layer = {
                id: Date.now(),
                name: name,
                visible: true,
                locked: false,
                objects: [],
                zIndex: layers.length
            };

            layers.push(layer);

            if (!currentLayer) {
                currentLayer = layer;
            }

            updateLayerSelect();
            return layer;
        }

        // 更新图层选择器
        function updateLayerSelect() {
            const select = document.getElementById('layer-select');
            select.innerHTML = '<option value="">选择图层...</option>';

            layers.forEach(layer => {
                const option = document.createElement('option');
                option.value = layer.id;
                option.textContent = `${layer.name} ${layer.visible ? '👁️' : '🙈'} ${layer.locked ? '🔒' : ''}`;
                if (currentLayer && currentLayer.id === layer.id) {
                    option.selected = true;
                }
                select.appendChild(option);
            });
        }

        // 初始化工具监听器
        function initToolListeners() {
            // 绘图工具切换
            document.querySelectorAll('input[name="draw-tool"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    currentTool = this.value;
                    updateCursor();
                });
            });

            // 颜色变化监听
            document.getElementById('stroke-color').addEventListener('change', function() {
                if (canvas.getActiveObject()) {
                    canvas.getActiveObject().set('stroke', this.value);
                    canvas.renderAll();
                }
            });

            document.getElementById('fill-color').addEventListener('change', function() {
                if (canvas.getActiveObject()) {
                    canvas.getActiveObject().set('fill', this.value);
                    canvas.renderAll();
                }
            });

            // 线条宽度变化监听
            document.getElementById('stroke-width').addEventListener('input', function() {
                document.getElementById('stroke-width-value').textContent = this.value + 'px';
                if (canvas.getActiveObject()) {
                    canvas.getActiveObject().set('strokeWidth', parseInt(this.value));
                    canvas.renderAll();
                }
            });

            // 变换工具监听器
            document.getElementById('scale-factor').addEventListener('input', function() {
                document.getElementById('scale-value').textContent = this.value + 'x';
            });

            // 鼠标事件监听
            canvas.on('mouse:down', handleMouseDown);
            canvas.on('mouse:move', handleMouseMove);
            canvas.on('mouse:up', handleMouseUp);
        }

        // 初始化图像调整监听器
        function initAdjustmentListeners() {
            ['brightness', 'contrast', 'saturation'].forEach(adjustment => {
                document.getElementById(adjustment).addEventListener('input', function() {
                    document.getElementById(adjustment + '-value').textContent = this.value;
                    applyImageAdjustments();
                });
            });
        }

        // 更新光标样式
        function updateCursor() {
            switch (currentTool) {
                case 'pencil':
                    canvas.defaultCursor = 'crosshair';
                    break;
                case 'select':
                    canvas.defaultCursor = 'default';
                    break;
                default:
                    canvas.defaultCursor = 'crosshair';
                    break;
            }
            canvas.renderAll();
        }

        // 更新工具状态
        function updateToolState() {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                document.getElementById('stroke-color').value = activeObject.stroke || '#ff0000';
                document.getElementById('fill-color').value = activeObject.fill || '#ff0000';
                document.getElementById('stroke-width').value = activeObject.strokeWidth || 2;
                document.getElementById('stroke-width-value').textContent = (activeObject.strokeWidth || 2) + 'px';
            }
        }

        // 鼠标事件处理
        let isCanvasDrawing = false;
        let startPoint = null;

        function handleMouseDown(options) {
            if (currentTool === 'select') return;

            const pointer = canvas.getPointer(options.e);

            if (currentTool === 'measurement' && measurementMode) {
                handleMeasurementClick(pointer);
                return;
            }

            isCanvasDrawing = true;
            startPoint = pointer;

            switch (currentTool) {
                case 'pencil':
                    startFreeDrawing();
                    break;
            }
        }

        function handleMouseMove(options) {
            if (!isCanvasDrawing || currentTool === 'select') return;

            const pointer = canvas.getPointer(options.e);

            switch (currentTool) {
                case 'pencil':
                    continueFreeDrawing(pointer);
                    break;
                case 'line':
                    updatePreviewLine(pointer);
                    break;
                case 'rectangle':
                    updatePreviewRectangle(pointer);
                    break;
                case 'circle':
                    updatePreviewCircle(pointer);
                    break;
                case 'arrow':
                    updatePreviewArrow(pointer);
                    break;
            }
        }

        function handleMouseUp(options) {
            if (!isCanvasDrawing || currentTool === 'select') return;

            isCanvasDrawing = false;
            const pointer = canvas.getPointer(options.e);

            switch (currentTool) {
                case 'line':
                    createLine(pointer);
                    break;
                case 'rectangle':
                    createRectangle(pointer);
                    break;
                case 'circle':
                    createCircle(pointer);
                    break;
                case 'arrow':
                    createArrow(pointer);
                    break;
            }

            startPoint = null;
            canvas.renderAll();
        }

        // 自由绘图
        function startFreeDrawing() {
            canvas.isDrawingMode = true;
            canvas.freeDrawingBrush.color = document.getElementById('stroke-color').value;
            canvas.freeDrawingBrush.width = parseInt(document.getElementById('stroke-width').value);
        }

        function continueFreeDrawing(pointer) {
            // 自由绘图由Fabric.js自动处理
        }

        // 创建形状
        function createLine(endPoint) {
            const line = new fabric.Line([startPoint.x, startPoint.y, endPoint.x, endPoint.y], {
                stroke: document.getElementById('stroke-color').value,
                strokeWidth: parseInt(document.getElementById('stroke-width').value),
                selectable: true
            });
            canvas.add(line);
        }

        function createRectangle(endPoint) {
            const width = endPoint.x - startPoint.x;
            const height = endPoint.y - startPoint.y;
            const rect = new fabric.Rect({
                left: startPoint.x,
                top: startPoint.y,
                width: width,
                height: height,
                fill: document.getElementById('fill-color').value,
                stroke: document.getElementById('stroke-color').value,
                strokeWidth: parseInt(document.getElementById('stroke-width').value),
                selectable: true
            });
            canvas.add(rect);
        }

        function createCircle(endPoint) {
            const radius = Math.sqrt(Math.pow(endPoint.x - startPoint.x, 2) + Math.pow(endPoint.y - startPoint.y, 2)) / 2;
            const circle = new fabric.Circle({
                radius: radius,
                fill: document.getElementById('fill-color').value,
                stroke: document.getElementById('stroke-color').value,
                strokeWidth: parseInt(document.getElementById('stroke-width').value),
                left: startPoint.x,
                top: startPoint.y,
                selectable: true
            });
            canvas.add(circle);
        }

        function createArrow(endPoint) {
            // 创建箭头（由线条和三角形组成）
            const angle = Math.atan2(endPoint.y - startPoint.y, endPoint.x - startPoint.x);
            const headLength = 20;

            // 主线
            const line = new fabric.Line([startPoint.x, startPoint.y, endPoint.x, endPoint.y], {
                stroke: document.getElementById('stroke-color').value,
                strokeWidth: parseInt(document.getElementById('stroke-width').value),
                selectable: true
            });

            // 箭头头部
            const arrowHead = new fabric.Triangle({
                width: headLength,
                height: headLength,
                fill: document.getElementById('stroke-color').value,
                left: endPoint.x,
                top: endPoint.y,
                angle: (angle * 180 / Math.PI) + 90,
                originX: 'center',
                originY: 'bottom',
                selectable: true
            });

            canvas.add(line);
            canvas.add(arrowHead);
        }

        // 预览形状更新（用于鼠标移动时的预览）
        function updatePreviewLine(pointer) {
            // 简化实现，实际可以使用临时对象
        }

        function updatePreviewRectangle(pointer) {
            // 简化实现
        }

        function updatePreviewCircle(pointer) {
            // 简化实现
        }

        function updatePreviewArrow(pointer) {
            // 简化实现
        }

        // 添加文字
        function addText() {
            const text = new fabric.IText('双击编辑文字', {
                left: 100,
                top: 100,
                fontSize: parseInt(document.getElementById('font-size').value),
                fill: document.getElementById('text-color').value,
                fontFamily: 'Arial',
                selectable: true
            });
            canvas.add(text);
            canvas.setActiveObject(text);
        }

        // 图像调整
        function applyImageAdjustments() {
            if (!originalImage) return;

            const brightness = parseInt(document.getElementById('brightness').value);
            const contrast = parseInt(document.getElementById('contrast').value);
            const saturation = parseInt(document.getElementById('saturation').value);

            // 创建图像过滤器
            const filters = [];

            if (brightness !== 0) {
                filters.push(new fabric.Image.filters.Brightness({ brightness: brightness / 100 }));
            }

            if (contrast !== 0) {
                filters.push(new fabric.Image.filters.Contrast({ contrast: contrast / 100 }));
            }

            if (saturation !== 0) {
                filters.push(new fabric.Image.filters.Saturation({ saturation: saturation / 100 }));
            }

            originalImage.filters = filters;
            originalImage.applyFilters();
            canvas.renderAll();
        }

        // 变换操作
        function rotateLeft() {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                activeObject.rotate(activeObject.angle - 90);
                canvas.renderAll();
            }
        }

        function rotateRight() {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                activeObject.rotate(activeObject.angle + 90);
                canvas.renderAll();
            }
        }

        function flipHorizontal() {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                activeObject.flipX = !activeObject.flipX;
                canvas.renderAll();
            }
        }

        function flipVertical() {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                activeObject.flipY = !activeObject.flipY;
                canvas.renderAll();
            }
        }

        // 自定义旋转
        function rotateCustom() {
            const activeObject = canvas.getActiveObject();
            const angle = parseFloat(document.getElementById('rotation-angle').value) || 0;

            if (activeObject) {
                activeObject.rotate(angle);
                canvas.renderAll();
                showMessage(`${getGlobalLanguagePack ? getGlobalLanguagePack().rotated_degrees : '已旋转'} ${angle}°`, 'success');
            } else {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().select_rotation_object_first : '请先选择要旋转的对象', 'warning');
            }
        }

        // 应用缩放
        function applyScale() {
            const activeObject = canvas.getActiveObject();
            const scale = parseFloat(document.getElementById('scale-factor').value) || 1;

            if (activeObject) {
                activeObject.scaleX = scale;
                activeObject.scaleY = scale;
                canvas.renderAll();
                showMessage(`${getGlobalLanguagePack ? getGlobalLanguagePack().scaled_to : '已缩放至'} ${scale}x`, 'success');
            } else {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().select_scale_object_first : '请先选择要缩放的对象', 'warning');
            }
        }

        // 对象操作
        function deleteSelected() {
            const activeObjects = canvas.getActiveObjects();
            activeObjects.forEach(obj => {
                canvas.remove(obj);
            });
            canvas.discardActiveObject();
            canvas.renderAll();
        }

        function bringToFront() {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                canvas.bringToFront(activeObject);
            }
        }

        function sendToBack() {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                canvas.sendToBack(activeObject);
            }
        }

        function duplicate() {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                activeObject.clone((cloned) => {
                    cloned.set({
                        left: cloned.left + 10,
                        top: cloned.top + 10
                    });
                    canvas.add(cloned);
                    canvas.setActiveObject(cloned);
                });
            }
        }

        // 重置画布
        function resetCanvas() {
            if (selectedImageData) {
                loadImageToCanvas(selectedImageData.file_path);
            }
        }

        // 清空画布
        function clearCanvas() {
            canvas.clear();
            canvas.backgroundColor = '#f8f9fa';
            canvas.renderAll();
            selectedImageData = null;
            originalImage = null;
            document.getElementById('save-edits').disabled = true;
        }

        // 打开影像选择器
        function openImageSelector() {
            const patientSelect = document.getElementById('edit-patient-select');
            const modalPatientSelect = document.getElementById('edit-image-patient-select');

            modalPatientSelect.value = patientSelect.value;

            const modal = new bootstrap.Modal(document.getElementById('imageSelectorModal'));
            modal.show();
            loadEditImageGallery();
        }

        // 加载编辑影像库
        function loadEditImageGallery() {
            const patientSelect = document.getElementById('edit-image-patient-select');
            const patientId = patientSelect.value;

            if (!patientId) {
                document.getElementById('edit-image-gallery').innerHTML = '<p class="text-center text-muted">请先选择患者</p>';
                return;
            }

            patientSelect.value = patientId;

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

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

            if (images.length === 0) {
                container.innerHTML = '<p class="text-center text-muted">该患者暂无影像数据</p>';
                return;
            }

            container.innerHTML = '';

            images.forEach(image => {
                if (image.file_type === 'image') { // 只显示图片，不显示视频
                    const item = document.createElement('div');
                    item.className = 'image-item';
                    item.onclick = () => selectEditGalleryImage(image);

                    item.innerHTML = `
                        <img src="${image.file_path}" alt="${image.original_name}">
                        <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);
                }
            });
        }

        // 选择编辑影像
        let selectedEditImage = null;

        function selectEditGalleryImage(image) {
            // 移除之前的选择
            document.querySelectorAll('#edit-image-gallery .image-item.selected').forEach(item => {
                item.classList.remove('selected');
            });

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

        // 确认选择编辑影像
        function selectEditImage() {
            if (!selectedEditImage) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().select_image_first : '请先选择一个影像', 'warning');
                return;
            }

            // 加载图像到画布
            loadImageToCanvas(selectedEditImage.file_path);
            selectedImageData = selectedEditImage;

            bootstrap.Modal.getInstance(document.getElementById('imageSelectorModal')).hide();

            // 启用保存按钮
            document.getElementById('save-edits').disabled = false;
        }

        // 加载图像到画布
        function loadImageToCanvas(imagePath) {
            fabric.Image.fromURL(imagePath, function(img) {
                // 调整图像大小以适应画布
                const canvasWidth = canvas.width;
                const canvasHeight = canvas.height;
                const imgAspect = img.width / img.height;
                const canvasAspect = canvasWidth / canvasHeight;

                if (imgAspect > canvasAspect) {
                    // 图像更宽，以宽度为准
                    img.scaleToWidth(canvasWidth * 0.8);
                } else {
                    // 图像更高，以高度为准
                    img.scaleToHeight(canvasHeight * 0.8);
                }

                // 居中图像
                img.set({
                    left: (canvasWidth - img.getScaledWidth()) / 2,
                    top: (canvasHeight - img.getScaledHeight()) / 2,
                    selectable: true,
                    evented: true
                });

                // 清空画布并添加图像
                canvas.clear();
                canvas.backgroundColor = '#f8f9fa';
                canvas.add(img);
                canvas.setActiveObject(img);

                originalImage = img;
                canvas.renderAll();

                // 隐藏占位符
                document.getElementById('canvas-placeholder').style.display = 'none';
            });
        }

        // 保存编辑后的图像
        function saveEditedImage(silent = false) {
            if (!selectedImageData) {
                if (!silent) {
                    showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().select_edit_image_first : '请先选择要编辑的影像', 'warning');
                }
                return;
            }

            // 将画布转换为图像
            const dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.9
            });

            // 创建FormData上传
            const formData = new FormData();
            formData.append('edited_image', dataURL);
            formData.append('original_image_id', selectedImageData.id);
            formData.append('patient_id', selectedImageData.patient_id);
            formData.append('notes', `编辑自 ${selectedImageData.original_name}`);

            if (!silent) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().saving_edited_image : '正在保存编辑后的图像...', 'info');
            }

            fetch('api/save_edited.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (!silent) {
                        showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().edited_image_saved : '编辑后的图像已保存', 'success');
                    } else {
                        console.log('自动保存完成');
                    }
                    // 可以选择重新加载患者影像列表
                } else {
                    const errorMsg = '保存失败: ' + data.message;
                    if (!silent) {
                        showMessage(errorMsg, 'danger');
                    } else {
                        console.error('自动保存失败:', errorMsg);
                    }
                }
            })
            .catch(error => {
                console.error('保存错误:', error);
                const errorMsg = '保存过程中发生错误';
                if (!silent) {
                    showMessage(errorMsg, 'danger');
                } else {
                    console.error('自动保存错误:', error);
                }
            });
        }

        // ==================== 测量工具功能 ====================

        // 启用测量模式
        function enableMeasurement() {
            measurementMode = !measurementMode;
            const btn = document.querySelector('button[onclick="enableMeasurement()"]');

            if (measurementMode) {
                currentTool = 'measurement';
                btn.classList.remove('btn-outline-success');
                btn.classList.add('btn-success');
                canvas.defaultCursor = 'crosshair';
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().measurement_mode_enabled : '已启用测量模式，点击图像添加测量点', 'info');
            } else {
                currentTool = 'select';
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-success');
                canvas.defaultCursor = 'default';
                measurementPoints = [];
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().measurement_mode_disabled : '已退出测量模式', 'info');
            }
        }

        // 长度测量
        function measureLength() {
            if (!measurementMode) {
                enableMeasurement();
            }
            showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().length_measurement_guide : '长度测量：点击两个点确定长度', 'info');
            measurementPoints = [];
            currentMeasurementType = 'length';
        }

        // 角度测量
        function measureAngle() {
            if (!measurementMode) {
                enableMeasurement();
            }
            showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().angle_measurement_guide : '角度测量：点击三个点确定角度', 'info');
            measurementPoints = [];
            currentMeasurementType = 'angle';
        }

        // 面积测量
        function measureArea() {
            if (!measurementMode) {
                enableMeasurement();
            }
            showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().area_measurement_guide : '面积测量：点击多个点围成区域', 'info');
            measurementPoints = [];
            currentMeasurementType = 'area';
        }

        // 结束面积测量
        function finishAreaMeasurement() {
            if (currentMeasurementType !== 'area' || measurementPoints.length < 3) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().select_area_measurement_mode : '请先选择面积测量模式并至少选择3个点', 'warning');
                return;
            }

            createAreaMeasurement();
            measurementPoints = [];
            showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().area_measurement_completed : '面积测量完成', 'success');
        }

        // 创建面积测量
        function createAreaMeasurement() {
            if (measurementPoints.length < 3) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().area_measurement_min_points : '面积测量至少需要3个点', 'warning');
                return;
            }

            // 计算多边形面积
            const area = calculatePolygonArea(measurementPoints);

            // 创建多边形线条
            const points = [];
            measurementPoints.forEach(point => {
                points.push(point.x, point.y);
            });
            // 闭合多边形
            points.push(measurementPoints[0].x, measurementPoints[0].y);

            const polygon = new fabric.Polygon(measurementPoints, {
                fill: 'rgba(255, 0, 0, 0.1)',
                stroke: '#ff0000',
                strokeWidth: 2,
                selectable: false,
                evented: false
            });

            // 计算质心位置用于放置文本
            const centroid = calculateCentroid(measurementPoints);
            const text = new fabric.Text(`${area.toFixed(2)}px²`, {
                left: centroid.x,
                top: centroid.y,
                fontSize: 12,
                fill: '#ff0000',
                selectable: false,
                evented: false
            });

            canvas.add(polygon);
            canvas.add(text);

            measurements.push({
                type: 'area',
                polygon: polygon,
                text: text,
                points: [...measurementPoints],
                value: area
            });

            canvas.renderAll();
        }

        // 计算多边形面积
        function calculatePolygonArea(points) {
            let area = 0;
            const n = points.length;

            for (let i = 0; i < n; i++) {
                const j = (i + 1) % n;
                area += points[i].x * points[j].y;
                area -= points[j].x * points[i].y;
            }

            area = Math.abs(area) / 2;
            return area * calibrationFactor * calibrationFactor;
        }

        // 计算多边形质心
        function calculateCentroid(points) {
            let x = 0, y = 0;
            const n = points.length;

            for (let i = 0; i < n; i++) {
                x += points[i].x;
                y += points[i].y;
            }

            return { x: x / n, y: y / n };
        }

        // 清除测量
        function clearMeasurements() {
            measurements.forEach(measurement => {
                if (measurement.line) canvas.remove(measurement.line);
                if (measurement.text) canvas.remove(measurement.text);
                if (measurement.polygon) canvas.remove(measurement.polygon);
            });
            measurements = [];
            canvas.renderAll();
            showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().all_measurements_cleared : '已清除所有测量结果', 'success');
        }

        // 处理测量点击
        function handleMeasurementClick(pointer) {
            measurementPoints.push({
                x: pointer.x,
                y: pointer.y
            });

            // 添加测量点标记
            const point = new fabric.Circle({
                radius: 3,
                fill: '#ff0000',
                left: pointer.x - 3,
                top: pointer.y - 3,
                selectable: false,
                evented: false
            });
            canvas.add(point);

            // 根据测量类型处理
            switch (currentMeasurementType) {
                case 'length':
                    if (measurementPoints.length === 2) {
                        createLengthMeasurement();
                        measurementPoints = [];
                    }
                    break;
                case 'angle':
                    if (measurementPoints.length === 3) {
                        createAngleMeasurement();
                        measurementPoints = [];
                    }
                    break;
                case 'area':
                    // 面积测量至少需要3个点
                    if (measurementPoints.length >= 3) {
                        showMessage(`${getGlobalLanguagePack ? getGlobalLanguagePack().points_selected : '已选择'} ${measurementPoints.length} ${getGlobalLanguagePack ? getGlobalLanguagePack().points_click_finish : '个点，点击"结束面积测量"完成测量'}`, 'info');
                    }
                    break;
            }
        }

        // 创建长度测量
        function createLengthMeasurement() {
            const [point1, point2] = measurementPoints;

            // 计算距离
            const distance = Math.sqrt(
                Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)
            );
            const actualDistance = distance * calibrationFactor;

            // 创建测量线
            const line = new fabric.Line([point1.x, point1.y, point2.x, point2.y], {
                stroke: '#ff0000',
                strokeWidth: 2,
                selectable: false,
                evented: false
            });

            // 创建测量文本
            const midX = (point1.x + point2.x) / 2;
            const midY = (point1.y + point2.y) / 2;
            const text = new fabric.Text(`${actualDistance.toFixed(2)}px`, {
                left: midX,
                top: midY - 20,
                fontSize: 12,
                fill: '#ff0000',
                selectable: false,
                evented: false
            });

            canvas.add(line);
            canvas.add(text);

            measurements.push({
                type: 'length',
                line: line,
                text: text,
                points: [point1, point2],
                value: actualDistance
            });

            canvas.renderAll();
        }

        // 创建角度测量
        function createAngleMeasurement() {
            const [point1, point2, point3] = measurementPoints;

            // 计算角度
            const angle = calculateAngle(point1, point2, point3);
            const angleText = `${angle.toFixed(1)}°`;

            // 创建角度弧线
            const radius = 30;
            const arc = new fabric.Circle({
                radius: radius,
                startAngle: getAngle(point2, point1),
                endAngle: getAngle(point2, point3),
                stroke: '#00ff00',
                strokeWidth: 2,
                fill: '',
                left: point2.x - radius,
                top: point2.y - radius,
                selectable: false,
                evented: false
            });

            // 创建角度文本
            const text = new fabric.Text(angleText, {
                left: point2.x + 10,
                top: point2.y - 10,
                fontSize: 12,
                fill: '#00ff00',
                selectable: false,
                evented: false
            });

            canvas.add(arc);
            canvas.add(text);

            measurements.push({
                type: 'angle',
                line: arc,
                text: text,
                points: [point1, point2, point3],
                value: angle
            });

            canvas.renderAll();
        }

        // 辅助函数：计算角度
        function calculateAngle(p1, p2, p3) {
            const v1 = { x: p1.x - p2.x, y: p1.y - p2.y };
            const v2 = { x: p3.x - p2.x, y: p3.y - p2.y };

            const dot = v1.x * v2.x + v1.y * v2.y;
            const mag1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
            const mag2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);

            const cosAngle = dot / (mag1 * mag2);
            const angle = Math.acos(Math.max(-1, Math.min(1, cosAngle))) * (180 / Math.PI);

            return angle;
        }

        function getAngle(center, point) {
            return Math.atan2(point.y - center.y, point.x - center.x);
        }

        // ==================== 预设模板功能 ====================

        // 加载预设模板
        function loadTemplate(templateId) {
            if (!predefinedTemplates[templateId]) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().template_not_exist : '模板不存在', 'danger');
                return;
            }

            const template = predefinedTemplates[templateId];

            // 清除当前画布
            canvas.clear();
            canvas.backgroundColor = '#f8f9fa';

            // 添加模板元素
            template.elements.forEach(element => {
                let obj;
                switch (element.type) {
                    case 'text':
                        obj = new fabric.Text(element.text, {
                            left: element.x,
                            top: element.y,
                            fontSize: element.fontSize,
                            fill: element.fill,
                            selectable: true
                        });
                        break;
                    case 'circle':
                        obj = new fabric.Circle({
                            radius: element.radius,
                            left: element.x,
                            top: element.y,
                            fill: element.fill,
                            stroke: element.stroke,
                            strokeWidth: element.strokeWidth,
                            selectable: true
                        });
                        break;
                    case 'rectangle':
                        obj = new fabric.Rect({
                            left: element.x,
                            top: element.y,
                            width: element.width || 100,
                            height: element.height || 50,
                            fill: element.fill || 'transparent',
                            stroke: element.stroke || '#000000',
                            strokeWidth: element.strokeWidth || 2,
                            selectable: true
                        });
                        break;
                }

                if (obj) {
                    canvas.add(obj);
                }
            });

            canvas.renderAll();
            showMessage(`${getGlobalLanguagePack ? getGlobalLanguagePack().template_loaded : '已加载模板：'}${template.name}`, 'success');
        }

        // 保存为模板
        function saveAsTemplate() {
            const objects = canvas.getObjects();
            if (objects.length === 0) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().canvas_empty_cannot_save_template : '画布为空，无法保存模板', 'warning');
                return;
            }

            const templateName = prompt('请输入模板名称：');
            if (!templateName) return;

            const elements = objects.map(obj => {
                const element = {
                    type: obj.type,
                    left: obj.left,
                    top: obj.top,
                    fill: obj.fill,
                    stroke: obj.stroke,
                    strokeWidth: obj.strokeWidth
                };

                if (obj.type === 'text') {
                    element.text = obj.text;
                    element.fontSize = obj.fontSize;
                } else if (obj.type === 'circle') {
                    element.radius = obj.radius;
                } else if (obj.type === 'rect') {
                    element.width = obj.width;
                    element.height = obj.height;
                }

                return element;
            });

            // 保存到本地存储（实际应用中应该保存到服务器）
            const customTemplates = JSON.parse(localStorage.getItem('customTemplates') || '{}');
            customTemplates[templateName] = {
                name: templateName,
                elements: elements,
                created: new Date().toISOString()
            };
            localStorage.setItem('customTemplates', JSON.stringify(customTemplates));

            showMessage(`${getGlobalLanguagePack ? getGlobalLanguagePack().template_saved.replace('{name}', templateName) : `模板"${templateName}"已保存`}`, 'success');
        }

        // 加载自定义模板
        function loadCustomTemplate() {
            const customTemplates = JSON.parse(localStorage.getItem('customTemplates') || '{}');
            const templateNames = Object.keys(customTemplates);

            if (templateNames.length === 0) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().no_custom_templates : '没有保存的自定义模板', 'warning');
                return;
            }

            const templateName = prompt(`选择模板（${templateNames.join(', ')}）：`);
            if (!templateName || !customTemplates[templateName]) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().template_not_exist : '模板不存在', 'warning');
                return;
            }

            const template = customTemplates[templateName];

            // 清除当前画布
            canvas.clear();
            canvas.backgroundColor = '#f8f9fa';

            // 添加模板元素
            template.elements.forEach(element => {
                let obj;
                switch (element.type) {
                    case 'text':
                        obj = new fabric.Text(element.text, {
                            left: element.left,
                            top: element.top,
                            fontSize: element.fontSize,
                            fill: element.fill,
                            selectable: true
                        });
                        break;
                    case 'circle':
                        obj = new fabric.Circle({
                            radius: element.radius,
                            left: element.left,
                            top: element.top,
                            fill: element.fill,
                            stroke: element.stroke,
                            strokeWidth: element.strokeWidth,
                            selectable: true
                        });
                        break;
                    case 'rect':
                        obj = new fabric.Rect({
                            left: element.left,
                            top: element.top,
                            width: element.width,
                            height: element.height,
                            fill: element.fill,
                            stroke: element.stroke,
                            strokeWidth: element.strokeWidth,
                            selectable: true
                        });
                        break;
                }

                if (obj) {
                    canvas.add(obj);
                }
            });

            canvas.renderAll();
            showMessage(`${getGlobalLanguagePack ? getGlobalLanguagePack().template_loaded : '已加载自定义模板：'}${templateName}`, 'success');
        }

        // ==================== 图层管理功能 ====================

        // 切换图层可见性
        function toggleLayerVisibility() {
            const layerSelect = document.getElementById('layer-select');
            const layerId = layerSelect.value;

            if (!layerId) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().select_layer_first : '请先选择图层', 'warning');
                return;
            }

            const layer = layers.find(l => l.id == layerId);
            if (layer) {
                layer.visible = !layer.visible;

                // 更新画布中对应对象的可见性
                layer.objects.forEach(obj => {
                    obj.visible = layer.visible;
                });

                canvas.renderAll();
                updateLayerSelect();
                showMessage(`${getGlobalLanguagePack ? getGlobalLanguagePack().layer_visibility_changed.replace('{name}', layer.name).replace('{display}', layer.visible ? (getGlobalLanguagePack.show || '显示') : (getGlobalLanguagePack.hide || '隐藏')) : `图层"${layer.name}"已${layer.visible ? '显示' : '隐藏'}`}`, 'info');
            }
        }

        // 删除当前图层
        function deleteCurrentLayer() {
            const layerSelect = document.getElementById('layer-select');
            const layerId = layerSelect.value;

            if (!layerId) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().select_layer_first : '请先选择图层', 'warning');
                return;
            }

            const layerIndex = layers.findIndex(l => l.id == layerId);
            if (layerIndex === -1) return;

            const layer = layers[layerIndex];

            // 不能删除最后一个图层
            if (layers.length <= 1) {
                showMessage(getGlobalLanguagePack ? getGlobalLanguagePack().cannot_delete_last_layer : '不能删除最后一个图层', 'warning');
                return;
            }

            // 移除图层中的所有对象
            layer.objects.forEach(obj => {
                canvas.remove(obj);
            });

            // 删除图层
            layers.splice(layerIndex, 1);

            // 更新当前图层
            currentLayer = layers[0] || null;

            canvas.renderAll();
            updateLayerSelect();
            showMessage(`${getGlobalLanguagePack ? getGlobalLanguagePack().layer_deleted.replace('{name}', layer.name) : `图层"${layer.name}"已删除`}`, 'success');
        }

        // 切换测量视图
        function toggleMeasurementView() {
            const showMeasurementsOnly = document.getElementById('show-measurements-only').checked;

            canvas.getObjects().forEach(obj => {
                if (measurements.some(m => m.line === obj || m.text === obj)) {
                    obj.visible = true; // 测量对象始终可见
                } else {
                    obj.visible = !showMeasurementsOnly;
                }
            });

            canvas.renderAll();
        }

        // Dashboard functionality for edit page
        document.addEventListener('DOMContentLoaded', function() {
            initDatabase();

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

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

        // 搜索患者函数
        function searchPatients(query, selectId) {
            const select = document.getElementById(selectId);
            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}个, 可用于编辑`;
            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>
