// ==UserScript==
// @name         福利云xwteam金价信息美化显示
// @namespace    http://tampermonkey.net/
// @version      1.3a
// @description  大字号紧凑型移动适配方案
// @author       Dr.S
// @match        https://free.xwteam.cn/api/gold/trade
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        :root {
            --primary-color: #2d3436;
            --buy-color: #e74c3c;
            --sell-color: #27ae60;
            --gap: 16px;
        }
        body {
            margin: 0;
            background: #fff;

        }
        .container {
            padding: 12px;
            max-width: 100%;
        }
        .header-bar {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 12px;
            margin-bottom: var(--gap);
            text-align: center;
        }
        .update-time {
            font-size: 15px;
            color: #666;
        }
        .commodity-card {
            background: white;
            border-radius: 16px;
            margin-bottom: var(--gap);
            padding: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }
        .commodity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .commodity-name {
            font-size: 40px ;
            font-weight: 600;
            color: var(--primary-color);
            flex: 1;
        }
        .commodity-symbol {
            font-size: 36px;
            color: #666;
            background: #f1f3f5;
            padding: 4px 12px;
            border-radius: 20px;
            margin-left: 10px;
        }
        .price-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 8px;
        }
        .price-item {
            padding: 12px;
            border: 1px solid #eee;
            border-radius: 12px;
        }
        .price-label {
            font-size: 15px;
            color: #666;
            margin-bottom: 6px;
        }
        .price-value {
            font-size: 22px;
            font-weight: 700;
            font-family: 'Roboto Mono', monospace;
            line-height: 1.2;
        }
        .buy .price-value { color: var(--buy-color); }
        .sell .price-value { color: var(--sell-color); }
        .price-range {
            display: flex;
            justify-content: space-between;
            padding: 10px 12px;
            background: #f8f9fa;
            border-radius: 8px;
            font-size: 28px;
            color: #666;
        }
        .section-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
            margin: 20px 0 14px;
            padding-left: 4px;
            color: #0089ff;
        }

        /* 适配截图布局 */
        .price-value {
            font-size: 24px !important;  // 对应图中大字体
        }

        .price-grid {
            gap: 8px;  // 紧凑间距
        }
    `);

function init() {
    GM_xmlhttpRequest({
        method: "GET",
        url: window.location.href,
        onload: function(response) {
            try {
                const data = JSON.parse(response.responseText.replace('x1.00', ''));
                renderMobileView(data.data);
            } catch (e) {
                // 输出错误信息和原始响应内容
                document.body.innerHTML = `
                    <div class="container">
                        <h3>数据解析失败</h3>
                        <p><strong>错误信息:</strong> ${e.message}</p>
                        <pre><strong>原始响应:</strong>\n${response.responseText}</pre>
                    </div>
                `;
            }
        }
    });
}

    function renderMobileView(data) {
        const container = document.createElement('div');
        container.className = 'container';

        container.innerHTML = `
            <div class="header-bar">
                <div class="update-time">🕒 数据更新: ${data.UpTime}</div>
            </div>
            ${createSection('基础金属', data.LF)}
            ${createSection('上海黄金', data.SH)}
            ${createSection('国际行情', data.GJ)}
        `;

        document.body.innerHTML = '';
        document.body.appendChild(container);
    }

    function createSection(title, items) {
        return `
            <div>
                <h2 class="section-title">${title}</h2>
                ${items.map(item => `
                    <div class="commodity-card">
                        <div class="commodity-header">
                            <div class="commodity-name">${item.Name}</div>
                            <div class="commodity-symbol">${item.Symbol}</div>
                        </div>
                        <div class="price-grid">
                            <div class="price-item buy">
                                <div class="price-label">买入价</div>
                                <div class="price-value">${formatPrice(item.BP)}</div>
                            </div>
                            <div class="price-item sell">
                                <div class="price-label">卖出价</div>
                                <div class="price-value">${formatPrice(item.SP)}</div>
                            </div>
                        </div>
                        <div class="price-range">
                            <span>最高 ${formatPrice(item.High)}</span>
                            <span>最低 ${formatPrice(item.Low)}</span>
                        </div>
                    </div>
                `).join('')}
            </div>
        `;
    }

    function formatPrice(num) {
        if (!num && num !== 0) return '-';
        return num.toLocaleString('en', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    init();
})();