<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单日报系统</title>
    <link rel="stylesheet" href="/public/static/css/style.css">
</head>
<body>
    <div class="container">
        <h1>订单日报系统</h1>

        <div class="tabs">
            <button class="tab active" onclick="switchTab('config')">配置管理</button>
            <button class="tab" onclick="switchTab('generate')">日报生成</button>
            <button class="tab" onclick="switchTab('history')">历史记录</button>
        </div>

        <!-- 配置管理 -->
        <div id="config-tab" class="tab-content active">
            <div class="card">
                <button class="btn btn-primary" onclick="showCreateModal()">创建配置</button>
            </div>

            <div class="card">
                <table>
                    <thead>
                        <tr>
                            <th>配置名称</th>
                            <th>拆分方式</th>
                            <th>拆分值</th>
                            <th>字段数</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="config-list">
                        <tr><td colspan="6" class="loading">加载中...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 日报生成 -->
        <div id="generate-tab" class="tab-content">
            <div class="card">
                <div class="alert alert-info" style="margin-bottom: 20px;">
                    <strong> 使用说明：</strong><br>
                    1. 选择已创建的配置（可多选）<br>
                    2. 选择时间范围（可点击预设按钮快速选择）<br>
                    3. 点击"生成日报"按钮<br>
                    4. 生成成功后，点击"立即下载 Excel 文件"按钮下载，或切换到"历史记录"标签页查看和下载
                </div>
                
                <h3 style="margin-bottom: 20px;">生成日报</h3>
                
                <div class="form-group">
                    <label>选择配置（可多选）：</label>
                    <div style="margin-bottom: 10px;">
                        <button type="button" class="btn btn-sm" onclick="toggleSelectAllConfigs()">全选/取消全选</button>
                    </div>
                    <div id="generate-config-list" style="max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px;">
                        <div class="loading">加载中...</div>
                    </div>
                </div>

                <div class="form-group">
                    <label>时间范围：</label>
                    <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                        <input type="datetime-local" id="start-time" class="form-control">
                        <span>至</span>
                        <input type="datetime-local" id="end-time" class="form-control">
                        <button type="button" class="btn btn-sm" onclick="setPresetTime('yesterday')">昨天</button>
                        <button type="button" class="btn btn-sm" onclick="setPresetTime('last3days')">最近 3 天</button>
                        <button type="button" class="btn btn-sm" onclick="setPresetTime('last7days')">最近 7 天</button>
                    </div>
                </div>

                <button class="btn btn-success" onclick="generateReport()">生成日报</button>

                <div id="generate-result" style="margin-top: 20px;"></div>
            </div>
        </div>

        <!-- 历史记录 -->
        <div id="history-tab" class="tab-content">
            <div class="card">
                <div style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;">
                    <input type="date" id="history-start-date" class="form-control" style="width: auto;">
                    <span style="line-height: 38px;">至</span>
                    <input type="date" id="history-end-date" class="form-control" style="width: auto;">
                    <button class="btn btn-primary" onclick="queryHistoryByDate()">查询</button>
                    <button class="btn" onclick="clearDateQuery()">清除</button>
                    <button class="btn btn-danger" onclick="batchDownloadHistory()" style="margin-left: auto;">批量下载</button>
                </div>

                <table>
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all-history" onchange="toggleSelectAllHistory()"></th>
                            <th>报表日期</th>
                            <th>时间范围</th>
                            <th>配置名称</th>
                            <th>拆分值</th>
                            <th>订单数</th>
                            <th>总金额</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="history-list">
                        <tr><td colspan="9" class="loading">加载中...</td></tr>
                    </tbody>
                </table>

                <div id="history-pagination" style="margin-top: 20px; display: flex; justify-content: center; gap: 5px;"></div>
            </div>
        </div>
    </div>

    <!-- 创建/编辑配置模态框 -->
    <div id="config-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-title">创建配置</h2>
                <button class="close-btn" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="config-id">
                
                <div class="form-group">
                    <label>配置名称：</label>
                    <input type="text" id="config-name" class="form-control" placeholder="例如：108 路日报">
                </div>

                <div class="form-group">
                    <label>拆分方式：</label>
                    <select id="split-type" class="form-control" onchange="onSplitTypeChange()">
                        <option value="company_id">按企业</option>
                        <option value="user_id">按用户</option>
                        <option value="station_id">按场站</option>
                    </select>
                </div>

                <div class="form-group">
                    <label id="split-value-label">选择企业（可多选）：</label>
                    <div style="margin-bottom: 10px;">
                        <input type="text" id="entity-search" class="form-control" placeholder="搜索..." onkeyup="handleSearchEnter(event)" style="width: 200px; display: inline-block;">
                        <button type="button" class="btn btn-sm" onclick="searchEntities()" style="display: inline-block;">搜索</button>
                        <button type="button" class="btn btn-sm" onclick="toggleSelectAllEntities()" style="display: inline-block;">全选/取消全选</button>
                        <span id="selected-count" style="margin-left: 10px; color: var(--muted-foreground);">已选：0 个</span>
                    </div>
                    <div id="entity-list" style="max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px;">
                        <div class="loading">加载中...</div>
                    </div>
                </div>

                <div class="form-group">
                    <label>选择字段：</label>
                    <div id="field-list" style="max-height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px;">
                        <div class="loading">加载中...</div>
                    </div>
                </div>

                <div class="form-group" id="field-order-section" style="display: none;">
                    <label>字段顺序（上移/下移调整）：</label>
                    <div id="selected-fields-order" style="border: 1px solid var(--border); border-radius: 6px; padding: 10px; min-height: 50px;">
                        <div class="empty">请先选择字段</div>
                    </div>
                </div>

                <div class="form-group">
                    <label>求和字段（仅数值类型字段）：</label>
                    <div id="sum-fields-list" style="border: 1px solid var(--border); border-radius: 6px; padding: 10px; min-height: 50px;">
                        <div class="empty">请先选择字段，数值类型字段将显示在此处</div>
                    </div>
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="merge-telecom" onchange="toggleTelecomVehicleNo()">
                        合并特来电平台数据
                    </label>
                </div>

                <div class="form-group" id="telecom-vehicle-section" style="display: none;">
                    <label>特来电车量自编号（多个用逗号分隔）：</label>
                    <input type="text" id="telecom-vehicle-no" class="form-control" placeholder="例如：车 001,车 002">
                </div>

                <div class="form-group">
                    <label>分时段电量统计：</label>
                    <div id="time-period-editor">
                        <div style="margin-bottom: 10px;">
                            <button type="button" class="btn btn-sm" onclick="clearTimePeriods()">清空</button>
                            <button type="button" class="btn btn-sm" onclick="setDefaultTimePeriods()">默认配置</button>
                        </div>
                        <div class="time-period-grid" id="time-period-grid"></div>
                        <div class="time-period-summary" id="time-period-summary"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="saveConfig()">保存</button>
            </div>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="/public/static/js/common.js"></script>
    <script src="/public/static/js/config.js"></script>
    <script src="/public/static/js/entity.js"></script>
    <script src="/public/static/js/report.js"></script>
    <script src="/public/static/js/history.js"></script>
</body>
</html>
