{% extends "service_manage/base.html" %}

{% block title %}服务升级{% endblock %}
{% block breadcrumb %}服务升级{% endblock %}

{% block extra_css %}
<style>
    .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--gray-200); margin-bottom: 20px; }
    .tab { padding: 12px 24px; font-size: 14px; font-weight: 600; color: var(--gray-500); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
    .tab:hover { color: var(--gray-700); }
    .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; align-items: center; }
    .btn-toolbar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; }
    .btn-blue { background: var(--primary); color: #fff; }
    .btn-blue:hover { background: var(--primary-hover); }
    .btn-blue:disabled { background: var(--gray-300); color: var(--gray-500); cursor: not-allowed; }
    .btn-green { background: var(--green); color: #fff; }
    .btn-green:hover { background: #15803d; }
    .btn-gray { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-300); }
    .btn-gray:hover { background: var(--gray-50); }
    .service-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .service-table thead { background: var(--gray-50); }
    .service-table th { padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--gray-700); text-align: left; border-bottom: 1px solid var(--gray-200); }
    .service-table td { padding: 12px 16px; font-size: 14px; color: var(--gray-900); border-bottom: 1px solid var(--gray-100); }
    .service-table tr:hover { background: var(--gray-50); }
    .service-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
    .service-type { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
    .type-python { background: #e0f2fe; color: #0369a1; }
    .type-java { background: #fef3c7; color: #92400e; }
    .type-docker { background: #dbeafe; color: #1d4ed8; }
    .type-nginx { background: #dcfce7; color: #166534; }
    .btn-row { padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; border: none; transition: all 0.2s; }
    .btn-restart { background: var(--yellow-light); color: var(--yellow); }
    .btn-restart:hover { background: var(--yellow); color: #fff; }
    .btn-log { background: var(--gray-100); color: var(--gray-600); }
    .btn-log:hover { background: var(--gray-200); }
    .path-text { font-family: monospace; font-size: 12px; color: var(--gray-600); word-break: break-all; }
    @media screen and (max-width: 768px) {
        .toolbar { gap: 8px; }
        .btn-toolbar { padding: 8px 12px; font-size: 12px; }
        .service-table { font-size: 13px; }
        .service-table th, .service-table td { padding: 8px 10px; }
    }
</style>
{% endblock %}
{% block content %}
<div class="section-head"><h2 class="section-title">⬆️ 服务升级</h2></div>

<!-- Tabs -->
<div class="tabs">
    <button class="tab active" onclick="switchTab(this, "restart")">服务重启</button>
    <button class="tab" onclick="switchTab(this, "rollback")">服务回滚</button>
</div>

<!-- Tab: 服务重启 -->
<div class="tab-content active" id="tab-restart">
    <div class="toolbar">
        <button class="btn-toolbar btn-gray" onclick="handleAction("download-config")">📥 下载配置</button>
        <button class="btn-toolbar btn-gray" onclick="handleAction("backup-db")">💾 备份数据库文件</button>
        <button class="btn-toolbar btn-blue" onclick="handleAction("upload-update")">📤 上传更新服务</button>
        <button class="btn-toolbar btn-green" id="btn-restart-selected" disabled onclick="handleAction("restart-selected")">🔄 重启已选服务</button>
        <button class="btn-toolbar btn-gray" id="btn-download-logs" disabled onclick="handleAction("download-logs")">📋 下载日志</button>
    </div>
    <table class="service-table">
        <thead>
            <tr>
                <th><input type="checkbox" id="select-all" onchange="toggleSelectAll(this)"></th>
                <th>服务名称</th>
                <th>服务类型</th>
                <th>升级路径</th>
                <th>重启脚本路径</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="row-check" onchange="updateBatchButtons()"></td>
                <td>运维系统</td>
                <td><span class="service-type type-python">PYTHON</span></td>
                <td><span class="path-text">/data/services/api/python-cmdb/cmdb</span></td>
                <td><span class="path-text">/var/www/html/start.sh</span></td>
                <td>
                    <button class="btn-row btn-restart" onclick="handleAction("restart", "运维系统")">重启</button>
                    <button class="btn-row btn-log" onclick="handleAction("log", "运维系统")">下载日志</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="row-check" onchange="updateBatchButtons()"></td>
                <td>预定系统2.0</td>
                <td><span class="service-type type-java">JAVA</span></td>
                <td><span class="path-text">/data/services/api/java-meeting/java-meeting2.0/ubains-meeting-inner-api-1.0-SNAPSHOT.jar</span></td>
                <td><span class="path-text">/var/www/java/api/java-meeting/java-meeting2.0/run.sh</span></td>
                <td>
                    <button class="btn-row btn-restart" onclick="handleAction("restart", "预定系统2.0")">重启</button>
                    <button class="btn-row btn-log" onclick="handleAction("log", "预定系统2.0")">下载日志</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="row-check" onchange="updateBatchButtons()"></td>
                <td>消息调度服务</td>
                <td><span class="service-type type-java">JAVA</span></td>
                <td><span class="path-text">/data/services/api/java-meeting/java-message-scheduling/ubains-meeting-message-scheduling-1.0-SNAPSHOT.jar</span></td>
                <td><span class="path-text">/var/www/java/api/java-meeting/java-message-scheduling/run.sh</span></td>
                <td>
                    <button class="btn-row btn-restart" onclick="handleAction("restart", "消息调度服务")">重启</button>
                    <button class="btn-row btn-log" onclick="handleAction("log", "消息调度服务")">下载日志</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- Tab: 服务回滚 -->
<div class="tab-content" id="tab-rollback">
    <div class="toolbar">
        <button class="btn-toolbar btn-gray" onclick="handleAction("download-config")">📥 下载配置</button>
        <button class="btn-toolbar btn-blue" id="btn-rollback-selected" disabled onclick="handleAction("rollback-selected")">⏪ 回滚已选服务</button>
    </div>
    <table class="service-table">
        <thead>
            <tr>
                <th><input type="checkbox" id="select-all-rollback" onchange="toggleSelectAll(this)"></th>
                <th>服务名称</th>
                <th>服务类型</th>
                <th>当前版本</th>
                <th>回滚版本</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="row-check-rollback" onchange="updateBatchButtons()"></td>
                <td>运维系统</td>
                <td><span class="service-type type-python">PYTHON</span></td>
                <td>v2.3.1</td>
                <td>v2.3.0</td>
                <td><button class="btn-row btn-restart" onclick="handleAction("rollback", "运维系统")">回滚</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="row-check-rollback" onchange="updateBatchButtons()"></td>
                <td>预定系统2.0</td>
                <td><span class="service-type type-java">JAVA</span></td>
                <td>v1.5.2</td>
                <td>v1.5.1</td>
                <td><button class="btn-row btn-restart" onclick="handleAction("rollback", "预定系统2.0")">回滚</button></td>
            </tr>
        </tbody>
    </table>
</div>
{% endblock %}
{% block extra_js %}
<script>
function switchTab(btn, tabId) {
    document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
    document.querySelectorAll(".tab-content").forEach(c => c.classList.remove("active"));
    btn.classList.add("active");
    document.getElementById("tab-" + tabId).classList.add("active");
    updateBatchButtons();
}

function toggleSelectAll(checkbox) {
    const checks = checkbox.closest("table").querySelectorAll("input[type=checkbox]:not(#" + checkbox.id + ")");
    checks.forEach(c => c.checked = checkbox.checked);
    updateBatchButtons();
}

function updateBatchButtons() {
    const checked = document.querySelectorAll(".row-check:checked, .row-check-rollback:checked");
    const restartBtn = document.getElementById("btn-restart-selected");
    const logsBtn = document.getElementById("btn-download-logs");
    const rollbackBtn = document.getElementById("btn-rollback-selected");
    if (restartBtn) restartBtn.disabled = checked.length === 0;
    if (logsBtn) logsBtn.disabled = checked.length === 0;
    if (rollbackBtn) rollbackBtn.disabled = checked.length === 0;
}

function handleAction(action, serviceName) {
    alert(action + " 功能开发中，敬请期待" + (serviceName ? " - " + serviceName : ""));
}
</script>
{% endblock %}