script.js

/**
 * 身体围度测量 - 3D分析
 * 交互和动画控制脚本
 */

document.addEventListener('DOMContentLoaded', function() {
    // 初始化扫描动画和轮廓图生长
    initScanAndContourAnimation();
    
    // 初始化AI助手
    initAIAssistant();
    
    // 初始化热点交互
    initHotspots();
    
    // 初始化模型控制
    initModelControls();
    
    // 初始化语音控制
    initVoiceControl();
    
    // 初始化指标卡片交互
    initMetricBoxes();
    
    // 初始化弹窗
    initPopup();
});

/**
 * 初始化扫描动画和轮廓图生长效果
 * 实现两轮扫描效果：第一轮显示人物，第二轮显示轮廓和测量线
 */
function initScanAndContourAnimation() {
    // 获取元素
    const figureImage = document.getElementById('figure-image');
    const contourImage = document.getElementById('contour-image');
    const firstScan = document.querySelector('.scan-line.first-scan');
    const secondScan = document.querySelector('.scan-line.second-scan');
    const measurementLines = document.querySelectorAll('.measurement-line');
    
    // 设置初始状态
    figureImage.style.opacity = '0';
    figureImage.style.clipPath = 'inset(100% 0 0 0)'; // 初始化为完全隐藏
    contourImage.style.opacity = '0';
    contourImage.style.clipPath = 'inset(100% 0 0 0)';
    
    // 第一轮扫描 - 显示人物图像
    setTimeout(() => {
        // 显示AI助手消息
        updateAIMessage("开始第一轮扫描...");
        
        // 显示并开始第一轮扫描线动画
        firstScan.style.opacity = '1';
        firstScan.style.animation = 'scanUpward 3s ease-in-out forwards';
        
        // 随着扫描线逐渐显示人物图像 - 从下往上生长
        figureImage.style.animation = 'revealFigure 3s ease-out forwards';
        
        // 第一轮扫描完成后
        setTimeout(() => {
            updateAIMessage("第一轮扫描完成，开始分析人体轮廓...");
            
            // 第二轮扫描 - 显示轮廓图和测量线，但保持人物图像可见
            setTimeout(() => {
                // 更新AI助手消息
                updateAIMessage("开始第二轮扫描，生成人体轮廓图...");
                
                // 保持人物图像可见状态
                figureImage.style.opacity = '0.6';
                figureImage.style.clipPath = 'inset(0 0 0 0)';
                
                // 显示并开始第二轮扫描线动画
                secondScan.style.opacity = '1';
                secondScan.style.animation = 'scanUpward 4s ease-in-out forwards';
                
                // 显示轮廓图并开始动画，叠加在人物图像上
                contourImage.style.opacity = '1';
                contourImage.style.animation = 'revealContour 4s ease-in-out forwards';
                
                // 随着扫描线向上移动，依次显示测量线
                measurementLines.forEach((line, index) => {
                    const delay = 1000 + index * 500; // 根据位置依次延迟显示
                    
                    setTimeout(() => {
                        // 显示测量线
                        line.style.opacity = '1';
                        
                        // 左侧线条展开动画
                        const lineLeft = line.querySelector('.line-left');
                        lineLeft.style.animation = 'expandLineLeft 0.6s ease-out forwards';
                        
                        // 中间线条展开动画
                        const lineCenter = line.querySelector('.line-center');
                        lineCenter.style.animation = 'expandLineCenter 0.6s ease-out forwards 0.1s';
                        
                        // 右侧线条展开动画
                        const lineRight = line.querySelector('.line-right');
                        lineRight.style.animation = 'expandLineRight 0.6s ease-out forwards 0.2s';
                        
                        // 测量值显示动画
                        const measurementValue = line.querySelector('.measurement-value');
                        measurementValue.style.animation = 'showValue 0.8s ease-out forwards 0.6s';
                    }, delay);
                });
                
                // 第二轮扫描完成后
                setTimeout(() => {
                    // 显示热点
                    document.querySelectorAll('.hotspot').forEach(hotspot => {
                        hotspot.style.animation = 'fadeIn 0.5s ease forwards';
                    });
                    
                    // 确保人物和轮廓都保持可见
                    figureImage.style.opacity = '0.6';
                    contourImage.style.opacity = '0.9';
                    
                    // 更新AI助手消息
                    updateAIMessage("扫描完成！身体围度数据分析完毕");
                }, 4500);
                
            }, 1000); // 第一轮与第二轮扫描间隔
            
        }, 3000); // 第一轮扫描持续时间
        
    }, 1000); // 开始扫描前的等待时间
}

/**
 * 更新AI助手消息
 */
function updateAIMessage(message) {
    const aiMessage = document.querySelector('.ai-message');
    const aiAssistant = document.querySelector('.ai-assistant');
    
    // 添加过渡效果
    aiMessage.style.opacity = '0';
    
    setTimeout(() => {
        aiMessage.textContent = message;
        aiMessage.style.opacity = '1';
        
        // 添加高亮效果
        aiAssistant.classList.add('highlight-pulse');
        setTimeout(() => {
            aiAssistant.classList.remove('highlight-pulse');
        }, 2000);
    }, 300);
}

/**
 * 初始化AI助手
 */
function initAIAssistant() {
    const aiMessages = [
        "正在分析您的身体围度数据...",
        "身体围度数据分析完成，您的躯干比例为黄金分割比",
        "检测到您的腰围减少了1.5厘米，继续保持！",
        "基于您的数据，推荐进行上肢力量训练"
    ];
    
    const aiAssistant = document.querySelector('.ai-assistant');
    const aiMessage = document.querySelector('.ai-message');
    
    // 初始消息
    aiMessage.textContent = "系统初始化中...准备开始扫描";
    
    // 扫描完成后才开始轮播消息
    setTimeout(() => {
        let messageIndex = 0;
        setInterval(() => {
            aiMessage.textContent = aiMessages[messageIndex];
            aiAssistant.classList.add('highlight-pulse');
            setTimeout(() => {
                aiAssistant.classList.remove('highlight-pulse');
            }, 2000);
            
            messageIndex = (messageIndex + 1) % aiMessages.length;
        }, 8000);
    }, 6000); // 比扫描完成稍晚启动
}

/**
 * 初始化热点交互
 */
function initHotspots() {
    const hotspots = document.querySelectorAll('.hotspot');
    const metricBoxes = document.querySelectorAll('.metric-box');
    
    hotspots.forEach(hotspot => {
        hotspot.addEventListener('click', function() {
            // 获取热点类型（胸围、腰围等）
            const type = this.classList[1];
            
            // 高亮对应的度量框
            highlightMetricBox(type);
            
            // 显示测量值
            showMeasurementValue(this);
        });
    });
}

/**
 * 高亮度量框
 */
function highlightMetricBox(type) {
    const metricBoxes = document.querySelectorAll('.metric-box');
    metricBoxes.forEach(box => {
        box.classList.remove('active');
    });
    
    const targetBox = document.getElementById(`${type}-metric`);
    if (targetBox) {
        targetBox.classList.add('active');
        targetBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
}

/**
 * 显示测量值
 */
function showMeasurementValue(hotspot) {
    const value = hotspot.getAttribute('data-value');
    const indicator = document.getElementById('current-scan-area');
    const indicatorText = indicator.querySelector('.indicator-text');
    
    indicatorText.textContent = `${hotspot.querySelector('.hotspot-label').textContent}: ${value}`;
    indicator.style.top = `${hotspot.offsetTop}px`;
    
    // 添加高亮效果
    indicator.classList.add('highlight-pulse');
    setTimeout(() => {
        indicator.classList.remove('highlight-pulse');
    }, 2000);
}

/**
 * 初始化模型控制
 */
function initModelControls() {
    const controlIcons = document.querySelectorAll('.control-icon');
    const figureImage = document.getElementById('figure-image');
    const contourImage = document.getElementById('contour-image');
    const modelFigure = document.querySelector('.model-figure');
    
    controlIcons.forEach(icon => {
        icon.addEventListener('click', function() {
            const action = this.getAttribute('title');
            
            switch(action) {
                case '旋转视图':
                    rotateModel();
                    break;
                case '重置视图':
                    resetModel();
                    break;
                case '放大':
                    zoomModel(1.1);
                    break;
                case '缩小':
                    zoomModel(0.9);
                    break;
            }
        });
    });
    
    // 当前缩放级别
    let currentZoom = 1;
    // 当前旋转状态
    let isRotating = false;
    
    // 旋转模型
    function rotateModel() {
        const modelWrapper = document.querySelector('.model-wrapper');
        if (!isRotating) {
            modelWrapper.style.animation = 'rotate 10s linear infinite';
            isRotating = true;
        } else {
            modelWrapper.style.animation = 'none';
            isRotating = false;
        }
    }
    
    // 重置模型
    function resetModel() {
        const modelWrapper = document.querySelector('.model-wrapper');
        modelWrapper.style.animation = 'none';
        modelWrapper.style.transform = 'scale(1)';
        currentZoom = 1;
        isRotating = false;
    }
    
    // 缩放模型
    function zoomModel(factor) {
        currentZoom *= factor;
        
        // 限制缩放范围
        if (currentZoom < 0.5) currentZoom = 0.5;
        if (currentZoom > 2) currentZoom = 2;
        
        const modelWrapper = document.querySelector('.model-wrapper');
        modelWrapper.style.transform = `scale(${currentZoom})`;
    }
}

/**
 * 初始化语音控制
 */
function initVoiceControl() {
    const voiceBtn = document.querySelector('.voice-btn');
    const voiceHint = document.querySelector('.voice-hint');
    
    const voiceCommands = [
        "显示胸围数据",
        "显示腰围数据", 
        "显示臀围数据",
        "旋转模型",
        "重置视图"
    ];
    
    voiceBtn.addEventListener('click', function() {
        this.classList.toggle('active');
        
        if (this.classList.contains('active')) {
            voiceHint.textContent = "正在听取指令...";
            
            // 模拟语音识别
            setTimeout(() => {
                const randomCommand = voiceCommands[Math.floor(Math.random() * voiceCommands.length)];
                voiceHint.textContent = `识别到指令: "${randomCommand}"`;
                
                // 执行对应命令
                executeVoiceCommand(randomCommand);
                
                // 2秒后恢复状态
                setTimeout(() => {
                    voiceBtn.classList.remove('active');
                    voiceHint.textContent = '试试说："显示胸围数据"';
                }, 2000);
            }, 1500);
        } else {
            voiceHint.textContent = '试试说："显示胸围数据"';
        }
    });
    
    // 执行语音命令
    function executeVoiceCommand(command) {
        if (command.includes("胸围")) {
            highlightMetricBox("chest");
            const hotspot = document.querySelector('.hotspot.chest');
            showMeasurementValue(hotspot);
        } else if (command.includes("腰围")) {
            highlightMetricBox("waist");
            const hotspot = document.querySelector('.hotspot.waist');
            showMeasurementValue(hotspot);
        } else if (command.includes("臀围")) {
            highlightMetricBox("hip");
            const hotspot = document.querySelector('.hotspot.hip');
            showMeasurementValue(hotspot);
        } else if (command.includes("旋转")) {
            const rotateIcon = document.querySelector('.control-icon[title="旋转视图"]');
            rotateIcon.click();
        } else if (command.includes("重置")) {
            const resetIcon = document.querySelector('.control-icon[title="重置视图"]');
            resetIcon.click();
        }
    }
}

/**
 * 初始化指标卡片交互
 */
function initMetricBoxes() {
    const metricBoxes = document.querySelectorAll('.metric-box');
    
    metricBoxes.forEach(box => {
        box.addEventListener('click', function() {
            // 移除所有高亮
            metricBoxes.forEach(b => b.classList.remove('active'));
            
            // 添加当前高亮
            this.classList.add('active');
            
            // 获取类型
            const id = this.getAttribute('id');
            const type = id.replace('-metric', '');
            
            // 高亮对应的热点
            const hotspot = document.querySelector(`.hotspot.${type}`);
            if (hotspot) {
                showMeasurementValue(hotspot);
            }
        });
    });
}

/**
 * 初始化弹窗
 */
function initPopup() {
    const closeBtn = document.querySelector('.popup-close');
    const popup = document.querySelector('.popup-detail');
    
    // 详情按钮点击
    document.querySelectorAll('.metric-box').forEach(box => {
        box.addEventListener('dblclick', function() {
            showDetailPopup(this.getAttribute('id').replace('-metric', ''));
        });
    });
    
    // 关闭按钮点击
    closeBtn.addEventListener('click', function() {
        popup.classList.remove('active');
    });
}

/**
 * 显示详情弹窗
 */
function showDetailPopup(type) {
    const popup = document.querySelector('.popup-detail');
    const popupTitle = document.querySelector('.popup-title');
    const popupBody = document.querySelector('.popup-body');
    
    // 设置标题
    switch(type) {
        case 'chest':
            popupTitle.textContent = "胸围详细数据";
            break;
        case 'waist':
            popupTitle.textContent = "腰围详细数据";
            break;
        case 'hip':
            popupTitle.textContent = "臀围详细数据";
            break;
        case 'thigh':
            popupTitle.textContent = "大腿围详细数据";
            break;
        default:
            popupTitle.textContent = "详细数据";
    }
    
    // 设置内容（此处添加详细指标数据和历史趋势）
    popupBody.innerHTML = `
        <div class="detail-metrics">
            <div class="detail-metric">
                <div class="detail-label">当前数值:</div>
                <div class="detail-value">${getMetricValue(type)}</div>
            </div>
            <div class="detail-metric">
                <div class="detail-label">较上次变化:</div>
                <div class="detail-value ${getMetricChangeClass(type)}">${getMetricChange(type)}</div>
            </div>
            <div class="detail-metric">
                <div class="detail-label">标准范围:</div>
                <div class="detail-value">${getMetricRange(type)}</div>
            </div>
            <div class="detail-metric">
                <div class="detail-label">测量时间:</div>
                <div class="detail-value">2023-05-06 08:35</div>
            </div>
        </div>
        <div class="detail-chart">
            <h4>历史趋势</h4>
            <canvas id="trendChart"></canvas>
        </div>
    `;
    
    // 显示弹窗
    popup.classList.add('active');
    
    // 生成趋势图表
    renderTrendChart(type);
}

/**
 * 获取指标数值
 */
function getMetricValue(type) {
    const values = {
        'chest': '96.5cm',
        'waist': '78.2cm',
        'hip': '98.7cm',
        'thigh': '58.1cm'
    };
    
    return values[type] || '0cm';
}

/**
 * 获取指标变化
 */
function getMetricChange(type) {
    const changes = {
        'chest': '+2.3cm',
        'waist': '-1.5cm',
        'hip': '+0.8cm',
        'thigh': '0.0cm'
    };
    
    return changes[type] || '0cm';
}

/**
 * 获取指标变化类
 */
function getMetricChangeClass(type) {
    const changeClasses = {
        'chest': 'text-success',
        'waist': 'text-success',
        'hip': 'text-success',
        'thigh': ''
    };
    
    return changeClasses[type] || '';
}

/**
 * 获取指标范围
 */
function getMetricRange(type) {
    const ranges = {
        'chest': '90-100cm',
        'waist': '75-85cm',
        'hip': '95-105cm',
        'thigh': '55-65cm'
    };
    
    return ranges[type] || '0-0cm';
}

/**
 * 渲染趋势图表
 */
function renderTrendChart(type) {
    // 获取画布
    const canvas = document.getElementById('trendChart');
    const ctx = canvas.getContext('2d');
    
    // 清除旧图表
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 设置画布大小
    canvas.width = canvas.parentNode.offsetWidth;
    canvas.height = 200;
    
    // 数据集
    const data = getChartData(type);
    
    // 绘制图表
    // 这里使用基本Canvas API绘制简单线图
    const padding = 30;
    const width = canvas.width - padding * 2;
    const height = canvas.height - padding * 2;
    
    // 绘制网格和坐标轴
    ctx.strokeStyle = '#e5e7eb';
    ctx.beginPath();
    
    // 横线
    for (let i = 0; i <= 5; i++) {
        const y = padding + height * (i / 5);
        ctx.moveTo(padding, y);
        ctx.lineTo(padding + width, y);
    }
    
    // 纵线
    for (let i = 0; i <= data.values.length - 1; i++) {
        const x = padding + width * (i / (data.values.length - 1));
        ctx.moveTo(x, padding);
        ctx.lineTo(x, padding + height);
    }
    
    ctx.stroke();
    
    // 绘制线条
    ctx.strokeStyle = getLineColor(type);
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    // 找出数据最大值和最小值，计算比例
    const maxValue = Math.max(...data.values) * 1.1;
    const minValue = Math.min(...data.values) * 0.9;
    const range = maxValue - minValue;
    
    for (let i = 0; i < data.values.length; i++) {
        const x = padding + width * (i / (data.values.length - 1));
        const y = padding + height - (height * ((data.values[i] - minValue) / range));
        
        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    
    ctx.stroke();
    
    // 绘制数据点
    ctx.fillStyle = getLineColor(type);
    for (let i = 0; i < data.values.length; i++) {
        const x = padding + width * (i / (data.values.length - 1));
        const y = padding + height - (height * ((data.values[i] - minValue) / range));
        
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, Math.PI * 2);
        ctx.fill();
    }
    
    // 绘制标签
    ctx.fillStyle = '#4b5563';
    ctx.font = '10px sans-serif';
    ctx.textAlign = 'center';
    
    for (let i = 0; i < data.labels.length; i++) {
        const x = padding + width * (i / (data.labels.length - 1));
        ctx.fillText(data.labels[i], x, canvas.height - 10);
    }
}

/**
 * 获取图表数据
 */
function getChartData(type) {
    const datasets = {
        'chest': {
            labels: ['1月', '2月', '3月', '4月', '5月', '今天'],
            values: [92.1, 92.8, 94.2, 94.8, 95.7, 96.5]
        },
        'waist': {
            labels: ['1月', '2月', '3月', '4月', '5月', '今天'],
            values: [82.5, 81.7, 80.3, 79.8, 79.1, 78.2]
        },
        'hip': {
            labels: ['1月', '2月', '3月', '4月', '5月', '今天'],
            values: [97.0, 97.3, 97.5, 98.0, 98.2, 98.7]
        },
        'thigh': {
            labels: ['1月', '2月', '3月', '4月', '5月', '今天'],
            values: [58.1, 58.1, 58.1, 58.0, 58.0, 58.1]
        }
    };
    
    return datasets[type] || { labels: [], values: [] };
}

/**
 * 获取线条颜色
 */
function getLineColor(type) {
    const colors = {
        'chest': '#4f46e5',
        'waist': '#10b981',
        'hip': '#3b82f6',
        'thigh': '#f59e0b'
    };
    
    return colors[type] || '#4f46e5';
}