{% extends "base.html" %}

{% block title %}{{ clinic_info.clinic_name }} - 患者画像系统{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- 头部 -->
    <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-2">{{ clinic_info.clinic_name }}</h1>
        <p class="text-xl text-gray-600">患者画像系统</p>
        <div class="mt-4 text-sm text-gray-500">
            <i class="fas fa-users mr-2"></i>
            共 {{ patients|length }} 个患者
            <span class="mx-2">|</span>
            <i class="fas fa-sync-alt mr-2"></i>
            动态加载
        </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="mb-6">
        <div class="flex flex-col md:flex-row gap-4">
            <div class="flex-1">
                <input type="text" 
                       id="searchInput" 
                       placeholder="搜索患者姓名或病历号..." 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <div class="flex gap-2">
                <select id="ageFilter" class="px-4 py-2 border border-gray-300 rounded-lg">
                    <option value="">所有年龄</option>
                    <option value="0-18">0-18岁</option>
                    <option value="19-35">19-35岁</option>
                    <option value="36-60">36-60岁</option>
                    <option value="60+">60岁以上</option>
                </select>
                <select id="genderFilter" class="px-4 py-2 border border-gray-300 rounded-lg">
                    <option value="">所有性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>
    </div>

    <!-- 患者列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="patientGrid">
        {% for patient in patients %}
        <div class="patient-card bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 p-6"
             data-name="{{ patient.姓名 }}" 
             data-id="{{ patient.病历号 }}"
             data-age="{{ patient.年龄 }}"
             data-gender="{{ patient.性别 }}">
            
            <!-- 患者基本信息 -->
            <div class="flex items-center mb-4">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-user text-blue-600"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">{{ patient.姓名 }}</h3>
                    <p class="text-sm text-gray-600">{{ patient.性别 }} · {{ patient.年龄 }}岁</p>
                </div>
            </div>

            <!-- 病历信息 -->
            <div class="mb-4">
                <p class="text-sm text-gray-600 mb-1">
                    <i class="fas fa-id-card mr-2"></i>
                    病历号：{{ patient.病历号 }}
                </p>
                {% if patient.最后一次就诊时间 %}
                <p class="text-sm text-gray-600 mb-1">
                    <i class="fas fa-calendar mr-2"></i>
                    最后就诊：{{ patient.最后一次就诊时间[:10] }}
                </p>
                {% endif %}
                {% if patient.最后一次就诊医生 %}
                <p class="text-sm text-gray-600">
                    <i class="fas fa-user-md mr-2"></i>
                    医生：{{ patient.最后一次就诊医生 }}
                </p>
                {% endif %}
            </div>

            <!-- 诊断信息 -->
            {% if patient.上次就诊诊断 %}
            <div class="mb-4">
                <p class="text-xs text-gray-500 mb-1">最近诊断：</p>
                <p class="text-sm text-gray-700 line-clamp-2">{{ patient.上次就诊诊断[:50] }}{% if patient.上次就诊诊断|length > 50 %}...{% endif %}</p>
            </div>
            {% endif %}

            <!-- 操作按钮 -->
            <div class="flex gap-2">
                <a href="/patient_profiles/{{ clinic_id }}/patients/{{ patient.病历号 }}.html" 
                   class="flex-1 bg-blue-500 hover:bg-blue-600 text-white text-center py-2 px-4 rounded-lg text-sm font-medium transition-colors duration-200">
                    <i class="fas fa-eye mr-1"></i>
                    查看详情
                </a>
                <button onclick="quickCallback('{{ patient.病历号 }}')" 
                        class="bg-green-500 hover:bg-green-600 text-white py-2 px-3 rounded-lg text-sm transition-colors duration-200">
                    <i class="fas fa-phone"></i>
                </button>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 空状态 -->
    <div id="emptyState" class="text-center py-12 hidden">
        <i class="fas fa-search text-gray-400 text-4xl mb-4"></i>
        <p class="text-gray-500">没有找到匹配的患者</p>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// 搜索和筛选功能
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const ageFilter = document.getElementById('ageFilter');
    const genderFilter = document.getElementById('genderFilter');
    const patientCards = document.querySelectorAll('.patient-card');
    const emptyState = document.getElementById('emptyState');

    function filterPatients() {
        const searchTerm = searchInput.value.toLowerCase();
        const selectedAge = ageFilter.value;
        const selectedGender = genderFilter.value;
        let visibleCount = 0;

        patientCards.forEach(card => {
            const name = card.dataset.name.toLowerCase();
            const id = card.dataset.id.toLowerCase();
            const age = parseInt(card.dataset.age);
            const gender = card.dataset.gender;

            // 搜索匹配
            const matchesSearch = name.includes(searchTerm) || id.includes(searchTerm);

            // 年龄筛选
            let matchesAge = true;
            if (selectedAge) {
                if (selectedAge === '0-18') matchesAge = age <= 18;
                else if (selectedAge === '19-35') matchesAge = age >= 19 && age <= 35;
                else if (selectedAge === '36-60') matchesAge = age >= 36 && age <= 60;
                else if (selectedAge === '60+') matchesAge = age > 60;
            }

            // 性别筛选
            const matchesGender = !selectedGender || gender === selectedGender;

            if (matchesSearch && matchesAge && matchesGender) {
                card.style.display = 'block';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });

        // 显示/隐藏空状态
        if (visibleCount === 0) {
            emptyState.classList.remove('hidden');
        } else {
            emptyState.classList.add('hidden');
        }
    }

    // 绑定事件
    searchInput.addEventListener('input', filterPatients);
    ageFilter.addEventListener('change', filterPatients);
    genderFilter.addEventListener('change', filterPatients);
});

// 快速回访功能
function quickCallback(patientId) {
    // 这里可以实现快速回访功能
    alert(`快速回访功能：${patientId}`);
}
</script>
{% endblock %}