// ==UserScript==
// @name         福利云xwteam金价信息美化显示
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  美化https://free.xwteam.cn/api/gold/trade页面的JSON数据显示
// @author       Dr.S
// @match        https://free.xwteam.cn/api/gold/trade
// @grant        MIT
// ==/UserScript==

(function() {
    'use strict';

    // 创建一个样式用于优化显示
    const style = document.createElement('style');
    style.innerHTML = `
        body { font-family: "Helvetica Neue", Arial, sans-serif; background-color: #f7f7f7; padding: 15px; color: #333; }
        .container { max-width: 800px; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 20px; }
        h1, h2 { color: #0066cc; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        th, td { border: 1px solid #ddd; padding: 12px 8px; text-align: left; }
        th { background-color: #0066cc; color: white; }
        tr:nth-child(even) { background-color: #f2f2f2; }
        tr:hover { background-color: #ddd; }
        @media (max-width: 600px) {
            th, td { display: block; width: 100%; text-align: right; }
            td:before { content: attr(data-label); float: left; font-weight: bold; }
        }
    `;
    document.head.appendChild(style);

    // 获取原始JSON数据并替换页面内容
    fetch('https://free.xwteam.cn/api/gold/trade')
        .then(response => response.json())
        .then(data => {
            let htmlContent = '<div class="container">';
            htmlContent += '<h1>黄金价格信息</h1>';

            ['LF', 'SH', 'GJ'].forEach(category => {
                htmlContent += `<h2>${category === 'LF' ? '本地金融' : category === 'SH' ? '上海交易所' : '国际金融'}</h2>`;
                htmlContent += '<table>';
                htmlContent += '<tr><th data-label="名称">名称</th><th data-label="买入价">买入价</th><th data-label="卖出价">卖出价</th><th data-label="最高价">最高价</th><th data-label="最低价">最低价</th></tr>';
                data.data[category].forEach(item => {
                    htmlContent += `<tr><td data-label="名称">${item.Name}</td><td data-label="买入价">${item.BP}</td><td data-label="卖出价">${item.SP}</td><td data-label="最高价">${item.High}</td><td data-label="最低价">${item.Low}</td></tr>`;
                });
                htmlContent += '</table>';
            });

            htmlContent += '</div>';
            document.body.innerHTML = htmlContent;
        })
        .catch(error => console.error('Error fetching data:', error));
})();