<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Python 包管理工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #121212; /* 更深的背景色 */
            color: #e0e0e0; /* 更柔和的文字颜色 */
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .header, .footer {
            background-color: #1e1e1e; /* 深色标题和底部 */
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }

        .main {
            display: flex;
            flex: 1;
            margin: 10px; /* 添加间距 */
        }

        .sidebar-left, .sidebar-right {
            flex: 1;
            background-color: rgba(34, 34, 34, 0); /* 设置为透明背景 */
            padding: 5px; /* 减少内边距 */
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            height: 70vh; /* 设置固定高度 */
            overflow-y: hidden; /* 去掉垂直滚动条 */
            overflow-x: hidden; /* 去掉水平滚动条 */
            display: flex;
            flex-direction: column; /* 使内容垂直排列 */
        }

        .content {
            flex: 3;
            padding: 20px;
            background-color: #2c2c2c; /* 内容区域背景颜色 */
            border-radius: 8px;
            margin: 0 10px; /* 中间内容与边栏的间隔 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }

        h1, h2, h3 {
            color: #ffffff;
        }

        .search-container {
            position: relative;
            width: calc(100% - 20px); /* 调整宽度以与表格对齐 */
            margin-bottom: 10px;
        }

        input {
            width: 100%; /* 输入框占满容器 */
            padding: 8px; /* 减少内边距 */
            border: 1px solid #444;
            border-radius: 5px;
            background-color: #333; /* 输入框背景颜色 */
            color: #f5f5f5; /* 输入框文字颜色 */
            box-sizing: border-box; /* 确保内边距和边框不会影响宽度 */
        }

        .search-icon {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #888; /* 图标颜色 */
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px; /* 减少下边距 */
        }

        th, td {
            padding: 5px; /* 减少单元格内边距 */
            text-align: left;
            border-bottom: 1px solid #444;
        }

        th {
            background-color: #444; /* 表头背景颜色 */
            cursor: pointer;
        }

        tr:hover {
            background-color: #555; /* 行悬停效果 */
        }

        #search-results {
            margin-top: 10px; /* 调整与搜索结果的间距 */
            flex-grow: 1; /* 使搜索结果区域填满剩余空间 */
            overflow-y: hidden; /* 去掉搜索结果的滚动条 */
            overflow-x: hidden; /* 去掉水平滚动条 */
        }

        button {
            background-color: #007bff; /* 按钮背景色 */
            color: #ffffff; /* 按钮文字颜色 */
            border: none;
            padding: 3px 12px; /* 调整高度 */
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px; /* 可选：调整字体大小 */
        }

        button:hover {
            background-color: #0056b3; /* 悬停时按钮背景色 */
        }


        .search-container {
            position: relative;
            width: calc(100% - 20px);
            margin-bottom: 20px; /* 增加与表格的间隔 */
        }

        table {
            margin-top: 20px; /* 增加表格的上边距 */
        }

    </style>
</head>
<body>
<div class="header">
    <h1>Python 包管理工具</h1>
</div>

<div class="main">
    <div class="sidebar-left">
        <!-- 左边栏内容（暂时为空） -->
    </div>

    <div class="content">
        <h2>已安装的包</h2>
        <input type="text" id="filter" placeholder="按名称过滤..." oninput="filterPackages()">
        <table>
            <thead>
            <tr>
                <th onclick="sortTable(0)">名称</th>
                <th onclick="sortTable(1)">版本</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="package-table">
            {% for package in packages %}
            <tr>
                <td>{{ package.name }}</td>
                <td>{{ package.version }}</td>
                <td>
                    <button onclick="uninstall('{{ package.name }}')">卸载</button>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="sidebar-right">
        <h2>在线搜索</h2>
        <div class="search-container">
            <!--                <span class="search-icon">🔍</span>-->
            <input type="text" id="search-filter" placeholder="按名称搜索..."
                   onkeypress="if (event.key === 'Enter') searchPackages()">
        </div>
        <h3>镜像源</h3>
        <select id="mirror-source">
            <option value="https://pypi.python.org/simple">默认镜像</option>
            <option value="https://mirrors.aliyun.com/pypi/simple/">阿里云</option>
            <option value="https://pypi.tuna.tsinghua.edu.cn/simple">清华大学</option>
            <option value="https://pypi.hust.edu.cn/simple">华中科技大学</option>
            <option value="https://pypi.mirrors.ustc.edu.cn/simple/">中国科学技术大学</option>
            <option value="https://pypi.douban.com/simple/">豆瓣</option>
        </select>
        <div id="search-results"></div> <!-- 搜索结果展示区域 -->
    </div>
</div>

<div class="footer">
    <!-- 底部内容（暂时为空） -->
</div>

<script>
    let sortOrder = {name: 1, version: 1}; // 1 为正序，-1 为倒序

    function filterPackages() {
        const filter = document.getElementById('filter').value.toLowerCase();
        const rows = document.querySelectorAll('#package-table tr');
        rows.forEach(row => {
            const name = row.cells[0].textContent.toLowerCase();
            row.style.display = name.includes(filter) ? '' : 'none';
        });
    }

    function sortTable(columnIndex) {
        const table = document.getElementById('package-table');
        const rows = Array.from(table.rows);
        const columnNames = ['name', 'version'];

        // 切换排序顺序
        sortOrder[columnNames[columnIndex]] *= -1;

        rows.sort((a, b) => {
            const aText = a.cells[columnIndex].textContent;
            const bText = b.cells[columnIndex].textContent;
            return sortOrder[columnNames[columnIndex]] * aText.localeCompare(bText);
        });

        rows.forEach(row => table.appendChild(row)); // 移动行到表格
    }

    function uninstall(packageName) {
        fetch(`/uninstall/${packageName}`, {
            method: 'DELETE'
        }).then(response => {
            if (response.ok) {
                location.reload(); // 卸载成功，刷新页面
            } else {
                alert('卸载失败');
            }
        });
    }

    function searchPackages() {
        const filter = document.getElementById('search-filter').value.trim();
        if (filter === "") {
            alert('请输入包名');
            return;
        }

        // 使用 fetch 从后台获取数据
        fetch(`/search/?q=${filter}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不是 OK');
                }
                return response.json(); // 解析为 JSON
            })
            .then(data => {
                renderSearchResults(data); // 渲染搜索结果
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            });
    }

    function renderSearchResults(data) {
    const resultsContainer = document.getElementById('search-results');
    resultsContainer.innerHTML = ''; // 清空之前的结果

    if (data.length === 0) {
        resultsContainer.innerHTML = '<p>未找到结果。</p>';
        return;
    }

    const resultTable = document.createElement('table');
    resultTable.innerHTML = `
        <thead>
            <tr>
                <th>名称</th>
                <th>版本</th> <!-- 新增版本号列 -->
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
    `;

    data.forEach(package => {
        resultTable.innerHTML += `
            <tr>
                <td>${package.name}</td>
                <td>${package.version}</td> <!-- 显示版本号 -->
                <td><button onclick="install('${package.name}')">安装</button></td>
            </tr>
        `;
    });

    resultTable.innerHTML += `</tbody></table>`;
    resultsContainer.appendChild(resultTable);
}


    function install(packageName) {
        const mirrorSource = document.getElementById('mirror-source').value;
        fetch(`/install/?q=${packageName}&mirror=${mirrorSource}`, {
            method: 'GET'
        }).then(response => {
            if (response.ok) {
                alert('安装成功');
                location.reload(); // 安装成功，刷新页面
            } else {
                alert('安装失败');
            }
        });
    }
</script>
</body>
</html>
