{% extends "base.html" %}

{% block title %}数据操作 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}

{% block content %}
<style>
    /* 基础样式重置 */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* 容器样式 - 调整为靠左靠上 */
    .container {
        max-width: 1200px;
        margin: 0; /* 移除自动居中 */
        padding: 20px 0 0 20px; /* 顶部和左侧留白 */
    }

    /* 标题样式 - 减少底部边距 */
    h2 {
        color: #2c3e50;
        border-bottom: 2px solid #3498db;
        padding-bottom: 8px;
        margin-bottom: 15px; /* 减少间距 */
    }

    /* 描述文字样式 */
    p {
        margin-bottom: 15px;
    }

    /* 卡片容器样式 */
    .data-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    /* 卡片样式 */
    .data-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 20px;
        border: 1px solid #e0e0e0;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .data-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* 卡片头部样式 */
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    .card-header h3 {
        margin: 0;
        color: #333;
        font-size: 18px;
    }

    .card-actions {
        display: flex;
        gap: 8px;
    }

    /* 卡片内容样式 */
    .card-content {
        margin-bottom: 15px;
    }

    .field-item {
        display: flex;
        margin-bottom: 10px;
        line-height: 1.5;
    }

    .field-key {
        font-weight: 600;
        color: #333;
        min-width: 120px;
        margin-right: 10px;
    }

    .field-value {
        color: #666;
        flex: 1;
        word-break: break-word;
    }

    /* 卡片图片样式 */
    .card-image {
        text-align: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
    }

    .card-image img {
        max-width: 100%;
        max-height: 200px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* 操作按钮样式 */
    .action-button {
        padding: 6px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s;
        margin: 0 2px;
    }

    .edit-btn {
        background: linear-gradient(to right, #4CAF50, #45a049);
        color: white;
    }

    .edit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

    .delete-btn {
        background: linear-gradient(to right, #ff416c, #ff4b2b);
        color: white;
    }

    .delete-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 75, 43, 0.3);
    }

    /* 返回按钮样式 */
    .back-btn {
        display: inline-block;
        padding: 10px 20px;
        background: linear-gradient(to right, #0066cc, #003399);
        color: white;
        text-decoration: none;
        border-radius: 6px;
        margin-top: 15px; /* 减少顶部间距 */
        margin-left: 20px; /* 左侧对齐 */
        transition: transform 0.3s;
    }

    .back-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 102, 204, 0.4);
    }

    /* 空数据提示 */
    .no-data {
        text-align: center;
        padding: 40px 0;
        color: #a0aec0;
        font-style: italic;
        grid-column: 1 / -1;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .data-cards {
            grid-template-columns: 1fr;
        }
        
        .card-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        
        .card-actions {
            align-self: flex-end;
        }
        
        .field-item {
            flex-direction: column;
        }
        
        .field-key {
            min-width: auto;
            margin-bottom: 5px;
        }
    }
</style>

<div class="container">
    <h2>所有已录入的奖项信息</h2>
    <p>在此页面可以查看所有已录入的成果信息，并进行编辑和删除操作</p>

    <!-- 批量操作区域 -->
    <div class="batch-operations" style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0;">
        <div style="display: flex; align-items: center; gap: 15px;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <input type="checkbox" id="select-all" onchange="toggleSelectAll(this.checked)">
                <label for="select-all" style="font-weight: 600; color: #333;">全选</label>
            </div>
            <button type="button" class="batch-delete-btn" onclick="batchDelete()" style="padding: 8px 16px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background-color 0.3s;">
                批量删除选中项
            </button>
            <span id="selected-count" style="color: #666; font-size: 14px;">已选择 0 项</span>
        </div>
    </div>

    <div class="data-cards">
        {% if data %}
            {% for item in data %}
                <div class="data-card">
                    <div class="card-header">
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <input type="checkbox" class="doc-checkbox" value="{{ item._id }}" onchange="updateSelectedCount()">
                            <h3>记录 {{ loop.index }}</h3>
                        </div>
                        <div class="card-actions">
                            <a href="{{ url_for('edit_entry', doc_id=item._id) }}" class="action-button edit-btn">编辑</a>
                        </div>
                    </div>
                    
                    <div class="card-content">
                        {% if item.data %}
                            {# 从原始数据中解析字段 #}
                            {% set data_string = item.data %}
                            {% set pairs = data_string.split('|###|') %}
                            
                            {% for pair in pairs %}
                                {% if ':' in pair %}
                                    {% set key_value = pair.split(':', 1) %}
                                    {% set field_key = key_value[0].strip() %}
                                    {% set field_value = key_value[1].strip() %}
                                    
                                    {# 处理列表格式 [item1|##|item2] #}
                                    {% if field_value.startswith('[') and field_value.endswith(']') %}
                                        {% set list_content = field_value[1:-1] %}
                                        {% set field_value = list_content.split('|##|')|join(', ') %}
                                    {% endif %}
                                    
                                    <div class="field-item">
                                        <span class="field-key">{{ field_key }}：</span>
                                        <span class="field-value">{{ field_value or '无' }}</span>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            {# 如果没有data字段，显示解析后的字段 #}
                            {% for key, value in item.items() %}
                                {% if key not in ['_id', 'image'] %}
                                    <div class="field-item">
                                        <span class="field-key">{{ key }}：</span>
                                        <span class="field-value">
                                            {% if value is sequence and value is not string %}
                                                {{ value|join(', ') if value else '无' }}
                                            {% else %}
                                                {{ value or '无' }}
                                            {% endif %}
                                        </span>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                    

                </div>
            {% endfor %}
        {% else %}
            <div class="no-data">暂无数据</div>
        {% endif %}
    </div>

    <a href="{{ url_for('index') }}" class="back-btn">返回首页</a>
</div>

<script>
// 全选/取消全选功能
function toggleSelectAll(checked) {
    const checkboxes = document.querySelectorAll('.doc-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = checked;
    });
    updateSelectedCount();
}

// 更新选择计数
function updateSelectedCount() {
    const checkboxes = document.querySelectorAll('.doc-checkbox');
    const selectedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
    document.getElementById('selected-count').textContent = `已选择 ${selectedCount} 项`;
    
    // 更新全选复选框状态
    const selectAllCheckbox = document.getElementById('select-all');
    if (selectedCount === 0) {
        selectAllCheckbox.checked = false;
        selectAllCheckbox.indeterminate = false;
    } else if (selectedCount === checkboxes.length) {
        selectAllCheckbox.checked = true;
        selectAllCheckbox.indeterminate = false;
    } else {
        selectAllCheckbox.checked = false;
        selectAllCheckbox.indeterminate = true;
    }
}

// 批量删除功能
function batchDelete() {
    const checkboxes = document.querySelectorAll('.doc-checkbox:checked');
    if (checkboxes.length === 0) {
        alert('请至少选择一条记录进行删除');
        return;
    }
    
    const confirmMessage = `确定要删除选中的 ${checkboxes.length} 条记录吗？此操作不可撤销。`;
    if (!confirm(confirmMessage)) {
        return;
    }
    
    // 收集选中的文档ID
    const docIds = Array.from(checkboxes).map(cb => cb.value);
    
    // 创建表单并提交
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/batch_delete';
    
    docIds.forEach(docId => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'doc_ids';
        input.value = docId;
        form.appendChild(input);
    });
    
    document.body.appendChild(form);
    form.submit();
}

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
    updateSelectedCount();
});
</script>

{% endblock %}