name_script.js

// 显示滑块值
const nameCountSlider = document.getElementById('nameCount');
const nameCountValue = document.getElementById('nameCountValue');

// 数据存储（避免使用全局变量可能出现的问题）
let appData = {
    names: [],
    modelInfo: null,
    generationTime: 0,
    payment: {
        orderId: null,
        status: 'NOTPAY'
    }
};

nameCountSlider.addEventListener('input', function() {
    nameCountValue.textContent = this.value;
});

// 表单提交处理
const nameForm = document.getElementById('nameForm');
const nameResults = document.getElementById('nameResults');
const generateMore = document.querySelector('.generate-more');
const moreNamesBtn = document.getElementById('moreNames');
const resetBtn = document.getElementById('resetBtn');
const downloadBtn = document.getElementById('downloadBtn');

// 初始化下载按钮状态
downloadBtn.classList.remove('visible');

// 重置表单
resetBtn.addEventListener('click', function() {
    nameForm.reset();
    nameResults.innerHTML = `
        <div class="welcome-message">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
            </svg>
            <h3>请填写表单开始起名</h3>
            <p>完善左侧的基本信息，我们将为您的宝宝推荐最适合的名字</p>
        </div>
    `;
    generateMore.style.display = 'none';
    
    // 重置数据和下载按钮
    appData = {
        names: [],
        modelInfo: null,
        generationTime: 0,
        payment: {
            orderId: null,
            status: 'NOTPAY'
        }
    };
    downloadBtn.classList.remove('visible');
    console.log("重置数据", appData);
});

// 表单提交事件
nameForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 显示加载动画
    nameResults.innerHTML = `
        <div class="welcome-message">
            <div class="loading-spinner"></div>
            <h3>正在准备支付...</h3>
            <p>这可能需要几秒钟时间，请耐心等待</p>
        </div>
    `;
    
    // 获取表单数据
    const formData = new FormData(nameForm);
    
    // 调用支付流程
    createPayment(formData);
});

// "下载结果"按钮点击事件
moreNamesBtn.addEventListener('click', function() {
    if (appData.names && appData.names.length > 0) {
        generatePDF();
    } else {
        alert('没有可下载的数据！请先生成名字。');
    }
});

// 下载按钮点击事件
downloadBtn.addEventListener('click', function() {
    console.log("点击下载按钮", appData);
    if (!appData.names || appData.names.length === 0) {
        alert('没有可下载的数据！请先生成名字。');
        return;
    }
    generatePDF();
});

// 创建支付订单
async function createPayment(formData) {
    try {
        // 表单验证
        if (!formData.get('surname') || !formData.get('gender')) {
            throw new Error('姓氏和性别是必填项');
        }
        
        // 显示加载动画
        nameResults.innerHTML = `
            <div class="welcome-message">
                <div class="loading-spinner"></div>
                <h3>正在准备支付...</h3>
                <p>这可能需要几秒钟时间，请耐心等待</p>
            </div>
        `;
        
        // 准备发送到后端的数据
        const data = {
            surname: formData.get('surname'),
            gender: formData.get('gender'),
            nameLength: formData.get('nameLength'),
            styles: Array.from(document.querySelectorAll('input[name="style"]:checked'))
                .map(checkbox => checkbox.value),
            include: formData.get('include') || '无',
            taboo: formData.get('taboo') || '无',
            requirements: formData.get('requirements') || '无',
            nameCount: formData.get('nameCount')
        };
        
        console.log("发送到后端的数据", data);
        
        // 调用创建支付订单API
        const response = await fetch('/api/create-payment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data),
            // 添加超时处理
            signal: AbortSignal.timeout(30000) // 30秒超时
        });
        
        if (!response.ok) {
            let errorMsg = `服务器错误，状态码: ${response.status}`;
            try {
                const errorData = await response.json();
                if (errorData && errorData.error) {
                    errorMsg = errorData.error;
                }
            } catch (e) {
                // 如果无法解析为JSON，使用默认错误消息
            }
            throw new Error(errorMsg);
        }
        
        const result = await response.json();
        console.log("从后端接收的支付数据", result);
        
        if (!result.success) {
            throw new Error(result.error || '创建支付订单失败');
        }
        
        // 保存支付信息到appData对象
        appData.payment.orderId = result.orderId;
        
        // 显示支付二维码
        displayPaymentQRCode(result.qrCodeUrl);
        
        // 开始轮询检查支付状态
        startPaymentStatusCheck(result.orderId);
        
    } catch (error) {
        console.error('创建支付订单时出错:', error);
        
        // 显示错误信息
        nameResults.innerHTML = `
            <div class="welcome-message">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#f44336">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                <h3>创建支付订单失败</h3>
                <p>抱歉，我们在创建支付订单时遇到了问题：${error.message}</p>
                <button class="btn btn-primary retry-payment" onclick="window.location.reload()">刷新重试</button>
            </div>
        `;
    }
}

// 显示支付二维码
function displayPaymentQRCode(qrCodeUrl) {
    nameResults.innerHTML = `
        <div class="welcome-message payment-qrcode">
            <h3>请使用微信扫码支付</h3>
            <p>支付金额: ¥0.01</p>
            <div class="qrcode-container">
                <img src="${qrCodeUrl}" alt="微信支付二维码" />
            </div>
            <p class="payment-tips">扫码后请在微信中完成支付</p>
            <p class="payment-status">支付状态: 等待支付...</p>
        </div>
    `;
}

// 开始轮询检查支付状态
function startPaymentStatusCheck(orderId) {
    // 设置轮询间隔（秒）
    const pollInterval = 3;
    let pollCount = 0;
    const maxPolls = 100; // 最多轮询100次，约5分钟
    
    const statusElement = document.querySelector('.payment-status');
    
    // 添加中断标志
    let shouldContinuePolling = true;
    
    // 存储轮询函数，以便可以从外部中断
    window.stopPaymentCheck = () => {
        shouldContinuePolling = false;
        console.log('支付状态检查已手动中断');
    };
    
    const checkStatus = async () => {
        if (!shouldContinuePolling) return;
        
        pollCount++;
        
        try {
            // 调用查询支付状态API
            const response = await fetch(`/api/check-payment/${orderId}`, {
                signal: AbortSignal.timeout(10000) // 10秒超时
            });
            
            if (!response.ok) {
                let errorMsg = `服务器错误，状态码: ${response.status}`;
                try {
                    const errorData = await response.json();
                    if (errorData && errorData.error) {
                        errorMsg = errorData.error;
                    }
                } catch (e) {
                    // 如果无法解析为JSON，使用默认错误消息
                }
                throw new Error(errorMsg);
            }
            
            const result = await response.json();
            console.log("支付状态检查结果", result);
            
            if (result.success) {
                // 更新状态显示
                if (statusElement) {
                    statusElement.textContent = `支付状态: ${result.status === 'SUCCESS' ? '支付成功' : '等待支付...'}`;
                }
                
                // 如果支付成功
                if (result.status === 'SUCCESS') {
                    // 更新支付状态
                    appData.payment.status = 'SUCCESS';
                    
                    // 显示加载中的提示
                    nameResults.innerHTML = `
                        <div class="welcome-message">
                            <div class="loading-spinner"></div>
                            <h3>支付成功，正在为您生成名字...</h3>
                            <p>这大概需要10到30秒生成时间，请耐心等待</p>
                        </div>
                    `;
                    
                    // 调用生成名字API
                    await generateNamesAfterPayment(orderId);
                    
                    // 停止轮询
                    return;
                }
            }
            
            // 达到最大轮询次数，但支付未完成
            if (pollCount >= maxPolls) {
                if (statusElement) {
                    statusElement.textContent = `支付状态: 支付超时，请重试`;
                }
                
                // 在二维码下方添加重试按钮
                const qrcodeContainer = document.querySelector('.qrcode-container');
                if (qrcodeContainer) {
                    const retryButton = document.createElement('button');
                    retryButton.className = 'btn btn-primary retry-payment';
                    retryButton.textContent = '重新支付';
                    retryButton.onclick = () => {
                        const formData = new FormData(nameForm);
                        createPayment(formData);
                    };
                    
                    qrcodeContainer.insertAdjacentElement('afterend', retryButton);
                }
                
                return;
            }
            
            // 继续轮询
            setTimeout(checkStatus, pollInterval * 1000);
            
        } catch (error) {
            console.error('检查支付状态时出错:', error);
            
            // 错误计数超过3次才显示错误，避免网络波动影响用户体验
            if (error.name === 'AbortError' || error.name === 'TimeoutError') {
                console.log('支付状态查询超时，将重试');
                // 网络超时，继续轮询
                if (pollCount < maxPolls) {
                    setTimeout(checkStatus, pollInterval * 1000);
                    return;
                }
            }
            
            if (statusElement) {
                statusElement.textContent = `支付状态: 查询失败，请刷新页面重试`;
                
                // 添加重试按钮
                const retryButton = document.createElement('button');
                retryButton.className = 'btn btn-primary retry-payment';
                retryButton.textContent = '重试查询';
                retryButton.style.marginTop = '10px';
                retryButton.onclick = () => {
                    statusElement.textContent = `支付状态: 正在重新查询...`;
                    pollCount = 0; // 重置计数
                    setTimeout(checkStatus, 1000);
                };
                
                statusElement.parentNode.appendChild(retryButton);
            }
        }
    };
    
    // 开始第一次检查
    setTimeout(checkStatus, pollInterval * 1000);
}

// 支付成功后生成名字
async function generateNamesAfterPayment(orderId) {
    try {
        // 显示加载中的提示
        nameResults.innerHTML = `
            <div class="welcome-message">
                <div class="loading-spinner"></div>
                <h3>支付成功，正在为您生成名字...</h3>
                <p>这大概需要10到30秒生成时间，请耐心等待</p>
            </div>
        `;
        
        // 调用后端API
        const response = await fetch('/api/generate-names-after-payment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ orderId }),
            // 添加超时处理
            signal: AbortSignal.timeout(60000) // 60秒超时，名字生成可能需要较长时间
        });
        
        if (!response.ok) {
            let errorMsg = `服务器错误，状态码: ${response.status}`;
            try {
                const errorData = await response.json();
                if (errorData && errorData.error) {
                    errorMsg = errorData.error;
                }
            } catch (e) {
                // 如果无法解析为JSON，使用默认错误消息
            }
            throw new Error(errorMsg);
        }
        
        const result = await response.json();
        console.log("从后端接收的数据", result);
        
        if (!result.success) {
            throw new Error(result.error || '生成名字失败');
        }
        
        // 保存数据到appData对象
        appData.names = result.names || [];
        appData.modelInfo = result.modelInfo || null;
        appData.generationTime = result.generationTime || 0;
        
        console.log("保存的数据", appData);
        
        // 保存到本地存储，以便刷新页面后恢复
        try {
            localStorage.setItem('nameResults', JSON.stringify({
                names: appData.names,
                modelInfo: appData.modelInfo,
                generationTime: appData.generationTime,
                orderId: orderId,
                timestamp: new Date().getTime()
            }));
        } catch (e) {
            console.error('保存到本地存储失败:', e);
        }
        
        // 显示生成的名字结果
        displayNameResults(appData.names);
        
        // 显示"下载结果"按钮
        generateMore.style.display = 'flex';
        moreNamesBtn.textContent = '下载结果';
        
        // 显示下载按钮
        downloadBtn.classList.add('visible');
        
    } catch (error) {
        console.error('生成名字时出错:', error);
        
        // 显示错误信息
        nameResults.innerHTML = `
            <div class="welcome-message">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#f44336">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                <h3>生成名字时出错</h3>
                <p>抱歉，我们在生成名字时遇到了问题：${error.message}</p>
                <button class="btn btn-primary retry-payment" onclick="window.location.reload()">刷新页面</button>
            </div>
        `;
    }
}

// 调用后端API生成名字 (保留但不再直接使用，改为通过支付流程)
async function generateNames(formData) {
    try {
        // 准备发送到后端的数据
        const data = {
            surname: formData.get('surname'),
            gender: formData.get('gender'),
            nameLength: formData.get('nameLength'),
            styles: Array.from(document.querySelectorAll('input[name="style"]:checked'))
                .map(checkbox => checkbox.value),
            include: formData.get('include') || '无',
            taboo: formData.get('taboo') || '无',
            requirements: formData.get('requirements') || '无',
            nameCount: formData.get('nameCount')
        };
        
        console.log("发送到后端的数据", data);
        
        // 调用后端API
        const response = await fetch('/api/generate-names', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        if (!response.ok) {
            throw new Error(`HTTP错误! 状态码: ${response.status}`);
        }
        
        const result = await response.json();
        console.log("从后端接收的数据", result);
        
        // 如果需要支付
        if (result.requirePayment) {
            // 调用支付流程
            createPayment(formData);
            return;
        }
        
        if (!result.success) {
            throw new Error(result.error || '生成名字失败');
        }
        
        // 保存数据到appData对象
        appData.names = result.names || [];
        appData.modelInfo = result.modelInfo || null;
        appData.generationTime = result.generationTime || 0;
        
        console.log("保存的数据", appData);
        
        // 显示生成的名字结果
        displayNameResults(appData.names);
        
        // 显示"再次生成"按钮
        generateMore.style.display = 'flex';
        
        // 显示下载按钮
        downloadBtn.classList.add('visible');
        
    } catch (error) {
        console.error('生成名字时出错:', error);
        
        // 清空数据
        appData = {
            names: [],
            modelInfo: null,
            generationTime: 0,
            payment: {
                orderId: null,
                status: 'NOTPAY'
            }
        };
        
        // 隐藏下载按钮
        downloadBtn.classList.remove('visible');
        
        // 显示错误信息
        nameResults.innerHTML = `
            <div class="welcome-message">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#f44336">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                <h3>生成名字时出错</h3>
                <p>抱歉，我们在生成名字时遇到了问题：${error.message}</p>
            </div>
        `;
    }
}

// 显示名字结果
function displayNameResults(names) {
    // 创建名字卡片容器
    const nameCards = document.createElement('div');
    nameCards.className = 'name-cards';
    
    // 为每个名字创建卡片
    names.forEach(name => {
        const card = document.createElement('div');
        card.className = 'name-card';
        
        // 计算独特性评分标签样式
        let uniquenessClass = 'average';
        if (name.uniqueness >= 8.0) {
            uniquenessClass = 'good';
        } else if (name.uniqueness <= 5.0) {
            uniquenessClass = 'bad';
        }
        
        // 构建卡片HTML
        card.innerHTML = `
        
            <div class="name-value">${name.fullName}</div>
            <div class="name-meaning">
                <p><strong>拼音:</strong> ${name.pinyin}</p>
                <p><strong>字义:</strong> ${name.meaning}</p>
            </div>
            <div class="name-stats">
                <span class="stat-tag ${uniquenessClass}">独特性 ${name.uniqueness}</span>
            </div>


            <div class="name-actions">
                <button class="like-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                    喜欢
                </button>
                <button class="save-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
                    </svg>
                    收藏
                </button>
            </div>
        `;
        
        // 添加卡片到容器
        nameCards.appendChild(card);
    });
    
    // 更新结果区域
    nameResults.innerHTML = '';
    nameResults.appendChild(nameCards);
    
    // 如果有模型信息和生成时间，显示在结果区域底部
    if (appData.modelInfo && appData.generationTime) {
        const modelInfoDiv = document.createElement('div');
        modelInfoDiv.className = 'model-info';
        modelInfoDiv.innerHTML = `
            <p>生成模型: ${appData.modelInfo}</p>
            <p>生成时间: ${appData.generationTime}秒</p>
        `;
        nameResults.appendChild(modelInfoDiv);
    }
    
    // 添加点击事件到喜欢和收藏按钮
    document.querySelectorAll('.like-btn, .save-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            this.classList.toggle('active');
        });
    });
}

function generatePDF() {
    if (!appData.names || appData.names.length === 0) {
        alert('没有可下载的数据！请先生成名字。');
        return;
    }
    
    // 加载提示
    const loadingTip = document.createElement('div');
    loadingTip.textContent = '正在生成PDF，请稍候...';
    loadingTip.style.position = 'fixed';
    loadingTip.style.left = '50%';
    loadingTip.style.top = '50%';
    loadingTip.style.transform = 'translate(-50%, -50%)';
    loadingTip.style.padding = '15px 30px';
    loadingTip.style.backgroundColor = 'rgba(0,0,0,0.7)';
    loadingTip.style.color = 'white';
    loadingTip.style.borderRadius = '5px';
    loadingTip.style.zIndex = '9999';
    document.body.appendChild(loadingTip);
    
    try {
        // 基本信息
        const surname = document.getElementById('surname').value;
        // const gender = document.getElementById('gender').value;
        const gender = document.querySelector('input[name="gender"]:checked').value;
        const currentDate = new Date().toLocaleString('zh-CN', {
            year: 'numeric',
            month: 'numeric',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
        
        // 创建文本内容
        let textContent = `吉名阁 - 宝宝起名结果\n\n`;
        textContent += `姓氏: ${surname}\n`;
        textContent += `性别: ${gender}\n`;
        textContent += `生成日期: ${currentDate}\n`;
        
        // 在generatePDF函数中修改
        if (appData.modelInfo) {
            let modelName = appData.modelInfo.provider;
            if (appData.modelInfo.provider === 'deepseek') {
                modelName = 'DeepSeek';
            } else if (appData.modelInfo.provider === 'chatgpt') {
                modelName = 'ChatGPT';
            } else if (appData.modelInfo.provider === 'qwen') {
                modelName = '通义千问';
        }
    
        textContent += `使用模型: ${appData.modelInfo.provider} (${appData.modelInfo.model})\n`;

        // textContent += `使用模型: ${modelName} (${appData.modelInfo.model})\n`;
        textContent += `生成时间: ${appData.generationTime} 秒\n`;
        }

        // if (appData.modelInfo) {
        //     const modelName = appData.modelInfo.provider === 'deepseek' ? 'DeepSeek' : 'ChatGPT';
        //     textContent += `使用模型: ${modelName} (${appData.modelInfo.model})\n`;
        //     textContent += `生成时间: ${appData.generationTime} 秒\n`;
        // }

        

        
        
        textContent += `\n----------------------------------------\n\n`;
        
        // 添加名字数据
        appData.names.forEach((name, index) => {
            textContent += `${index + 1}. ${name.fullName}\n`;
            textContent += `  拼音: ${name.pinyin}\n`;
            textContent += `  字义: ${name.meaning}\n`;
            textContent += `  独特性: ${name.uniqueness}\n\n`;
        });
        
        textContent += `\n----------------------------------------\n`;
        textContent += `吉名阁 © ${new Date().getFullYear()} | 本文档由AI智能宝宝起名系统生成`;
        
        // 创建文本文件并下载
        const blob = new Blob([textContent], { type: 'text/plain;charset=utf-8' });
        const fileName = `吉名阁_${surname}宝宝起名_${currentDate.replace(/[\/\s:]/g, '')}.txt`;
        
        // 创建下载链接并点击
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        // 移除加载提示
        document.body.removeChild(loadingTip);
        
    } catch (error) {
        console.error("文件生成错误:", error);
        alert("生成文件时出错: " + error.message);
        document.body.removeChild(loadingTip);
    }
}

// 初始化函数 - 检查是否有保存的结果
function initializeApp() {
    try {
        const savedResults = localStorage.getItem('nameResults');
        if (savedResults) {
            const data = JSON.parse(savedResults);
            
            // 检查是否是今天的数据（86400000 = 24小时）
            const isToday = (new Date().getTime() - data.timestamp) < 86400000;
            
            if (isToday && data.names && data.names.length > 0) {
                console.log('从本地存储恢复数据', data);
                
                // 恢复数据
                appData.names = data.names;
                appData.modelInfo = data.modelInfo;
                appData.generationTime = data.generationTime;
                appData.payment = {
                    orderId: data.orderId,
                    status: 'SUCCESS'
                };
                
                // 显示名字结果
                displayNameResults(appData.names);
                
                // 显示"再次生成"按钮
                generateMore.style.display = 'flex';
                
                // 显示下载按钮
                downloadBtn.classList.add('visible');
                
                return;
            } else {
                // 清除过期数据
                localStorage.removeItem('nameResults');
            }
        }
    } catch (e) {
        console.error('初始化应用时出错:', e);
        localStorage.removeItem('nameResults');
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initializeApp);