<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <style>
        html,body{margin: 0; padding: 0;}
        .container {background-color:#fff; padding: 0px;height: 100%;width: 500px;}
        .container .top {border-top: 1px;border-right: 1px;border-bottom: 0;border-left: 1px;border-style: solid;border-color: silver;padding: 5px;}
        .container .top .selected-user {border: 1px dotted silver;line-height: 30px;padding: 5px;overflow: hidden;}
        .container .top .selected-user .list {width: 498px;height: 60px;overflow-y: scroll;overflow-x: hidden;}
        .container .center {border: 1px solid silver;height: 40px;overflow: hidden;}
        .container .center .list {padding: 5px 8px;line-height: 30px;height: 50px;white-space: nowrap;overflow-x: scroll;overflow-y: hidden;}
        .container .center .list span {cursor: pointer;}
        .container .center .list span::after {content: ' > ';}
        .container .center .list span:last-child {color: #b7b5b5; cursor: default;}
        .container .center .list span:last-child::after {content: ''}
        .container .bottom {font-size: 0;}
        .container .bottom .left {display: inline-block;width: 198px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 1px;border-style: solid;border-color: silver;overflow: hidden;}
        .container .bottom .left .list {width: 216px;height: 300px;overflow-y: scroll;overflow-x: hidden;}
        .container .bottom .left .list div {font-size: 14px;padding: 5px 8px;line-height: 28px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 0;border-style: dotted;border-color: silver; cursor: pointer;}
        .container .bottom .left .list div:last-child {border-bottom: 0;}
        .container .bottom .right {display: inline-block;width: 299px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 0px;border-style: solid;border-color: silver;overflow: hidden;}
        .container .bottom .right .list {width: 316px;height: 300px;overflow-y: scroll;overflow-x: hidden;}
        .container .bottom .right .list .user-item {padding: 5px;border-bottom: 1px dotted silver; cursor: pointer;}
        .container .bottom .right .list .user-item .avatar {display: inline-block;width: 40px;height: 40px; line-height: 40px; font-size: 20px; border-radius: 20px; text-align: center;}
        .container .bottom .right .list .user-item .avatar img {width: 100%;height: 100%;}
        .container .bottom .right .list .user-item .info {display: inline-block;font-size: 14px;line-height: 20px;vertical-align: top;margin-left: 5px;}
        .container .bottom .right .list .user-item .info div {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 244px;}
        .container .bottom .right .list .user-item .checked {display: none;}
        .container .bottom .right .list .active {background: #f1f1f1;position: relative;}
        .container .bottom .right .list .active .checked {position: absolute;display: block;top: 12px;right: 12px;width: 25px;height: 25px; font-size: 25px;}
        .footer {background-color:#fff;position: fixed;bottom: 0;width: 100%;text-align: center;}
        .footer div {padding: 5px;}
    </style>
</head>

<body>
    <div class="container">
        <div class="top">
            <div class="selected-user">
                <div id="selectedUsers" class="list"></div>
            </div>
        </div>
        <div class="center">
            <div id="selectedDepartments" class="list"></div>
        </div>
        <div class="bottom">
            <div class="left">
                <div id="subDepartments" class="list"></div>
            </div>
            <div class="right">
                <div id="users" class="list"></div>
            </div>
        </div>
        <div class="footer">
            <div class="layui-btn-group">
                <button id="confirmBtn" type="button" class="layui-btn layui-btn-sm">确认</button>
                <button id="closeBtn" type="button" class="layui-btn layui-btn-primary layui-btn-sm">关闭</button>
            </div>
        </div>
    </div>
    <script src="assets/layuiadmin/layui/layui.js"></script>
    <script th:inline="javascript">
        layui.config({
            base: 'assets/layuiadmin/'
        }).extend({
            index: 'lib/index'
        }).use(['index'], function() {
            var $ = layui.$;
            var $win = $(window);
            var requestParams = top.restAjax.params(window.location.href);
            var selectType = requestParams.selectType;
            selectType = selectType && (selectType === 'checkbox' || selectType === 'radio') ? 'radio' : 'checkbox';

            var departmentRootId = requestParams.departmentRootId;
            departmentRootId = !departmentRootId ? '0' : departmentRootId;

            var selectedUserIdArray = top.dialog.dialogData.selectedUserIdArray;
            selectedUserIdArray = selectedUserIdArray ? selectedUserIdArray : [];

            // 置空传递的中间参数，关闭处校验null，不处理，点提交时不会为null
            top.dialog.dialogData.selectedUserArray = null;

            // 常量
            var Consts = {
                winWidth: window.innerWidth,
                winHeight: window.innerHeight,
                avatarColorArray: [
                    {
                        bgColor: '#b4b4c4',
                        color: '#fff'
                    },
                    {
                        bgColor: '#7182e7',
                        color: '#fff'
                    },
                    {
                        bgColor: '#304eff',
                        color: '#fff'
                    },
                    {
                        bgColor: '#ff75ef',
                        color: '#fff'
                    },
                    {
                        bgColor: '#ff7878',
                        color: '#fff'
                    },
                    {
                        bgColor: '#d2d2d2',
                        color: '#000'
                    },
                    {
                        bgColor: '#b8c926',
                        color: '#fff'
                    },
                    {
                        bgColor: '#8d3434',
                        color: '#fff'
                    }
                ]
            }
            // 变量
            var Properties = {
                containerWidth : Consts.winWidth +'px',
                containerTopSelectedUserListWidth :  (Consts.winWidth - 2) + 'px',
                containerBottomLeftWidth : (Consts.winWidth * (2 / 5) - 2) +'px',
                containerBottomLeftListWidth : (Consts.winWidth * (2 / 5) + 16) +'px',
                containerBottomLeftListHeight : (Consts.winHeight - 166) +'px',
                containerBottomRightWidth : (Consts.winWidth * (3 / 5) - 1) +'px',
                containerBottomRightListWidth : (Consts.winWidth * (3 / 5) + 16) +'px',
                containerBottomRightListHeight : (Consts.winHeight - 166) +'px',
                containerBottomRightListUserItemInfoDivWidth : (Consts.winWidth * (3 / 5) - 56) +'px',
                selectedDepartmentArray: [],
                subDepartmentArray: [],
                userArray: [],
                selectedUserArray: [],
            }
            // 方法
            var Methods = {
                // 初始化整体样式
                initStyle: function() {
                    document.querySelectorAll('.container').forEach(function(item) {
                        item.style.width = Properties.containerWidth;
                    });
                    document.querySelectorAll('.container .top .selected-user .list').forEach(function(item) {
                        item.style.width = Properties.containerTopSelectedUserListWidth;
                    });
                    document.querySelectorAll('.container .bottom .left').forEach(function(item) {
                        item.style.width = Properties.containerBottomLeftWidth;
                    });
                    document.querySelectorAll('.container .bottom .left .list').forEach(function(item) {
                        item.style.width = Properties.containerBottomLeftListWidth;
                        item.style.height = Properties.containerBottomLeftListHeight;
                    });
                    document.querySelectorAll('.container .bottom .right').forEach(function(item) {
                        item.style.width = Properties.containerBottomRightWidth;
                    });
                    document.querySelectorAll('.container .bottom .right .list').forEach(function(item) {
                        item.style.width = Properties.containerBottomRightListWidth;
                        item.style.height = Properties.containerBottomRightListHeight;
                    });
                },
                // 初始化用户列表样式
                initUserListStyle: function() {
                    document.querySelectorAll('.container .bottom .right .list .user-item .info div').forEach(function(item) {
                        item.style.width = Properties.containerBottomRightListUserItemInfoDivWidth;
                    });
                },
                // 用户是否被选择
                getSelectedUserIndex: function (userId) {
                    for(var i = 0; i < Properties.selectedUserArray.length; i++) {
                        var item = Properties.selectedUserArray[i];
                        if(userId === item.userId) {
                            return i;
                        }
                    }
                    return -1;
                },
                // 刷新已选择的用户
                refreshSelectedUser: function() {
                    var doms = '';
                    for(var i = 0, item; item = Properties.selectedUserArray[i++];) {
                        doms += '<a href="javascript:void(0);" class="layui-btn layui-btn-xs" data-user-id="'+ item.userId +'" >'+ item.userName +' <i class="fa fa-close remove-user" data-user-id="'+ item.userId +'"></i></a>';
                    }
                    $('#selectedUsers').empty();
                    $('#selectedUsers').append(doms);
                },
                // 刷新选择的部门
                refreshSelectedDepartments: function() {
                    var doms = '';
                    for(var i = 0, item; item = Properties.selectedDepartmentArray[i++];) {
                        doms += '<span '+ (i === Properties.selectedDepartmentArray.length ? '' : 'class="selected-department"') +' data-department-id="'+ item.departmentId +'">'+ item.departmentName +'</span>';
                    }
                    $('#selectedDepartments').empty();
                    $('#selectedDepartments').append(doms);
                },
                // 刷新下级部门
                refreshSubDepartments: function() {
                    var doms = '';
                    for(var i = 0, item; item = Properties.subDepartmentArray[i++];) {
                        doms += '<div class="sub-department" data-department-id="'+ item.departmentId +'"><i class="fa fa-university"></i> '+ item.departmentName +'</div>'
                    }
                    $('#subDepartments').empty();
                    $('#subDepartments').append(doms);
                },
                // 刷新用户
                refreshUsers: function() {
                    var doms = '';

                    for(var i = 0, item; item = Properties.userArray[i++];) {
                        var color = Consts.avatarColorArray[(i - 1) % Consts.avatarColorArray.length];

                        doms += [
                            '<div class="user-item '+ (Methods.getSelectedUserIndex(item.userId) != -1 ? 'active' : '') +'" data-user-id="'+ item.userId +'" data-user-name="'+ item.userName +'">',
                            '   <div class="avatar" style="background-color: '+ color.bgColor +'; color: '+ color.color +'">'+ item.userName.substring(0, 1) +'</div>',
                            '   <div class="info">',
                            '       <div class="username">'+ item.userName +'（'+ item.userUsername +'）</div>',
                            '       <div class="phone">'+ item.userPhone +'</div>',
                            '   </div>',
                            '   <div class="checked"><i class="fa fa-check"></i></div>',
                            '</div>'
                        ].join('');
                    }
                    $('#users').empty();
                    $('#users').append(doms);
                    Methods.initUserListStyle();
                },
                // 清除选择的部门
                clearSelectedDepartment: function(departmentId) {
                    for(var i = 0; i < Properties.selectedDepartmentArray.length; i++) {
                        var item = Properties.selectedDepartmentArray[i];
                        if(departmentId === item.departmentId) {
                            Properties.selectedDepartmentArray.splice(i, Properties.selectedDepartmentArray.length - i);
                            return;
                        }
                    }
                },
                close: function() {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                }
            }
            // 初始化
            var Init = {
                // 初始化选择的用户
                initSelectedUser: function () {
                    if(selectedUserIdArray.length == 0) {
                        Methods.refreshSelectedUser();
                        return;
                    }
                    top.restAjax.post(top.restAjax.path('api/user/listbyids', []), {
                        ids: selectedUserIdArray
                    }, null, function(code, data) {
                        for(var i = 0, item; item = data[i++];) {
                            var user = {
                                userId: item.userId,
                                userName: item.userName
                            };
                            Properties.selectedUserArray.push(user);
                            Methods.refreshSelectedUser();
                        }
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    });
                },
                // 刷新部门和用户
                refreshDepartmentUser: function () {
                    Methods.refreshSelectedDepartments();
                    Methods.refreshSubDepartments();
                    Methods.refreshUsers();
                },
                // 初始化部门与部门用户
                initDepartmentAndUser: function(parentDepartmentId) {
                    var loadLayerIndex;
                    top.restAjax.get(top.restAjax.path('api/department/user/get-department-contain-user-and-sub/department-id/{departmentId}', [parentDepartmentId]), {}, null, function(code, data) {
                        Properties.selectedDepartmentArray.push({
                            departmentId: data.departmentId,
                            departmentName: data.departmentName,
                            departmentCode: data.departmentCode
                        });
                        Properties.subDepartmentArray = data.subDepartments;
                        Properties.userArray = data.users;
                        Init.refreshDepartmentUser();
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    }, function() {
                        loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
                    }, function() {
                        top.dialog.close(loadLayerIndex);
                    });
                }
            }

            Methods.initStyle();
            Methods.initUserListStyle();
            Init.initSelectedUser();
            Init.initDepartmentAndUser(departmentRootId);

            $(document).on('click', '.selected-department', function() {
                var departmentId = this.dataset.departmentId;
                Methods.clearSelectedDepartment(departmentId);
                Init.initDepartmentAndUser(departmentId);
            })
            // 部门列表点击
            $(document).on('click', '.sub-department', function() {
                var departmentId = this.dataset.departmentId;
                Init.initDepartmentAndUser(departmentId);
            })
            // 用户列表点击
            $(document).on('click', '.user-item', function() {
                var userId = this.dataset.userId;
                var userName = this.dataset.userName;
                if(selectType === 'radio') {
                    // 单选
                    Properties.selectedUserArray = [];
                    Properties.selectedUserArray.push({
                        userId: userId,
                        userName: userName
                    });
                } else {
                    // 多选
                    var selectedIndex = Methods.getSelectedUserIndex(userId);
                    if(selectedIndex == -1) {
                        // 不存在，添加
                        Properties.selectedUserArray.push({
                            userId: userId,
                            userName: userName
                        });
                    } else {
                        // 存在，移除
                        Properties.selectedUserArray.splice(selectedIndex, 1);
                    }
                }
                Methods.refreshSelectedUser();
                Methods.refreshUsers();
            })
            // 移除
            $(document).on('click', '.remove-user', function() {
                var userId = this.dataset.userId;
                var selectedIndex = Methods.getSelectedUserIndex(userId);
                Properties.selectedUserArray.splice(selectedIndex, 1);
                Methods.refreshSelectedUser();
                Methods.refreshUsers();
            })
            // 确定
            $('#confirmBtn').on('click', function(e) {
                top.dialog.dialogData.selectedUserArray = Properties.selectedUserArray;
                Methods.close();
            });
            // 关闭
            $('#closeBtn').on('click', function(e) {
                Methods.close();
            });

        });
    </script>
</body>

</html>