<?php
/**
 * 转账模块
 */
?>
<style>
    .transfer-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--card-color);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        z-index: 100;
        overflow: hidden;
        animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    .transfer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .transfer-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
    }
    
    .transfer-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--background-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 20px;
        color: var(--text-secondary-color);
    }
    
    .transfer-content {
        padding: 24px;
    }
    
    .transfer-avatar-section {
        display: flex;
        align-items: center;
        margin-bottom: 32px;
    }
    
    .transfer-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28px;
        margin-right: 16px;
    }
    
    .transfer-info {
        flex: 1;
    }
    
    .transfer-name {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 4px;
    }
    
    .transfer-tip {
        font-size: 12px;
        color: var(--text-secondary-color);
    }
    
    .transfer-amount-container {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .transfer-amount-label {
        font-size: 14px;
        color: var(--text-secondary-color);
        margin-bottom: 8px;
    }
    
    .transfer-amount-input {
        width: 200px;
        height: 60px;
        text-align: center;
        font-size: 36px;
        font-weight: 600;
        color: var(--text-color);
        border: none;
        outline: none;
        background: transparent;
    }
    
    .transfer-amount-input::placeholder {
        color: #ddd;
    }
    
    .transfer-amount-unit {
        font-size: 24px;
        color: var(--text-color);
        font-weight: 500;
    }
    
    .transfer-note-container {
        margin-bottom: 24px;
    }
    
    .transfer-note-label {
        font-size: 14px;
        color: var(--text-secondary-color);
        margin-bottom: 8px;
    }
    
    .transfer-note-input {
        width: 100%;
        height: 44px;
        padding: 0 16px;
        background: var(--background-color);
        border: none;
        border-radius: 8px;
        font-size: 15px;
        outline: none;
    }
    
    .transfer-warning {
        padding: 12px 16px;
        background: #fff3e0;
        border-radius: 8px;
        margin-bottom: 24px;
    }
    
    .transfer-warning-icon {
        color: #ff9800;
        margin-right: 8px;
    }
    
    .transfer-warning-text {
        font-size: 12px;
        color: #e65100;
        line-height: 1.5;
    }
    
    .transfer-action-btn {
        width: 100%;
        height: 48px;
        background: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    
    .transfer-action-btn:hover {
        opacity: 0.9;
    }
    
    .transfer-action-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
    }
</style>

<script>
    /**
     * 显示转账面板
     */
    function showTransferPanel() {
        closeActionPanel();
        
        const overlay = document.createElement('div');
        overlay.className = 'panel-overlay show';
        overlay.id = 'transferOverlay';
        overlay.onclick = closeTransferPanel;
        document.body.appendChild(overlay);
        
        const panel = document.createElement('div');
        panel.className = 'transfer-panel';
        panel.id = 'transferPanel';
        
        const avatar = document.getElementById('partnerAvatar')?.src || '';
        const name = document.getElementById('partnerName')?.textContent || partnerName;
        
        panel.innerHTML = `
            <div class="transfer-header">
                <span class="transfer-title">转账</span>
                <div class="transfer-close" onclick="closeTransferPanel()">×</div>
            </div>
            <div class="transfer-content">
                <div class="transfer-avatar-section">
                    <div class="transfer-avatar">
                        ${avatar ? `<img src="${avatar}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;" />` : `<span class="iconify" data-icon="mdi:user"></span>`}
                    </div>
                    <div class="transfer-info">
                        <div class="transfer-name">${name}</div>
                        <div class="transfer-tip">向 ${name} 转账</div>
                    </div>
                </div>
                <div class="transfer-amount-container">
                    <div class="transfer-amount-label">金额</div>
                    <div style="display:flex;align-items:center;justify-content:center;">
                        <span style="font-size:24px;color:var(--text-color);">¥</span>
                        <input type="number" class="transfer-amount-input" id="transferAmount" placeholder="0.00" min="0.01" step="0.01">
                        <span class="transfer-amount-unit">元</span>
                    </div>
                </div>
                <div class="transfer-note-container">
                    <div class="transfer-note-label">转账说明（可选）</div>
                    <input type="text" class="transfer-note-input" id="transferNote" placeholder="添加转账说明">
                </div>
                <div class="transfer-warning">
                    <span class="transfer-warning-icon"><span class="iconify" data-icon="mdi:alert-circle"></span></span>
                    <span class="transfer-warning-text">转账给好友需要确认对方身份，避免转错账户</span>
                </div>
                <button class="transfer-action-btn" id="sendTransferBtn" onclick="sendTransfer()" disabled>
                    确认转账
                </button>
            </div>
        `;
        
        document.body.appendChild(panel);
        
        // 监听金额输入
        const amountInput = document.getElementById('transferAmount');
        amountInput.addEventListener('input', function() {
            const btn = document.getElementById('sendTransferBtn');
            btn.disabled = parseFloat(this.value) <= 0;
        });
        
        // 自动聚焦
        setTimeout(() => amountInput.focus(), 300);
        
        // 加载 iconify
        loadIconify();
    }
    
    /**
     * 发送转账
     */
    function sendTransfer() {
        const amount = parseFloat(document.getElementById('transferAmount').value);
        const note = document.getElementById('transferNote').value || '';
        
        if (amount <= 0) {
            showToast('请输入有效金额');
            return;
        }
        
        closeTransferPanel();
        
        fetch('<?php echo $this->url('mobileApi/sendMessage'); ?>', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                user_id: partnerId,
                content: `<div class="transfer-message">
                    <div class="transfer-amount">¥${amount.toFixed(2)}</div>
                    ${note ? `<div class="transfer-note">${note}</div>` : ''}
                    <div class="transfer-label">转账</div>
                </div>`
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.code === 0) {
                const container = document.getElementById('messagesContainer');
                const item = document.createElement('div');
                item.className = 'message-item me';
                item.innerHTML = `
                    <div class="message-content">
                        <div class="message-bubble" style="background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);padding:16px;color:#fff;border-radius:18px 4px 18px 18px;">
                            <div style="font-size:28px;font-weight:600;margin-bottom:4px;">¥${amount.toFixed(2)}</div>
                            ${note ? `<div style="font-size:12px;opacity:0.9;margin-bottom:4px;">${note}</div>` : ''}
                            <div style="font-size:12px;opacity:0.9;">转账</div>
                        </div>
                        <div class="message-time">刚刚</div>
                    </div>
                `;
                container.appendChild(item);
                scrollToBottom();
                showToast('转账消息已发送');
            } else {
                showToast(data.message || '发送失败');
            }
        })
        .catch(() => {
            showToast('发送失败');
        });
    }
    
    /**
     * 关闭转账面板
     */
    function closeTransferPanel() {
        const overlay = document.getElementById('transferOverlay');
        const panel = document.getElementById('transferPanel');
        
        if (panel) {
            panel.style.transform = 'translateY(100%)';
            panel.style.transition = 'transform 0.3s';
            setTimeout(() => panel.remove(), 300);
        }
        
        if (overlay) {
            overlay.classList.remove('show');
            setTimeout(() => overlay.remove(), 300);
        }
    }
    
    function loadIconify() {
        if (!window.iconifyLoaded) {
            const script = document.createElement('script');
            script.src = 'https://code.iconify.design/1/1.0.7/iconify.min.js';
            document.head.appendChild(script);
            window.iconifyLoaded = true;
        }
    }
</script>