// 用户选择
const userItems = document.querySelectorAll('.user-item');
userItems.forEach(item => {
    item.addEventListener('click', function() {
        userItems.forEach(u => u.classList.remove('selected'));
        this.classList.add('selected');

        // 更新当前用户显示
        const userName = this.querySelector('.user-name').textContent;
        const userLogin = this.querySelector('.user-login').textContent;
        document.querySelector('.assignment-title span').textContent = `当前用户: ${userName} (${userLogin})`;

        // 这里应该加载该用户的角色分配数据
        loadUserRoles(userLogin);
    });
});

// 角色选择
const roleCheckboxes = document.querySelectorAll('.role-item input[type="checkbox"]');
roleCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const roleItem = this.closest('.role-item');
        const roleName = roleItem.querySelector('.role-name').textContent;

        if (this.checked) {
            addRoleToAssigned(roleName);
        } else {
            removeRoleFromAssigned(roleName);
        }

        // 更新权限预览
        updatePermissionPreview();
    });
});

// 移除角色
const removeRoleButtons = document.querySelectorAll('.remove-role');
removeRoleButtons.forEach(button => {
    button.addEventListener('click', function() {
        const roleTag = this.closest('.role-tag');
        const roleName = roleTag.textContent.trim();
        roleTag.remove();

        // 取消对应的复选框
        roleCheckboxes.forEach(checkbox => {
            const roleItem = checkbox.closest('.role-item');
            const itemRoleName = roleItem.querySelector('.role-name').textContent;
            if (itemRoleName === roleName) {
                checkbox.checked = false;
            }
        });

        // 更新权限预览
        updatePermissionPreview();
    });
});

/**
 * 关闭弹窗并刷新父页面
 */
function closeAndReloadParent() {
    // 先关闭所有iframe弹窗
    layer.closeAll('iframe');

    // 延迟一小段时间确保弹窗完全关闭后再刷新
    setTimeout(() => {
        // 刷新父页面
        parent.location.reload();
    }, 100);
}
// 保存分配
document.getElementById('save-assignments').addEventListener('click', function() {
    const id = $("#ids").val();
    const values = [];
    $('input[name="roleId"]').each(function() {
        if (this.checked) { // 检查复选框是否被选中
            values.push($(this).val()); // 获取选中复选框的值并添加到数组中
        }
    });
    $.ajax({
        url: '/upms/sysuserrole/allotRoles',
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify({
            userId: id,
            rolesId: values,
        }),
        timeout: 30000, // 30秒超时
        success: function (res) {
            layer.msg("保存成功", {icon: 2});
            setTimeout(() => {
                closeAndReloadParent();
            }, 2000);
        },
        error: function (xhr, status, error) {
            let errorMsg = '请求失败，请稍后重试';

            if (status === 'timeout') {
                errorMsg = '请求超时，请稍后重试';
            } else if (xhr.status === 403) {
                errorMsg = '权限不足，无法执行此操作';
            } else if (xhr.status === 500) {
                errorMsg = '服务器内部错误';
            }

            reject({
                success: false,
                message: errorMsg,
                originalError: error
            });
        }
    });
});

// 模拟加载用户角色数据
function loadUserRoles(userLogin) {
    // 在实际应用中，这里应该通过API获取用户的角色数据
    console.log(`加载用户 ${userLogin} 的角色数据`);

    // 模拟数据
    const userRoles = {
        'zhangsan': ['系统管理员', '内容管理员'],
        'lisi': ['普通用户'],
        'wangwu': ['财务管理员'],
        'zhaoliu': [],
        'qianqi': ['报表查看员']
    };

    // 清除当前分配的角色
    document.querySelectorAll('.role-tag').forEach(tag => tag.remove());

    // 更新角色复选框
    roleCheckboxes.forEach(checkbox => {
        checkbox.checked = false;
    });

    // 设置用户角色
    if (userRoles[userLogin]) {
        userRoles[userLogin].forEach(roleName => {
            addRoleToAssigned(roleName);

            // 选中对应的复选框
            roleCheckboxes.forEach(checkbox => {
                const roleItem = checkbox.closest('.role-item');
                const itemRoleName = roleItem.querySelector('.role-name').textContent;
                if (itemRoleName === roleName) {
                    checkbox.checked = true;
                }
            });
        });
    }

    // 更新权限预览
    updatePermissionPreview();
}



// 从已分配列表中移除角色
function removeRoleFromAssigned(roleName) {
    const assignedRoles = document.querySelector('.assigned-roles');
    const roleTags = assignedRoles.querySelectorAll('.role-tag');

    roleTags.forEach(tag => {
        if (tag.textContent.trim() === roleName) {
            tag.remove();
        }
    });
}

// 更新权限预览
function updatePermissionPreview() {
    // 在实际应用中，这里应该根据选择的角色计算权限
    console.log('更新权限预览');

    // 这里只是模拟，实际应该根据角色计算权限
    const permissionList = document.querySelector('.permission-list');
    permissionList.innerHTML = '';

    const permissions = [
        '用户管理', '角色管理', '系统配置', '内容审核',
        '数据导出', '日志查看', '报表查看', '数据备份'
    ];

    // 模拟根据角色数量决定显示哪些权限
    const assignedRolesCount = document.querySelectorAll('.role-tag').length;
    const showPermissions = permissions.slice(0, Math.min(assignedRolesCount * 2, permissions.length));

    showPermissions.forEach(permission => {
        const permissionItem = document.createElement('div');
        permissionItem.className = 'permission-item';
        permissionItem.innerHTML = `
                    <i class="fas fa-check-circle"></i>
                    ${permission}
                `;
        permissionList.appendChild(permissionItem);
    });

    if (showPermissions.length === 0) {
        permissionList.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-key"></i>
                        <p>暂无权限</p>
                        <p>请为用户分配角色以查看权限</p>
                    </div>
                `;
    }
}


/**
 *
 * @param  id - 用户id
 */
function queryAllotRoles() {
    const id = $("#ids").val();
    $.ajax({
        url: '/upms/sysuser/queryAllotRoles/'+id,
        type: 'GET',
        data: { id: id },
        success: function (res) {
            if (res.code === 200) {
                const items = res.data || [];
                // 渲染列表项
                let html = '';
                if (items.length > 0) {
                    items.forEach(function (item) {
                        const userName = item.userName;
                        const userNameSmall= userName.charAt(0);
                        const loginName = item.loginName;
                        let itemHtml = '';
                        itemHtml = `<div class="user-item selected">
                        <div class="user-avatar-small">${userNameSmall}</div>
                        <div class="user-details">
                            <div class="user-name">${userName}</div>
                            <div class="user-login">${loginName}</div>
                        </div>
                        <div class="status-badge status-active">正常</div>
                    </div>`;
                        html += itemHtml;
                    });
                } else {
                    html = '<div class="loading">暂无数据</div>';
                }
                $('.user-list').html(html);
            } else {
                layer.msg(res.msg || '查询失败');
            }
            layer.close(index);
        },
        error: function () {
            layer.msg('请求失败，请稍后重试');
            layer.close(index);
        }
    });
}
function selectAllRoles() {
    $.ajax({
        url: '/upms/sysrole/selectAll',
        type: 'GET',
        success: function (res) {
            if (res.code === 200) {
                const items = res.data || [];
                // 渲染列表项
                let html = '';
                if (items.length > 0) {
                    items.forEach(function (item) {
                        const roleName = item.roleName;
                        const roleType=getRoleType(item.roleType);
                        const roleDesc = item.roleDesc;
                        let itemHtml = '';
                        itemHtml = `<div class="role-item">
                            <div class="checkbox-container">
                                <input type="checkbox" name="roleId" value="${item.id}">
                            </div>
                            <div class="role-details">
                                <div class="role-name">${roleName}</div>
                                <div class="role-desc">${roleDesc}</div>
                            </div>
                            <div class="role-type">${roleType}</div>
                        </div>`;
                        html += itemHtml;
                    });
                } else {
                    html = '<div class="loading">暂无数据</div>';
                }
                $('.role-list').html(html);
            } else {
                layer.msg(res.msg || '查询失败');
            }
            layer.close(index);
        },
        error: function () {
            layer.msg('请求失败，请稍后重试');
            layer.close(index);
        }
    });
}
//角色类型0普通角色1普通管理员2区域管理员3平台管理员5系统管理员
function getRoleType(str){
    if("9"==str){
        return "超级管理员";
    }else if("0"==str){
        return "普通角色";
    } else if("1"==str){
        return "普通管理员";
    } else if("2"==str){
        return "区域管理员";
    }else if("3"==str){
        return "平台管理员";
    }
}

// 添加角色到已分配列表
function addRoleToAssigned(roles) {
    const id = $("#ids").val();
    $.ajax({
        url: '/upms/sysuser/queryAllotRoles/'+id,
        type: 'GET',
        data: { id: id },
        success: function (res) {
            if (res.code === 200) {
                const items = res.data || [];
                // 渲染列表项
                let html = '';
                if (items.length > 0) {
                    items.forEach(function (item) {
                        const roleName = item.roleName;
                        let itemHtml = '';
                        itemHtml = `<div class="role-tag">
                        ${roleName}
                        <button class="remove-role" title="移除角色">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>`;
                        html += itemHtml;
                    });
                } else {
                    html = '<div class="loading">暂无数据</div>';
                }
                $('.assigned-roles').html(html);
            } else {
                layer.msg(res.msg || '查询失败');
            }
            layer.close(index);
        },
        error: function () {
            layer.msg('请求失败，请稍后重试');
            layer.close(index);
        }
    });
}


// 初始化 页面加载完成后执行的代码
//jquery写法
/*$(document).ready(function() {
    // 页面加载完成后执行的代码

});*/
document.addEventListener('DOMContentLoaded', function() {
    queryAllotRoles();
    selectAllRoles();
    addRoleToAssigned();
    // 初始加载当前用户的角色
    //loadUserRoles('zhangsan');
});