{include file="app/manage/view/index/emlog_nav"}

<div class="zc-user-list">
    <!-- 页头 -->
    <div class="zc-user-list__head">
        <div>
            <h1 class="zc-user-list__title"><i class="fas fa-users"></i> 用户管理</h1>
            <p class="zc-user-list__sub">共 <?php echo isset($page['total']) ? intval($page['total']) : (isset($page['list']) ? count($page['list']) : 0); ?> 位用户</p>
        </div>
        <a href="index.php?r=manage/user/adduser" class="zc-btn zc-btn-primary">
            <i class="fas fa-user-plus"></i> 添加用户
        </a>
    </div>

    <!-- 卡片 -->
    <div class="zc-card">
        <table class="zc-table">
            <thead>
                <tr>
                    <th>用户</th>
                    <th>手机号</th>
                    <th>身份</th>
                    <th>注册时间</th>
                    <th>状态</th>
                    <th class="zc-ta-right">操作</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($page['list'])) { foreach ($page['list'] as $row) { ?>
                <tr>
                    <td>
                        <div class="zc-user-cell">
                            <span class="zc-ava"><?php echo mb_substr($row['username'], 0, 1); ?></span>
                            <span class="zc-uname"><?php echo htmlspecialchars($row['username']); ?></span>
                        </div>
                    </td>
                    <td><?php echo !empty($row['mobile']) ? htmlspecialchars($row['mobile']) : '未绑定'; ?></td>
                    <td>
                        <?php if ($row['vest'] == 2): ?>
                        <span class="zc-badge zc-badge--vip">会员用户</span>
                        <?php else: ?>
                        <span class="zc-badge zc-badge--normal">普通用户</span>
                        <?php endif; ?>
                    </td>
                    <td class="zc-muted"><?php echo $row['date']; ?></td>
                    <td>
                        <?php if ($row['lock'] == 0): ?>
                        <span class="zc-badge zc-badge--ok">正常</span>
                        <?php else: ?>
                        <span class="zc-badge zc-badge--frozen">已冻结</span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <div class="zc-actions">
                            <a href="index.php?r=manage/user/editoruser&id=<?php echo $row['id']; ?>" class="zc-btn-sm zc-btn-soft">编辑</a>
                            <?php if ($row['lock'] == 0): ?>
                            <button class="zc-btn-sm zc-btn-warn" onclick="lockUser(<?php echo $row['id']; ?>, 1)">冻结</button>
                            <?php else: ?>
                            <button class="zc-btn-sm zc-btn-ok" onclick="lockUser(<?php echo $row['id']; ?>, 0)">解冻</button>
                            <?php endif; ?>
                            <button class="zc-btn-sm zc-btn-danger" onclick="deleteUser(<?php echo $row['id']; ?>)">删除</button>
                        </div>
                    </td>
                </tr>
                <?php } } else { ?>
                <tr>
                    <td colspan="6" class="zc-empty">
                        <i class="fas fa-users"></i>
                        <p>暂无用户数据</p>
                    </td>
                </tr>
                <?php } ?>
            </tbody>
        </table>

        <div class="zc-pager">
            <?php echo $page['page']; ?>
        </div>
    </div>
</div>

<style>
.zc-user-list {
    max-width: 1080px;
    margin: 30px auto;
    padding: 0 24px;
}
.zc-user-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.zc-user-list__title {
    font-size: 22px;
    font-weight: 700;
    color: #2e3650;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.zc-user-list__title .fas {
    color: #1cc88a;
    font-size: 24px;
}
.zc-user-list__sub {
    font-size: 13px;
    color: #9aa0ac;
    margin: 6px 0 0;
}

.zc-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(30, 40, 70, 0.08);
    padding: 8px 24px 24px;
    overflow: hidden;
}

.zc-table {
    width: 100%;
    border-collapse: collapse;
}
.zc-table th {
    text-align: left;
    font-size: 13px;
    color: #9aa0ac;
    font-weight: 600;
    padding: 16px;
    border-bottom: 1px solid #eef0f5;
    white-space: nowrap;
}
.zc-table td {
    padding: 16px;
    border-bottom: 1px solid #f4f5f8;
    font-size: 14px;
    color: #3a4055;
    vertical-align: middle;
}
.zc-table tbody tr:last-child td {
    border-bottom: none;
}
.zc-table tbody tr:hover {
    background: #fafbfd;
}
.zc-muted {
    color: #9aa0ac;
}

.zc-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.zc-ava {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1cc88a, #20c997);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.zc-uname {
    font-weight: 600;
    color: #2e3650;
}

.zc-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.zc-badge--vip { color: #b9701a; background: #fff3da; }
.zc-badge--normal { color: #5a6072; background: #eef0f5; }
.zc-badge--ok { color: #1cc88a; background: #e8faf2; }
.zc-badge--frozen { color: #e0524d; background: #fdecec; }

.zc-ta-right { text-align: right; }
.zc-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.zc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 26px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .15s;
    box-sizing: border-box;
}
.zc-btn .fas { font-size: 16px; }
.zc-btn-primary {
    background: linear-gradient(135deg, #1cc88a, #20c997);
    color: #fff;
    box-shadow: 0 10px 20px rgba(28, 200, 138, 0.3);
}
.zc-btn-primary:hover { filter: brightness(1.05); }

.zc-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .15s;
    box-sizing: border-box;
    white-space: nowrap;
}
.zc-btn-soft { background: #e8faf2; color: #1cc88a; }
.zc-btn-soft:hover { background: #d6f5ea; }
.zc-btn-warn { background: #fff4e0; color: #d9891a; }
.zc-btn-warn:hover { background: #ffecbf; }
.zc-btn-ok { background: #e8faf2; color: #1cc88a; }
.zc-btn-ok:hover { background: #d6f5ea; }
.zc-btn-danger { background: #fdecec; color: #e0524d; }
.zc-btn-danger:hover { background: #fbd9d9; }

.zc-empty {
    text-align: center;
    padding: 60px 0 !important;
    color: #b4b8c0;
}
.zc-empty .fas { font-size: 40px; display: block; margin-bottom: 10px; }
.zc-empty p { margin: 0; font-size: 14px; }

.zc-pager {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
}
</style>

<script>
function showToast(message, type = 'success') {
    var toast = document.createElement('div');
    toast.className = 'toast align-items-center text-white bg-' + type + ' border-0 position-fixed show';
    toast.setAttribute('role', 'alert');
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 250px; opacity: 1; transition: opacity .3s ease;';
    toast.innerHTML = '<div class="d-flex"><div class="toast-body"><i class="fas fa-' + (type === 'success' ? 'check-circle' : 'exclamation-circle') + ' mr-2"></i>' + message + '</div><button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="this.parentElement.parentElement.remove()"></button></div>';
    document.body.appendChild(toast);
    setTimeout(function () {
        toast.style.opacity = '0';
        setTimeout(function () { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 350);
    }, 3000);
}

function lockUser(id, lock) {
    var actionText = lock == 1 ? '冻结' : '解冻';
    if (confirm('确定要' + actionText + '该用户吗？')) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'index.php?r=manage/user/lockuser&id=' + id + '&lock=' + lock, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                try {
                    var result = JSON.parse(xhr.responseText);
                    showToast(result.info || (result.status === 'y' ? actionText + '成功' : actionText + '失败'), result.status === 'y' ? 'success' : 'danger');
                    if (result.status === 'y') location.reload();
                } catch (e) {
                    showToast(actionText + '失败', 'danger');
                }
            }
        };
        xhr.send();
    }
}

function deleteUser(id) {
    if (confirm('确定要删除该用户吗？此操作不可恢复。')) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'index.php?r=manage/user/deleteuser&id=' + id, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                try {
                    var result = JSON.parse(xhr.responseText);
                    showToast(result.info || (result.status === 'y' ? '删除成功' : '删除失败'), result.status === 'y' ? 'success' : 'danger');
                    if (result.status === 'y') location.reload();
                } catch (e) {
                    showToast('删除失败', 'danger');
                }
            }
        };
        xhr.send();
    }
}
</script>

{include file="app/manage/view/index/emlog_footer"}