<?php
$title='用户列表';
include __DIR__ . '/head.php';
if($userrow['vip'] <= 1)exit("<script language='javascript'>alert('无权限访问');window.location.href='./set.php';</script>");
?>
<div class="py-8">
    <!-- 主容器 -->
    <div class="max-w-4xl mx-auto">
        <!-- 用户列表卡片 -->
        <div class="bg-white rounded-2xl shadow-2xl p-6 hover:shadow-2xl/80 transition-shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-6">用户列表</h2>
            
            <!-- 用户列表 -->
            <div class="bg-gray-50 rounded-xl p-4 mb-6 overflow-x-auto">
                <div class="min-w-[600px]">
                    <!-- 表格头 -->
                    <div class="grid grid-cols-4 gap-4 items-center mb-3 pb-2 border-b border-gray-200">
                        <div class="font-semibold text-gray-700">ID</div>
                        <div class="font-semibold text-gray-700">用户名</div>
                        <div class="font-semibold text-gray-700">QQ</div>
                        <div class="font-semibold text-gray-700">等级</div>
                    </div>
                    <div class="space-y-3" id="list">
                        <!-- 用户将通过 JavaScript 动态添加 -->
                    </div>
                </div>
            </div>
            
            <!-- 分页控件 -->
            <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100">
                <div class="text-sm text-gray-500">
                    共有 <span id="total" class="font-medium text-indigo-600"></span> 条用户记录
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-sm text-gray-500">页码：</span>
                    <select id="page" class="px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all">
                        <option value="1">1</option>
                    </select>
                </div>
            </div>
            
            <!-- 底部链接 -->
            <div class="mt-6 text-center text-sm text-gray-500">
                <a href="javascript:history.back(-1)" class="hover:text-indigo-600 transition-colors duration-300">
                    <i class="fas fa-arrow-left mr-1"></i>返回上一层
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 通用模态框 -->
<div id="appModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/50 transition-opacity" 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 relative transform transition-all">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <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-100 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"></div>
            <div id="modalFooter" class="px-5 py-3 border-t border-gray-100 hidden"></div>
        </div>
    </div>
</div>

<!-- Toast 提示 -->

<script src="../assets/js/jquery.min.js"></script>
<script type="text/javascript">
var pagesize = 30;
var page = 1;
var vipnum;
var currentZid = 0;

// 模态框相关函数
function openModal(title, content, footerCallback) {
    document.getElementById('modalTitle').textContent = title;
    document.getElementById('modalBody').innerHTML = content;
    
    const modalFooter = document.getElementById('modalFooter');
    if (footerCallback) {
        modalFooter.innerHTML = footerCallback();
        modalFooter.classList.remove('hidden');
    } else {
        modalFooter.classList.add('hidden');
    }
    
    document.getElementById('appModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

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

// Toast 提示函数
function showToast(message, type = 'info', duration = 2000) {
    const toastWrap = document.getElementById('toastWrap');
    const toast = document.createElement('div');
    
    let bgClass = 'bg-gray-800';
    if (type === 'success') bgClass = 'bg-green-600';
    if (type === 'error') bgClass = 'bg-red-600';
    if (type === 'warning') bgClass = 'bg-yellow-600';
    
    toast.className = `${bgClass} text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transform transition-all duration-300 ease-in-out opacity-0 translate-y-[-10px]`;
    toast.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'exclamation' : type === 'warning' ? 'exclamation-triangle' : 'info'}"></i><span>${message}</span>`;
    
    toastWrap.appendChild(toast);
    
    // 触发动画
    setTimeout(() => {
        toast.classList.remove('opacity-0', 'translate-y-[-10px]');
    }, 10);
    
    // 自动移除
    setTimeout(() => {
        toast.classList.add('opacity-0', 'translate-y-[-10px]');
        setTimeout(() => {
            toastWrap.removeChild(toast);
        }, 300);
    }, duration);
}

// Loading 遮罩函数
function showLoading() {
    document.getElementById('loadingOverlay').classList.remove('hidden');
}

function hideLoading() {
    document.getElementById('loadingOverlay').classList.add('hidden');
}

$(document).ready(function() {
    get_list(page, pagesize);
    $('#page').change(function() {
        page = $('#page').val();
        get_list(page, pagesize);
    });
});

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

function adddata(data) {
    $("#list").empty();
    if(data.length === 0){
        $("#list").html('<div class="text-center py-8 text-gray-500"><i class="fas fa-users text-3xl mb-2"></i><p>暂无用户记录</p></div>');
        return;
    }
    $.each(data, function(i, v) {
        var tmp = '<div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:shadow-md transition-shadow"><div class="grid grid-cols-4 gap-4 items-center"><div class="font-medium text-gray-800">' + v.zid + '</div><div class="font-medium text-indigo-600">' + v.user + '</div><div class="text-gray-700">' + v.qq + '</div><div><button onclick="setvip(' + v.zid + ',' + v.vip + ')" class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition-colors">' + v.vipname + '</button></div></div></div>';
        $("#list").append(tmp);
    });
}

function setvip(zid, vip) {
    currentZid = zid;
    var content = '<input type="number" id="vipInput" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="请输入1-' + vipnum + '"><div class="text-sm text-gray-500 mt-2">当前等级：' + vip + '</div>';
    openModal('设置用户等级', content, function() {
        return '<div class="flex gap-2"><button onclick="closeModal()" class="flex-1 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors">取消</button><button onclick="submitVipChange()" class="flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors">确定</button></div>';
    });
}

function submitVipChange() {
    var vip = document.getElementById('vipInput').value;
    if (!vip) {
        showToast('请输入等级', 'error');
        return;
    }
    closeModal();
    showLoading();
    $.post('ajax.php?act=setvip', {zid: currentZid, vip: vip}, function(d, textStatus, xhr) {
        hideLoading();
        showToast(d.msg, d.code == 1 ? 'success' : 'error');
        if(d.code == 1){
            get_list(page, pagesize);
        }
    }, 'json');
}
</script>