<?php
$title='收支明细';
include __DIR__ . '/head.php';
?>

<div class="p-4 md:p-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="p-4 md:p-6 border-b border-gray-200">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                <h2 class="text-base md:text-lg font-semibold text-gray-800">收支明细</h2>
                <div class="flex flex-wrap items-center gap-2 w-full md:w-auto">
                    <form onsubmit="searchOrder();return false;" class="flex flex-wrap items-center gap-2 w-full md:w-auto">
                        <input type="text" class="flex-1 min-w-[120px] px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" name="kw" placeholder="搜索用户ID、详情">
                        <select class="px-3 py-2 border border-gray-300 rounded-lg text-sm" name="type">
                            <option value="-1">全部</option>
                            <option value="消费">消费</option>
                            <option value="提成">提成</option>
                            <option value="退款">退款</option>
                            <option value="卡密">卡密</option>
                            <option value="转移">转移</option>
                            <option value="余额充值">余额充值</option>
                        </select>
                        <button type="submit" class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition text-sm whitespace-nowrap">
                            <i class="fas fa-search mr-1"></i>搜索
                        </button>
                    </form>
                    <button type="button" class="px-3 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition text-sm whitespace-nowrap" onclick="exportData()">
                        <i class="fas fa-download mr-1"></i>导出
                    </button>
                </div>
            </div>
        </div>
        
        <div class="p-3 md:p-6">
            <div class="overflow-x-auto">
                <table class="w-full min-w-[700px]">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">ID</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">用户ID</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">金额类型</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">类型</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">金额</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">变更前</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">变更后</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">详情</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">时间</th>
                        </tr>
                    </thead>
                    <tbody id="record-list" class="divide-y divide-gray-200">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<?php include 'foot.php'; ?>

<script>
var pagesize = 30;
var page = 1;

function get_record(page) {
    page = page || 1;
    var kw = $('input[name="kw"]').val();
    var type = $('select[name="type"]').val();
    
    // 显示加载状态
    showLoading();
    
    $.ajax({
        type: 'GET',
        url: 'ajax.php?act=get_record',
        data: {
            kw: kw,
            type: type,
            pagesize: pagesize,
            page: page
        },
        dataType: 'json',
        success: function(data) {
            // 隐藏加载状态
            hideLoading();
            
            if (data && data.data) {
                var html = '';
                $.each(data.data, function(index, row) {
                    // 直接使用数据库传递的rmb值，包括符号
                    var rmbValue = parseFloat(row.rmb) || 0;
                    
                    // 根据值的正负决定颜色和符号显示
                    var amountClass = rmbValue < 0 ? 'text-red-600' : 'text-green-600';
                    var amountText = rmbValue < 0 ? rmbValue : '+' + rmbValue;
                    
                    html += '<tr class="hover:bg-gray-50">';
                    html += '<td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">' + row.id + '</td>';
                    html += '<td class="px-4 py-3 text-sm font-medium text-gray-800 whitespace-nowrap">' + row.zid + '</td>';
                    html += '<td class="px-4 py-3 text-sm whitespace-nowrap">' + row.type2 + '</td>';
                    html += '<td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">' + row.type + '</td>';
                    html += '<td class="px-4 py-3 text-sm ' + amountClass + ' whitespace-nowrap">' + amountText + '</td>';
                    html += '<td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">' + row.before_rmb + '</td>';
                    html += '<td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">' + row.after_rmb + '</td>';
                    html += '<td class="px-4 py-3 text-sm text-gray-600" style="min-width:400px;word-break:break-word;overflow-wrap:break-word;white-space:normal;">' + row.bz + '</td>';
                    html += '<td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">' + row.addtime + '</td>';
                    html += '</tr>';
                });
                $('#record-list').html(html);
            }
        },
        error: function() {
            // 隐藏加载状态
            hideLoading();
            showToast('服务器错误', 'error');
        }
    });
}

function searchOrder() {
    get_record(1);
}

function exportData() {
    var kw = $('input[name="kw"]').val();
    var type = $('select[name="type"]').val();
    var query = 'kw=' + encodeURIComponent(kw) + '&type=' + type;
    window.location.href = 'ajax.php?act=export_record&' + query;
}

$(document).ready(function() {
    get_record(1);
});
</script>
