question/js/analyzeQuestion.js

let currentQuestionnaire = null;
let questionnaireAnswers = [];

function formatDate(timestamp) {
    if (!timestamp) return '-';
    const date = new Date(timestamp);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}

function renderPieChart(containerId, labels, data) {
    const ctx = document.getElementById(containerId).getContext('2d');
    return new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB',
                    '#FFCE56',
                    '#4BC0C0',
                    '#9966FF',
                    '#FF9F40'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
}

function renderBarChart(containerId, validCount, invalidCount) {
    const ctx = document.getElementById(containerId).getContext('2d');
    return new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['有效回答', '无效回答'],
            datasets: [{
                data: [validCount, invalidCount],
                backgroundColor: ['#36A2EB', '#FF6384']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
}

function analyzeAnswers(question) {
    const answers = questionnaireAnswers.map(response => 
        response.answers.find(a => a.questionId === question.id)
    );

    if (question.type === 'text') {
        const validCount = answers.filter(a => a && a.answer && a.answer.trim()).length;
        const invalidCount = answers.length - validCount;
        return { validCount, invalidCount };
    } else {
        const optionCounts = {};
        question.options.forEach(opt => optionCounts[opt.id] = 0);
        
        answers.forEach(answer => {
            if (answer && answer.answer) {
                const selectedOptions = Array.isArray(answer.answer) ? answer.answer : [answer.answer];
                selectedOptions.forEach(optId => {
                    if (optionCounts[optId] !== undefined) {
                        optionCounts[optId]++;
                    }
                });
            }
        });
        return optionCounts;
    }
}

function renderQuestion(question, index) {
    const analysis = analyzeAnswers(question);
    const chartId = `chart_${question.id}`;

    let questionHtml = `
        <div class="question-item">
            <div class="question-content">
                <div class="question-item-title">
                    ${index + 1}. ${question.title}
                    ${question.required ? '<span style="color: red; margin-left: 5px;">*（必答题）</span>' : ''}
                </div>
    `;

    if (question.type === 'text') {
        questionHtml += `
            <div class="text-analysis">
                <div class="question-content">
                    <textarea class="text-answer" disabled 
                        style="width: 100%; min-height: 100px; padding: 8px; margin-top: 10px; resize: vertical; background-color: #f5f5f5;"
                        placeholder="此处填写答案"></textarea>
                </div>
            </div>
            </div>
            <div class="chart-container">
                <canvas id="${chartId}"></canvas>
            </div>
        `;

        setTimeout(() => renderBarChart(chartId, analysis.validCount, analysis.invalidCount), 0);
    } else {
        questionHtml += `
            <div class="options">
                ${question.options.map(option => `
                    <div class="option-item">
                        <input type="${question.type}" disabled>
                        <label>${option.content}</label>
                        <span style="margin-left: 10px;"></span>
                    </div>
                `).join('')}
            </div>
            </div>
            <div class="chart-container">
                <canvas id="${chartId}"></canvas>
            </div>
        `;

        setTimeout(() => renderPieChart(
            chartId,
            question.options.map(opt => opt.content),
            question.options.map(opt => analysis[opt.id])
        ), 0);
    }

    questionHtml += `</div>`;
    return questionHtml;
}

function loadQuestionnaireData() {
    const urlParams = new URLSearchParams(window.location.search);
    const questionnaireId = urlParams.get('id');
    
    if (!questionnaireId) {
        alert('问卷ID不存在！');
        window.location.href = 'myQuestion.html';
        return;
    }

    const questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]');
    const questionnaire = questionnaireList.find(q => q.id === questionnaireId);

    if (!questionnaire) {
        alert('问卷不存在！');
        window.location.href = 'myQuestion.html';
        return;
    }

    currentQuestionnaire = questionnaire;

    // 获取问卷答案
    const allAnswers = JSON.parse(localStorage.getItem('questionnaireAnswers') || '[]');
    questionnaireAnswers = allAnswers.filter(a => a.questionnaireId === questionnaireId);

    // 填充问卷信息
    document.querySelector('.question-title').textContent = questionnaire.title;
    document.querySelector('.create-time').textContent = formatDate(questionnaire.createTime);
    document.querySelector('.publish-time').textContent = formatDate(questionnaire.publishTime);
    document.querySelector('.end-time').textContent = formatDate(questionnaire.data.endTime);
    document.querySelector('.status').textContent = questionnaire.status;
    document.querySelector('.response-count').textContent = questionnaireAnswers.length;

    // 渲染问题列表
    const questionListHtml = questionnaire.data.questions
        .map((question, index) => renderQuestion(question, index))
        .join('');
    document.querySelector('.question-list').innerHTML = questionListHtml;
}

window.onload = loadQuestionnaireData;