
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="referrer" content="no-referrer">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link href="/css/common/common.css" rel="stylesheet" type="text/css" />
    <link href="/css/admin/console.css" rel="stylesheet" type="text/css"/>
    <link href="/ref/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="/ref/layui-v2.6.8/layui/layui.js" type="text/javascript"></script>
    <script src="/ref/jquery/jquery-3.4.1.js" type="text/javascript"></script>

    <style>
        .search-condition-elem {
            width: 170px;
        }
    </style>
</head>
<body style="overflow-x: hidden">
<center>
    <div class="search-condition-module">
        <select class="search-condition-elem"  id="role-code">
            <option value="">全部角色</option>
            <option value="6">公众号</option>
            <option value="5">机器人</option>
            <option value="4">群组</option>
            <option value="2">管理员</option>
            <option value="3">黑名单</option>
            <option value="1">普通用户</option>
        </select>
        <button class="btn" style="left: 300px" id="search-btn" onclick="loadUserInFlow()">检索</button>
        <button class="btn" style="right: 250px" id="create-robot-btn">创建机器人</button>
        <button class="btn" style="right: 100px; background-color: orangered" id="create-public-account-btn">创建公众号</button>
    </div>

    <table class="account-apply-tab layui-table" id="search-result-tab">
        <thead>
        <tr>
            <th style="width: 50px">头像</th>
            <th style="width: 70px">手机号</th>
            <th style="width: 100px">用户名</th>
            <th style="width: 60px">角色</th>
            <th style="width: 200px;" class="line1ppp">签名</th>
            <th style="width: 200px">注册时间</th>
            <th style="width: 100px">操作</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div id="page"></div>
</center>
</body>
<script>

    var firstSearch = true;
    var curr = 0, size = 10, total = 0;
    loadUserInFlow();
    function loadUserInFlow() {
        $.ajax({
            url:"/api/user/getUserList?roleCode="+$("#role-code").val()+"&pageNo="+(curr == 0 ? 1 : curr)+"&pageSize="+size,
            type:"get",
            success:function (data) {
                data = eval(data);
                $("#search-result-tab").children("tbody").empty();
                if (data.success){
                    $.each(data.data, function (index, value) {
                        var roleName = "普通用户";
                        if (value.roleCode == 2) {
                            roleName = "管理员";
                        } else if (value.roleCode == 3) {
                            roleName = "黑名单";
                        } else if (value.roleCode == 4) {
                            roleName = "群组";
                        } else if (value.roleCode == 5) {
                            roleName = "机器人";
                        } else if (value.roleCode == 6) {
                            roleName = "公众号";
                        }
                        var addBlackListRoleBtn =
                            "<button class=\"layui-btn layui-btn-sm layui-btn-normal\" onclick=\"addBlackListRole('"+value.userId+"')\">加入黑名单</button>";
                        var cancelBlackListRoleBtn =
                            "<button class=\"layui-btn layui-btn-sm layui-btn-normal\" onclick=\"cancelBlackListRole('"+value.userId+"')\">撤销黑名单</button>";
                        var upgradeAdminRoleBtn =
                            "<button class=\"layui-btn layui-btn-sm layui-btn-warm\" onclick=\"upgradeAdminRole('"+value.userId+"')\">升级管理员</button>";
                        var cancelAdminRoleBtn =
                            "<button class=\"layui-btn layui-btn-sm layui-btn-warm\" onclick=\"cancelAdminRole('"+value.userId+"')\">取消管理员权限</button>";
                        var photo = value.photo;
                        if (value.roleCode == 4) {
                            photo = "https://coderutil.oss-cn-beijing.aliyuncs.com/bbs-image/file_6b2a447e4a1f4df8870f8a51e2874618.png";
                        }
                        var tr = "<tr>"+
                            "<td><img style='height: 40px; border-radius: 5px;' src='"+photo+"'></td>"+
                            "<td>"+value.mobile+"</td>"+
                            "<td>"+value.userName+"</td>"+
                            "<td>"+roleName+"</td>"+
                            "<td>"+value.signature+"</td>"+
                            "<td>"+value.registryTimeStr+"</td>"+
                            "<td style='width: 200px;'>";
                            if (value.roleCode == 1) {
                                // 普通用户可以升级管理员或者加入黑名单
                                tr += addBlackListRoleBtn;
                                tr += upgradeAdminRoleBtn;
                            } else if (value.roleCode == 2) {
                                // 管理员=》取消管理员角色
                                tr += cancelAdminRoleBtn;
                            } else if (value.roleCode == 3) {
                                // 黑名单=》取消黑名单角色
                                tr += cancelBlackListRoleBtn;
                            }
                            tr += "</td></tr>";
                        if (!firstSearch) {
                            $("#search-result-tab").children("tbody").append(tr);
                        }
                    })
                    if (curr == 0 || data.total != total) {
                        curr = 1;
                        firstSearch = false;
                        total = data.total;
                        initPage();
                    }
                } else {
                    layer.msg(data.msg);
                }
            },error:function () {}
        })
    }

    function initPage() {
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            laypage.render({
                elem: 'page',
                count: total,
                limit: size,
                curr: curr,
                jump: function(obj){
                    curr = obj.curr;
                    loadUserInFlow();
                }
            });
        })
    }

    function addBlackListRole(userId) {
        var api = "/api/user/addBlackListRole/"+userId;
        updateUserRole(api);
    }

    function cancelBlackListRole(userId) {
        var api = "/api/user/setNormalUserRole/"+userId;
        updateUserRole(api);
    }

    function upgradeAdminRole(userId) {
        var api = "/api/user/upgradeAdminRole/"+userId;
        updateUserRole(api);
    }

    function cancelAdminRole(userId) {
        var api = "/api/user/setNormalUserRole/"+userId;
        updateUserRole(api);
    }

    function updateUserRole(api) {
        $.ajax({
            url: api,
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success:function (data) {
                data = eval(data);
                if (data.success){
                    layer.msg("操作成功");
                    loadUserInFlow();
                } else {
                    layer.msg(data.msg);
                }
            },error:function () {
                layer.msg("服务端异常");
            }
        })
    }

    $("#create-robot-btn").on('click', function() {
        layer.closeAll();
        layer.open({
            type: 1,
            title: false,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            area: ['380px', '500px'],
            shadeClose: true, //开启遮罩关闭
            content: '<div class=\"popup-module-header-div\" style="height: 70px;">' +
                '<p class=\"popup-module-title\" style="padding-top: 20px">创建机器人</p>' +
                '</div>' +
                '<div class=\"popup-module-core-div\" style="margin-top: -40px">' +
                '<div class="popup-module-core-div-item" style="height: 60px; border: none; text-align: center">' +
                '<img src="/image/icon/robot.png" title="点击修改头像" style="width: 50px; height: 50px;" id="create-robot-photo">' +
                '</div>' +
                '<div class="popup-module-core-div-item">' +
                '<input class="popup-input-number" id="create-robot-number" placeholder="机器人账号，例如：robot01、chatgpt...">' +
                '</div>' +
                '<div class="popup-module-core-div-item">' +
                '<input class="popup-input-number" id="create-robot-name" placeholder="机器人名称，例如：对话助手">' +
                '</div>' +
                '<div class="popup-module-core-div-item" style="height: 80px;">' +
                '<textarea class="popup-input-number" id="create-robot-role" style="height: 80px; resize: none; width: 100%" placeholder="机器人角色定义，例如：你是一个Java编程助手，擅长Java语言"></textarea>' +
                '</div>' +
                '<div class="popup-module-core-div-item" style=\"border: 0px\">' +
                '<button class=\"popup-btn\" onclick=\"createRobot(\'\', $(\'#create-robot-photo\').attr(\'src\'), $(\'#create-robot-number\').val(), $(\'#create-robot-name\').val(), $(\'#create-robot-role\').val())\">创建机器人</button>' +
                '</div>' +
                '</div>' +
                '</div>'
        });
        layui.use(['upload'], function(){
            var $ = layui.jquery
                ,upload = layui.upload
            //常规使用 - 普通图片上传
            upload.render({
                elem: '#create-robot-photo'
                ,url: '/api/file/moment/upload' //改成您自己的上传接口
                ,accept: 'images'
                ,acceptMime: '*'
                ,done: function(res){
                    if(!res.success){
                        return layer.msg('上传失败');
                    } else {
                        $('#create-robot-photo').attr('src', res.data.url);
                    }
                }
            });
        });
    })

    $("#create-public-account-btn").on('click', function() {
        layer.closeAll();
        layer.open({
            type: 1,
            title: false,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            area: ['380px', '500px'],
            shadeClose: true, //开启遮罩关闭
            content: '<div class=\"popup-module-header-div\" style="height: 70px;">' +
                '<p class=\"popup-module-title\" style="padding-top: 20px">创建公众号</p>' +
                '</div>' +
                '<div class=\"popup-module-core-div\" style="margin-top: -40px">' +
                '<div class="popup-module-core-div-item" style="height: 60px; border: none; text-align: center">' +
                '<img src="/image/icon/public-account.png" title="点击修改头像" style="width: 50px; height: 50px;" id="public-account-photo">' +
                '</div>' +
                '<div class="popup-module-core-div-item">' +
                '<input class="popup-input-number" id="create-public-account" placeholder="公众号账号，例如：gzh_xxx, gzh_yyy">' +
                '</div>' +
                '<div class="popup-module-core-div-item">' +
                '<input class="popup-input-number" id="create-public-name" placeholder="公众号名称，例如：coderutil技术号">' +
                '</div>' +
                '<div class="popup-module-core-div-item" style="height: 80px;">' +
                '<textarea class="popup-input-number" id="create-signature" style="height: 80px; resize: none; width: 100%" placeholder="公众号的描述"></textarea>' +
                '</div>' +
                '<div class="popup-module-core-div-item" style=\"border: 0px\">' +
                '<button class=\"popup-btn\" onclick=\"createPublicAccount($(\'#create-public-account\').val(), $(\'#public-account-photo\').attr(\'src\'), $(\'#create-public-name\').val(), $(\'#create-signature\').val())\">创建公众号</button>' +
                '</div>' +
                '</div>' +
                '</div>'
        });
        layui.use(['upload'], function(){
            var $ = layui.jquery
                ,upload = layui.upload
            //常规使用 - 普通图片上传
            upload.render({
                elem: '#public-account-photo'
                ,url: '/api/file/moment/upload' //改成您自己的上传接口
                ,accept: 'images'
                ,acceptMime: '*'
                ,done: function(res){
                    if(!res.success){
                        return layer.msg('上传失败');
                    } else {
                        $('#public-account-photo').attr('src', res.data.url);
                    }
                }
            });
        });
    })

    function createRobot(id, photo, robotNumber, robotName, robotRole) {
        if (robotNumber == '') {
            layer.msg("机器人账号不能为空");
            return;
        }
        if (robotName == '') {
            layer.msg("机器人名称不能为空");
            return;
        }
        $.ajax({
            url: "/api/user/createRobot",
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                id: id,
                robotNumber: robotNumber,
                robotPhoto: photo,
                robotName: robotName,
                robotRole: robotRole
            }),
            success:function (data) {
                data = eval(data);
                if (data.success){
                    layer.msg("机器人创建成功");
                    loadUserInFlow();
                    layer.closeAll();
                } else {
                    layer.msg(data.msg);
                }
            },error:function () {
                layer.msg("服务端异常");
            }
        })
    }

    function createPublicAccount(account, accountPhoto, accountName, accountSignature) {
        if (account == '') {
            layer.msg("公众号账号不能为空");
            return;
        }
        if (accountPhoto == '') {
            layer.msg("公众号头像不能为空");
            return;
        }
        if (accountName == '') {
            layer.msg("公众号名称不能为空");
            return;
        }
        $.ajax({
            url: "/api/user/createPublicAccount",
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                account: account,
                accountName: accountName,
                signature: accountSignature,
                accountPhoto: accountPhoto
            }),
            success:function (data) {
                data = eval(data);
                if (data.success){
                    layer.msg("机器人创建成功");
                    loadUserInFlow();
                    layer.closeAll();
                } else {
                    layer.msg(data.msg);
                }
            },error:function () {
                layer.msg("服务端异常");
            }
        })
    }

</script>
<style>
    .layui-laypage a, .layui-laypage span {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: middle;
        padding: 3px 13px;
        height: 28px;
        line-height: 28px;
        margin: 0px 5px;
        border-radius: 4px;
        background-color: #fff;
        color: #4e6ef2;
        font-size: 14px;
        border: none;
    }
    .layui-laypage a:hover, .layui-laypage span:hover {
        background: #4e6ef2;
        color: #fff;
    }
    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        position: absolute;
        left: -1px;
        top: -1px;
        padding: 1px;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        background: #4e6ef2;
        color: #fff;
        font-weight: normal;
    }
    .layui-laypage-next, .layui-laypage-prev {
        border-radius: 4px;
    }
    .layui-laypage-default {
        float: right;
    }
</style>
</html>