<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>门诊管理 - 患者画像回访话术系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: #f5f5f5;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .logout-btn {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }
        .logout-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .clinics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .clinic-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .clinic-card:hover {
            transform: translateY(-2px);
        }
        .clinic-card h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        .clinic-card p {
            color: #666;
            margin: 5px 0;
        }
        .clinic-link {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            margin-top: 10px;
        }
        .clinic-link:hover {
            background: #5a6fd8;
        }
        .stats {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .stats h2 {
            margin: 0 0 15px 0;
            color: #333;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        .stat-item {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
        }
        .stat-label {
            color: #666;
            margin-top: 5px;
        }
        .export-btn {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        }
        .export-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
        }
        .export-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .export-status {
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
        }
        .export-status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .export-status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .export-status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>患者画像回访话术系统 - 门诊管理</h1>
        <div class="user-info">
            <span>欢迎，{{ session_data.real_name }}</span>
            <a href="/login" class="logout-btn">登出</a>
        </div>
    </div>
    
    <div class="container">
        <div class="stats">
            <h2>系统概览</h2>
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number">9</div>
                    <div class="stat-label">门诊总数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">4,125</div>
                    <div class="stat-label">患者总数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">100%</div>
                    <div class="stat-label">数据完整性</div>
                </div>
            </div>
            
            <div style="margin-top: 20px; text-align: center;">
                <button id="exportBtn" class="export-btn" onclick="exportData()">
                    📊 导出所有诊所数据到Excel
                </button>
                <div id="exportStatus" style="margin-top: 10px; display: none;"></div>
            </div>
        </div>
        
        <h2>门诊列表</h2>
        <p>您可以访问所有门诊的患者画像和回访话术数据。</p>
        
        <div class="clinics-grid">
            <div class="clinic-card">
                <h3>学前街门诊</h3>
                <p>门诊ID: clinic_xuexian</p>
                <p>预期患者数: 765</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_xuexian') }}" class="clinic-link">查看患者画像</a>
            </div>
            
            <div class="clinic-card">
                <h3>大丰门诊</h3>
                <p>门诊ID: clinic_dafeng</p>
                <p>预期患者数: 598</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_dafeng') }}" class="clinic-link">查看患者画像</a>
            </div>

            <div class="clinic-card">
                <h3>东亭门诊</h3>
                <p>门诊ID: clinic_dongting</p>
                <p>预期患者数: 479</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_dongting') }}" class="clinic-link">查看患者画像</a>
            </div>

            <div class="clinic-card">
                <h3>河埒门诊</h3>
                <p>门诊ID: clinic_helai</p>
                <p>预期患者数: 108</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_helai') }}" class="clinic-link">查看患者画像</a>
            </div>

            <div class="clinic-card">
                <h3>红豆门诊</h3>
                <p>门诊ID: clinic_hongdou</p>
                <p>预期患者数: 500</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_hongdou') }}" class="clinic-link">查看患者画像</a>
            </div>

            <div class="clinic-card">
                <h3>惠山门诊</h3>
                <p>门诊ID: clinic_huishan</p>
                <p>预期患者数: 323</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_huishan') }}" class="clinic-link">查看患者画像</a>
            </div>

            <div class="clinic-card">
                <h3>马山门诊</h3>
                <p>门诊ID: clinic_mashan</p>
                <p>预期患者数: 527</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_mashan') }}" class="clinic-link">查看患者画像</a>
            </div>

            <div class="clinic-card">
                <h3>通善口腔医院</h3>
                <p>门诊ID: clinic_hospital</p>
                <p>预期患者数: 536</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_hospital') }}" class="clinic-link">查看患者画像</a>
            </div>

            <div class="clinic-card">
                <h3>新吴门诊</h3>
                <p>门诊ID: clinic_xinwu</p>
                <p>预期患者数: 297</p>
                <a href="{{ url_for('patient.clinic_patients', clinic_id='clinic_xinwu') }}" class="clinic-link">查看患者画像</a>
            </div>
        </div>
    </div>

    <script>
    function exportData() {
        const exportBtn = document.getElementById('exportBtn');
        const exportStatus = document.getElementById('exportStatus');

        // 禁用按钮，显示加载状态
        exportBtn.disabled = true;
        exportBtn.textContent = '🔄 正在导出...';
        exportStatus.style.display = 'block';
        exportStatus.className = 'export-status info';
        exportStatus.textContent = '正在生成Excel文件，请稍候...';

        // 调用导出API
        fetch('/api/export-data')
            .then(response => {
                if (response.ok) {
                    // 获取文件名（从响应头或生成默认名称）
                    const contentDisposition = response.headers.get('Content-Disposition');
                    let filename = '回访记录导出.xlsx';
                    if (contentDisposition) {
                        const filenameMatch = contentDisposition.match(/filename="(.+)"/);
                        if (filenameMatch) {
                            filename = filenameMatch[1];
                        }
                    }

                    return response.blob().then(blob => ({ blob, filename }));
                } else {
                    return response.json().then(data => {
                        throw new Error(data.message || '导出失败');
                    });
                }
            })
            .then(({ blob, filename }) => {
                exportStatus.className = 'export-status success';
                exportStatus.textContent = `✅ 数据导出成功 - 文件名: ${filename}`;

                // 创建下载链接
                const downloadUrl = window.URL.createObjectURL(blob);
                const downloadLink = document.createElement('a');
                downloadLink.href = downloadUrl;
                downloadLink.download = filename;
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);

                // 释放URL对象
                window.URL.revokeObjectURL(downloadUrl);

                // 恢复按钮状态
                exportBtn.disabled = false;
                exportBtn.textContent = '📊 导出所有诊所数据到Excel';

                // 3秒后隐藏状态信息
                setTimeout(() => {
                    exportStatus.style.display = 'none';
                }, 3000);
            })
            .catch(error => {
                exportStatus.className = 'export-status error';
                exportStatus.textContent = `❌ 导出失败: ${error.message}`;

                // 恢复按钮状态
                exportBtn.disabled = false;
                exportBtn.textContent = '📊 导出所有诊所数据到Excel';

                // 5秒后隐藏错误信息
                setTimeout(() => {
                    exportStatus.style.display = 'none';
                }, 5000);
            });
    }
    </script>
</body>
</html>
