<?php
$title='收支明细';
include __DIR__ . '/head.php';
?>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
        <h3 class="font-medium text-gray-800 flex items-center">
            <i class="fas fa-list-alt text-indigo-500 mr-1.5"></i>
            交易记录
        </h3>
    </div>
    <div class="p-4">
        <div class="space-y-2" id="list">
            <div class="flex items-center justify-center py-8">
                <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-indigo-500"></div>
            </div>
        </div>
    </div>
    <div class="px-4 pb-4 flex items-center justify-between border-t border-gray-100 pt-4">
        <div class="text-sm text-gray-500">
            共 <span id="total" class="font-medium text-indigo-600">0</span> 条记录
        </div>
        <div class="flex items-center gap-2">
            <span class="text-sm text-gray-500">页码：</span>
            <select id="page" class="px-3 py-1.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                <option value="1">1</option>
            </select>
        </div>
    </div>
</div>

<div class="text-center mt-4">
    <a href="javascript:history.back(-1)" class="text-sm text-gray-500 hover:text-gray-700 transition-colors">
        <i class="fas fa-arrow-left mr-1"></i>返回上一层
    </a>
</div>

<div id="appModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md max-h-[85vh] flex flex-col min-w-0">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100 bg-gray-50/50 rounded-t-2xl">
                <h3 id="modalTitle" class="text-lg font-semibold text-gray-800"></h3>
                <button onclick="closeModal()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 text-gray-400 hover:text-gray-600 transition-colors"><i class="fas fa-times"></i></button>
            </div>
            <div id="modalBody" class="px-5 py-4 overflow-y-auto overflow-x-hidden min-w-0" style="word-break:break-word;overflow-wrap:break-word;"></div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    var pagesize = 30, page = 1;
    get_list(page, pagesize);
    $('#page').change(function(){
        get_list($('#page').val(), pagesize);
    });
});

function openModal(title, content) {
    document.getElementById('modalTitle').textContent = title;
    document.getElementById('modalBody').innerHTML = content;
    document.getElementById('appModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    document.getElementById('appModal').classList.add('hidden');
    document.body.style.overflow = '';
}

function showDetail(type, bz, rmb, afterRmb, addtime) {
    var isNeg = parseFloat(rmb) < 0;
    var color = isNeg ? 'text-red-600' : 'text-green-600';
    var amount = isNeg ? rmb : '+' + rmb;
    var wrap = 'word-break:break-word;overflow-wrap:break-word;';
    var html = '<div class="space-y-3 min-w-0" style="' + wrap + '">';
    html += '<div class="bg-gray-50 rounded-lg p-3"><div class="text-xs text-gray-500 mb-1">交易类型</div><div class="font-medium text-gray-800">' + type + '</div></div>';
    html += '<div class="bg-gray-50 rounded-lg p-3"><div class="text-xs text-gray-500 mb-1">交易说明</div><div class="text-gray-700" style="white-space:pre-wrap;' + wrap + '">' + bz + '</div></div>';
    html += '<div class="grid grid-cols-2 gap-3"><div class="bg-gray-50 rounded-lg p-3 min-w-0"><div class="text-xs text-gray-500 mb-1">交易金额</div><div class="font-bold text-lg ' + color + '">' + amount + '</div></div>';
    html += '<div class="bg-gray-50 rounded-lg p-3 min-w-0"><div class="text-xs text-gray-500 mb-1">剩余余额</div><div class="font-bold text-lg text-gray-800">' + afterRmb + '</div></div></div>';
    html += '<div class="bg-gray-50 rounded-lg p-3"><div class="text-xs text-gray-500 mb-1">交易时间</div><div class="text-gray-700">' + addtime + '</div></div>';
    html += '</div>';
    openModal('交易详情', html);
}

function get_list(page, pagesize){
    showLoading();
    $.ajax({
        type: 'POST',
        data: {pagesize:pagesize, page:page},
        url: 'ajax.php?act=get_record',
        dataType: 'json',
        success: function(data) {
            hideLoading();
            renderList(data.data);
            $('#total').html(data.total);
            if(data.end >= 1){
                $('#page').html('');
                var end = data.end, cur = data.page;
                var start = cur - 10 > 1 ? cur - 10 : 1;
                var endPage = cur + 10 < end ? cur + 10 : end;
                for(var i = start; i <= cur; i++){
                    $('#page').append('<option value="'+ i +'">' + i + '</option>');
                }
                for(var i = cur + 1; i <= endPage; i++){
                    $('#page').append('<option value="'+ i +'">' + i + '</option>');
                }
                $('#page').val(cur);
            }
        },
        error: function(){ hideLoading(); showToast('服务器错误'); }
    });
}

function renderList(data){
    $("#list").empty();
    if(data.length === 0){
        $("#list").html('<div class="text-center py-8 text-gray-400"><i class="fas fa-file-invoice-dollar text-3xl mb-2"></i><p class="text-sm">暂无交易记录</p></div>');
        return;
    }
    $.each(data, function(i, v){
        var rmb = parseFloat(v.rmb) || 0;
        var isNeg = rmb < 0;
        var color = isNeg ? 'text-red-600' : 'text-green-600';
        var bg = isNeg ? 'bg-red-50' : 'bg-green-50';
        var amount = isNeg ? rmb : '+' + rmb;
        var tmp = '<div class="rounded-lg p-3 ' + bg + ' border border-gray-100 cursor-pointer hover:shadow-sm transition-shadow record-item" data-type="' + encodeURIComponent(v.type) + '" data-bz="' + encodeURIComponent(v.bz) + '" data-rmb="' + v.rmb + '" data-after="' + v.after_rmb + '" data-time="' + v.addtime + '">' +
            '<div class="flex justify-between items-start">' +
            '<div class="flex-1 min-w-0 mr-3">' +
            '<div class="font-medium text-gray-800 text-sm">' + v.type + '</div>' +
            '<div class="text-xs text-gray-600 mt-1 truncate">' + v.bz + '</div>' +
            '<div class="text-xs text-gray-400 mt-1">' + v.addtime + '</div></div>' +
            '<div class="text-right flex-shrink-0">' +
            '<div class="font-bold ' + color + '">' + amount + '</div>' +
            '<div class="text-xs text-gray-500 mt-1">余额: ' + v.after_rmb + '</div></div></div></div>';
        $("#list").append(tmp);
    });
    $('.record-item').off('click').on('click', function(){
        var type = decodeURIComponent($(this).data('type'));
        var bz = decodeURIComponent($(this).data('bz'));
        var rmb = $(this).data('rmb');
        var afterRmb = $(this).data('after');
        var addtime = $(this).data('time');
        showDetail(type, bz, rmb, afterRmb, addtime);
    });
}
</script>
