<!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 href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .loading-spinner {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .category-btn.active {
            background-color: #e0e7ff;
            border: 2px solid #818cf8;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8 text-center">
            <h1 class="text-3xl font-bold text-indigo-600 mb-2">软件资源下载中心</h1>
            <p class="text-gray-600">浏览和下载可用的软件资源</p>
        </header>

        <div id="category-buttons" class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <!-- 分类按钮将通过JavaScript动态生成 -->
        </div>

        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-4 border-b flex flex-col md:flex-row justify-between items-center">
                <h2 id="category-title" class="text-xl font-semibold text-gray-800 mb-2 md:mb-0">软件列表</h2>
                <div class="relative w-full md:w-auto">
                    <input type="text" id="search-input" placeholder="搜索软件..." class="w-full md:w-64 pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>

            <div id="loading" class="p-8 text-center">
                <i class="fas fa-spinner loading-spinner text-indigo-500 text-4xl mb-4"></i>
                <p class="text-gray-600">正在加载数据...</p>
            </div>

            <div id="error-message" class="p-8 text-center bg-red-50 text-red-600 hidden">
                <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
                <p class="font-medium">加载数据时出错</p>
                <p id="error-detail" class="text-sm mt-1"></p>
                <button id="retry-btn" class="mt-4 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">重试</button>
            </div>

            <div id="software-list" class="divide-y hidden">
                <div class="p-8 text-center text-gray-500">
                    <i class="fas fa-box-open text-3xl mb-2"></i>
                    <p>请选择一个分类查看软件</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 定义API端点和分类信息
        const apiEndpoints = {
            pda: {
                url: 'https://pan.hakspay.cn/software/pda',
                name: 'PDA盘点机软件',
                icon: 'fa-mobile-alt',
                color: 'blue'
            },
            server: {
                url: 'https://pan.hakspay.cn/software/windows',
                name: 'Windows系统软件',
                icon: 'fa-server',
                color: 'purple'
            },
            eServer: {
                url: 'https://pan.hakspay.cn/SOFTWARE/eServer/',
                name: '峰厦云库客户端',
                icon: 'fa-cloud',
                color: 'green'
            },
            screen: {
                url: 'https://pan.hakspay.cn/SOFTWARE/sreen/',
                name: '电子价签',
                icon: 'fa-desktop',
                color: 'yellow'
            },
            tools: {
                url: 'https://pan.hakspay.cn/SOFTWARE/tools/',
                name: '实用工具',
                icon: 'fa-tools',
                color: 'red'
            }
        };

        // 当前选中的分类和软件数据
        let currentCategory = null;
        let allSoftwareData = [];

        // DOM元素
        const loadingElement = document.getElementById('loading');
        const errorElement = document.getElementById('error-message');
        const errorDetailElement = document.getElementById('error-detail');
        const retryButton = document.getElementById('retry-btn');
        const softwareListElement = document.getElementById('software-list');
        const searchInput = document.getElementById('search-input');
        const categoryButtonsContainer = document.getElementById('category-buttons');
        const categoryTitleElement = document.getElementById('category-title');

        // 初始化事件监听
        function initEventListeners() {
            // 重试按钮点击事件
            retryButton.addEventListener('click', () => {
                if (currentCategory) {
                    loadSoftwareData(currentCategory);
                }
            });

            // 搜索输入事件
            searchInput.addEventListener('input', () => {
                filterSoftwareList(searchInput.value.trim());
            });
        }

        // 渲染分类按钮
        function renderCategoryButtons() {
            categoryButtonsContainer.innerHTML = '';
            
            Object.keys(apiEndpoints).forEach(categoryKey => {
                const category = apiEndpoints[categoryKey];
                
                const button = document.createElement('div');
                button.className = 'bg-white rounded-lg shadow-md p-4 flex items-center justify-center cursor-pointer hover:bg-indigo-50 transition-colors category-btn';
                button.dataset.category = categoryKey;
                
                button.innerHTML = `
                    <i class="fas ${category.icon} text-indigo-500 text-2xl mr-3"></i>
                    <span class="font-medium">${category.name}</span>
                `;
                
                button.addEventListener('click', () => {
                    // 移除所有active类
                    document.querySelectorAll('.category-btn').forEach(btn => {
                        btn.classList.remove('active');
                    });
                    // 添加active类到当前按钮
                    button.classList.add('active');
                    
                    loadSoftwareData(categoryKey);
                });
                
                categoryButtonsContainer.appendChild(button);
            });

            // 默认选中第一个分类
            const firstCategory = Object.keys(apiEndpoints)[0];
            if (firstCategory) {
                const firstButton = document.querySelector(`.category-btn[data-category="${firstCategory}"]`);
                if (firstButton) {
                    firstButton.classList.add('active');
                    loadSoftwareData(firstCategory);
                }
            }
        }

        // 加载软件数据
        async function loadSoftwareData(category) {
            currentCategory = category;
            showLoading();
            hideError();
            clearSoftwareList();
            
            categoryTitleElement.textContent = `${apiEndpoints[category].name}列表`;

            try {
                const data = await fetchSoftwareData(apiEndpoints[category].url, category);
                allSoftwareData = data;
                renderSoftwareList(allSoftwareData);
                hideLoading();
            } catch (error) {
                showError(error.message);
                hideLoading();
            }
        }

        // 从API获取软件数据
        async function fetchSoftwareData(url, category) {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`网络响应错误: ${response.status}`);
                }
                const html = await response.text();
                return parseSoftwareData(html, category);
            } catch (error) {
                throw new Error(`获取数据失败: ${error.message}`);
            }
        }

        // 解析HTML数据为结构化JSON
        function parseSoftwareData(html, category) {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            // 匹配.exe、.msu、.rar和.zip文件
            const links = doc.querySelectorAll('a[href*=".exe"], a[href*=".msu"], a[href*=".rar"], a[href*=".zip"]');
            
            return Array.from(links).map(link => {
                const parentText = link.parentNode.textContent.trim();
                const parts = parentText.split(/\s+/).filter(part => part.trim());
                
                // 提取日期、大小和文件名
                const dateStr = `$${parts[1]}`;
                const size = parts[2];
                const name = link.textContent;
                const url = new URL(link.getAttribute('href'), 'https://pan.hakspay.cn').href;
                const isMsu = link.getAttribute('href').includes('.msu');
                const isRar = link.getAttribute('href').includes('.rar');
                const isZip = link.getAttribute('href').includes('.zip');
                
                // 从文件名中提取版本号
                const versionMatch = name.match(/V?(\d+\.\d+\.\d+\.\d+)/);
                const version = versionMatch ? versionMatch[1] : '未知版本';
                
                return {
                    name,
                    url,
                    size: formatFileSize(size),
                    date: formatDate(dateStr),
                    category: category || getCategoryFromUrl(url),
                    fileType: isMsu ? 'msu' : isRar ? 'rar' : isZip ? 'zip' : 'exe'
                };
            });
        }

        // 从URL获取分类
        function getCategoryFromUrl(url) {
            if (url.includes('/pda')) return 'pda';
            if (url.includes('/server')) return 'server';
            if (url.includes('/eServer')) return 'eServer';
            if (url.includes('/sreen')) return 'screen';
            if (url.includes('/tools')) return 'tools';
            return 'other';
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (typeof bytes === 'string') {
                if (bytes.includes('MB') || bytes.includes('KB')) return bytes;
                bytes = parseInt(bytes, 10);
            }
            
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            if (bytes == 0) return '0 Byte';
            const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
        }

        // 格式化日期
        function formatDate(dateStr) {
            const [datePart, timePart] = dateStr.split(' ');
            const [year, month, day] = datePart.split('/');
            return `${year}年${month}月${day}日 `;
        }

        // 渲染软件列表
        function renderSoftwareList(softwareList) {
            clearSoftwareList();
            
            if (softwareList.length === 0) {
                softwareListElement.innerHTML = `
                    <div class="p-8 text-center text-gray-500">
                        <i class="fas fa-box-open text-3xl mb-2"></i>
                        <p>没有找到软件</p>
                    </div>
                `;
                return;
            }

            softwareList.forEach(software => {
                const softwareElement = document.createElement('div');
                softwareElement.className = 'p-4 hover:bg-gray-50 transition-colors fade-in';
                
                // 根据文件类型选择不同的图标和文本
                let fileIcon, fileTypeText;
                if (software.fileType === 'msu') {
                    fileIcon = 'fa-cogs';
                    fileTypeText = '系统更新';
                } else if (software.fileType === 'rar') {
                    fileIcon = 'fa-file-archive';
                    fileTypeText = '压缩包(RAR)';
                } else if (software.fileType === 'zip') {
                    fileIcon = 'fa-file-archive';
                    fileTypeText = '压缩包(ZIP)';
                } else {
                    fileIcon = 'fa-file-download';
                    fileTypeText = '应用程序';
                }
                
                softwareElement.innerHTML = `
                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                        <div class="mb-2 md:mb-0">
                            <h3 class="font-medium text-gray-800">${software.name}</h3>
                            <div class="flex flex-wrap items-center mt-1 text-sm text-gray-500 gap-2">
                                <span class="flex items-center"><i class="fas fa-database mr-1"></i> ${software.size}</span>
                                <span class="flex items-center"><i class="fas fa-calendar-alt mr-1"></i> ${software.date}</span>
                                <!--span class="flex items-center"><i class="fas fa-code-branch mr-1"></i> ${software.version}</span-->
                                <span class="flex items-center"><i class="fas ${fileIcon} mr-1"></i> ${fileTypeText}</span>
                            </div>
                        </div>
                        <div class="flex items-center mt-2 md:mt-0">
                            <span class="px-2 py-1 text-xs rounded-full ${getCategoryColor(software.category)} mr-3">
                                ${getCategoryName(software.category)}
                            </span>
                            <a href="${software.url}" class="px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors flex items-center" download>
                                <i class="fas fa-download mr-2"></i> 下载
                            </a>
                        </div>
                    </div>
                `;
                softwareListElement.appendChild(softwareElement);
            });
        }

        // 获取分类颜色
        function getCategoryColor(category) {
            const color = apiEndpoints[category]?.color || 'gray';
            return `bg-${color}-100 text-${color}-800`;
        }

        // 获取分类名称
        function getCategoryName(category) {
            return apiEndpoints[category]?.name || '其他';
        }

        // 过滤软件列表
        function filterSoftwareList(searchTerm) {
            if (!searchTerm) {
                renderSoftwareList(allSoftwareData);
                return;
            }

            const filteredList = allSoftwareData.filter(software => 
                software.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                software.version.toLowerCase().includes(searchTerm.toLowerCase())
            );
            renderSoftwareList(filteredList);
        }

        // 显示/隐藏加载状态和错误信息
        function showLoading() {
            loadingElement.classList.remove('hidden');
            softwareListElement.classList.add('hidden');
        }
        function hideLoading() {
            loadingElement.classList.add('hidden');
            softwareListElement.classList.remove('hidden');
        }
        function showError(message) {
            errorDetailElement.textContent = message;
            errorElement.classList.remove('hidden');
            softwareListElement.classList.add('hidden');
        }
        function hideError() {
            errorElement.classList.add('hidden');
            softwareListElement.classList.remove('hidden');
        }
        function clearSoftwareList() {
            softwareListElement.innerHTML = '';
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            // 初始状态显示加载中
            showLoading();
            
            // 初始化其他组件
            renderCategoryButtons();
            initEventListeners();
        });
    </script>
</body>
</html>