<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        .avatar-show {
            height: 32px;
            width: 32px;
        }

        .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }

        #deptTree {
            overflow: auto;
            height: -webkit-calc(100vh - 237px);
            height: -moz-calc(100vh - 237px);
            height: calc(100vh - 237px);
        }

        .layui-tree-entry .layui-tree-txt {
            padding: 0 5px;
            border: 1px transparent solid;
            text-decoration: none !important;
        }

        .layui-tree-entry.ew-tree-click .layui-tree-txt {
            color: #FFFFFF;
            background-color: #257BE0;
            border: 1px #257BE0 solid;
        }

        .layui-tree-entry.ew-tree-click .layui-tree-txt:hover {
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-card">
            <div class="layui-card-body">

                <fieldset class="table-search-fieldset">
                    <legend>搜索信息(<b>收起-展开</b>)</legend>
                    <div id="search-div" style="margin: 5px 10px -10px -50px">
                        <form class="layui-form" action="" lay-filter="search-form">
                            <input type="hidden" id="deptId" name="deptId" class="layui-input"><!--用来存储部门ID的变化-->
                            <div class="layui-form-item" style="width: 100%">
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 80px">账号</label>
                                    <div class="layui-input-inline" style="width: 200px">
                                        <input type="text" id="account" name="account" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 60px">用户名</label>
                                    <div class="layui-input-inline" style="width: 200px">
                                        <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 60px">所属部门</label>
                                    <div class="layui-input-inline" style="width: 200px;">
                                        <input type="text" name="deptName" id="deptName" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 60px">账户状态</label>
                                    <div class="layui-input-inline" style="width: 200px">
                                        <select name="status" id="status" lay-filter="status" style="width: 150px">
                                            <option value="">所有</option>
                                            <option th:each="item:${baseDictList}" th:text="${item.name}"
                                                    th:value="${item.code}"></option>
                                        </select>
                                    </div>
                                </div>
                                <br>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 80px">岗位名称</label>
                                    <div class="layui-input-inline" style="width: 200px">
                                        <input type="text" name="userPostName" id="userPoxstName" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn">
                                        <i class="layui-icon"></i> 搜 索
                                    </button>
                                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                            lay-filter="data-reset-btn">
                                        <i class="layui-icon layui-icon-refresh"></i> 重 置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <!--点击上传excel模板的input-->
                <input id="excelFile" type="file" style="display: none"
                       accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
                <!--主table表格-->
                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-addition" style="font-size: 10px;"></i>新增
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">
            <i class="layui-icon layui-icon-edit" style="font-size: 10px;"></i>编辑
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="view">
            <i class="layui-icon layui-icon-file" style="font-size: 10px;"></i>查看
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
            <i class="layui-icon layui-icon-delete" style="font-size: 10px;"></i>删除
        </button>
        <!--                <button class="layui-btn layui-btn-sm" lay-event="downloadPdf">-->
        <!--                    <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>导出pdf-->
        <!--                </button>-->
        <!--                <button class="layui-btn layui-btn-sm" lay-event="exportExcel">-->
        <!--                    <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>导出excel-->
        <!--                </button>-->
        <!--                <button class="layui-btn layui-btn-sm" lay-event="downloadTemplate">-->
        <!--                    <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>下载excel模板-->
        <!--                </button>-->
        <!--                <button class="layui-btn layui-btn-sm" lay-event="excelUpload">-->
        <!--                    <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>根据excel导入-->
        <!--                </button>-->
    </div>
</script>

<script type="text/html" id="currentTableBar">
    <!--            <a class="layui-btn layui-btn-xs" lay-event="edit">-->
    <!--                <i class="layui-icon layui-icon-edit" style="font-size: 10px;"></i>编辑-->
    <!--            </a>-->
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="authorize">
        <i class="layui-icon layui-icon-set" style="font-size: 10px;"></i>角色
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="editpassword">
        <i class="layui-icon layui-icon-key" style="font-size: 10px;"></i>修改密码
    </a>
    <!--            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">-->
    <!--                <i class="layui-icon layui-icon-delete" style="font-size: 10px;"></i>删除-->
    <!--            </a>-->
</script>

<script type="text/html" id="statusTpl">
    {{#  if(d.status == '0'){ }}
    <span class="layui-badge layui-bg-blue">正常</span>
    {{#  } else { }}
    <span class="layui-badge layui-bg-orange">锁定</span>
    {{#  } }}
</script>

<script type="text/html" id="sexTpl">
    {{#  if(d.sex == '1'){ }}
    <span class="layui-badge layui-bg-blue">男</span>
    {{#  } else { }}
    <span class="layui-badge layui-bg-orange">女</span>
    {{#  } }}
</script>
<!--    </div>-->
</div>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>

<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    var updateflag = 0;
    layui.use(['form', 'table', 'tree'], function () {
        var form = layui.form,
            table = layui.table,
            tree = layui.tree;

        // 初始化部门树
        var indexDept = layer.load(0, {shade: 0.1});
        AjaxUtil.get({
            url: AjaxUtil.ctx + 'userinfo/listDeptForSelect',
            success: function (res) {
                layer.close(indexDept);

                var datalist = [];
                for (let item of res.data) {
                    item.title = item.deptName;
                    item.id = item.deptId;
                    item.field = 'deptId';
                    datalist.push(item);
                }
                // 扁平数据转树
                var treeData = arrayToTree(datalist, "0");
                tree.render({
                    elem: '#deptTree',
                    // onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
                    data: treeData,
                    click: function (obj) {
                        $("#deptId").val(obj.data.id);
                        // 改变颜色
                        $('#deptTree').find('.ew-tree-click').removeClass('ew-tree-click');
                        $(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
                        // 执行搜索重载
                        currTable.reload({
                            page: {
                                curr: 1 // 页码从1开始
                            },
                            where: form.val("search-form")
                        });
                    }
                });
            },
            error: function (error) {
                layer.close(indexDept);
                Message.error('获取部门信息失败！', 1000);
            }
        });

        // 初始化人员列表表格
        var currTable = table.render({
            elem: '#currentTableId',
            url: AjaxUtil.ctx + 'userinfo/list',
            method: 'post', //如果无需自定义HTTP类型，可不加该参数
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [
                [
                    {type: "radio", fixed: 'left',title:'😊'},
                    {type: 'numbers', fixed: 'left',title: '序号'},
                    {field: 'account', width: '8%', title: '账号', sort: true},
                    {field: 'name', width: '8%', title: '用户名', sort: true},
                    {field: 'sex', width: '5%', title: '性别', templet: '#sexTpl', align: 'center'},
                    // {
                    //     field: 'avatar', title: '头像', width: '6%', templet: function (d) {
                    //         if (!!d.avatar) {
                    //             return '<img src="' + d.avatar + '" class="avatar-show" lay-event="avatar"> ';
                    //         } else {
                    //             return '';
                    //         }
                    //     }
                    // },
                    {field: 'deptName', width: '13%', title: '所属部门'},
                    {field: 'userPostName', width: '15%', title: '岗位'},
                    {field: 'phone', width: '10%', title: '电话', align: 'center'},
                    // {field: 'email', width: '13%', title: '邮箱'},
                    {field: 'status', width: '6%', title: '状态', templet: '#statusTpl', sort: true, align: 'center'},
                    {field: 'createTime', width: '10%', title: '创建时间', sort: true, align: 'center'},
                    {title: '操作', width: '15%', toolbar: '#currentTableBar', align: "center"}
                ]
            ],
            autoSort: false, //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid', // 行边框风格
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            },
            done: function (res, curr, count) { // done为数据渲染完的回调
                // 测试打印出后端返回的权限列表
                let permissionSet = [[${permissionSet}]];
                console.log(JSON.stringify(permissionSet));
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1 // 页码从1开始
                },
                where: form.val("search-form")
            });
            return false;
        });

        // 监听重置操作
        form.on('submit(data-reset-btn)', function (data) {
            form.val("search-form", {
                "account": '',
                "name": '',
                'deptName': '',
                'status': '',
                'userPostName':''
            });
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1
                },
                where: form.val("search-form")
            });
            return false;
        });

        // 监听排序事件
        table.on('sort(currentTableFilter)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            currTable.reload({
                initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    sortName: toLine(obj.field), //排序字段
                    sortOrder: toLine(obj.type) //排序方式
                }
            });
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加用户',
                    type: 2,
                    shade: 0.3,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'userinfo/forAdd',
                    end: function (index) {
                        // 重载表格
                        if (updateflag == 1)
                            currTable.reload();
                        updateflag = 0;
                    }
                });
            } else if (obj.event == 'edit') {
                var dataRole = table.cache["currentTableId"];
                if (dataRole.length == 0)
                    return;

                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                if (data == null || data.length === 0)
                    Message.warning("请选择要编辑的用户信息！", 1500);
                else if (data.length > 1)
                    Message.warning("请选择一条记录进行编辑！", 1500);
                else {
                    var index = layer.open({
                        title: '编辑用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        area: [layerwidth + 'px', layerheight + 'px'],
                        content: AjaxUtil.ctx + 'userinfo/forUpdate/' + data[0].userId,
                        end: function () {
                            // 重载表格
                            if (updateflag == 1)
                                currTable.reload();
                            updateflag = 0;
                            layer.close(index);
                        }
                    });
                }
            } else if (obj.event == 'view') {
                var dataRole = table.cache["currentTableId"];
                if (dataRole.length == 0)
                    return;

                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                if (data == null || data.length === 0)
                    Message.warning("请选择要查看的用户信息！", 1500);
                else if (data.length > 1)
                    Message.warning("请选择一条记录进行查看！", 1500);
                else {
                    var index = layer.open({
                        title: '查看用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        area: [layerwidth + 'px', layerheight + 'px'],
                        content: AjaxUtil.ctx + 'userinfo/forView/' + data[0].userId,
                        end: function () {
                            layer.close(index);
                        }
                    });
                }
            } else if (obj.event === 'delete') {  // 监听删除操作
                    var checkStatus = table.checkStatus('currentTableId')
                        , data = checkStatus.data;
                    if (data == null || data.length === 0) {
                    Message.warning("请选择要删除的用户！", 1000);
                    return;
                }
                var userIds = [];
                for (var i = 0, len = data.length; i < len; i++) {
                    userIds.push(data[i].userId);
                }
                layer.confirm('确定要删除当前账号吗？', {
                    title: '注意！',
                    btn: ['确定', '取消']
                }, function () {
                    // 用户点击确定按钮后的回调函数
                    console.log('执行退出账号操作');
                    AjaxUtil.post({
                        url: AjaxUtil.ctx + "userinfo/batchDelete",
                        contentType: "application/json",
                        data: JSON.stringify(userIds),
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg(res.message,{icon:1},function () {
                                    // 重载表格
                                    currTable.reload();
                                });
                            } else if (res.code == -1){
                                layer.msg(res.message, {icon:2});
                                return;
                            }
                        },
                        error: function (error) {
                        }
                    });
                    // 这里添加真实的退出账号逻辑，例如发送AJAX请求到服务器
                }, function () {
                    // 用户点击取消按钮后的回调函数
                    console.log('已取消删除账号');
                });

              /*  layer.confirm('确定删除用户吗？', function (index) {
                    layer.close(index);

                });*/

                // layer.alert(JSON.stringify(data));
            } else if (obj.event === 'downloadPdf') {
                console.log("点击下载pdf");
                // 下面的href模式也是可以的，也是没问题的，
                // let a = document.createElement('a');
                // a.href = AjaxUtil.ctx + 'sysuser/downloadPdf';
                // a.click()

                // 改为ajax下载文件，这样方便设置header，适配前后端分离的情况（$.ajax不支持blob类型，所以这里用原生的XMLHttpRequest）
                var url = AjaxUtil.ctx + 'userinfo/downloadPdf';
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
                xhr.responseType = "blob";    // 返回类型blob
                // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
                xhr.onload = function () {
                    // 请求完成
                    if (this.status === 200) {
                        // 返回200
                        var blob = this.response;

                        console.log(xhr.getResponseHeader("content-disposition"))
                        let temp = xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1];
                        temp = temp.replace('"', ''); // 去除两边的引号

                        var fileName = decodeURIComponent(temp);
                        if (isEmpty(fileName)) {
                            fileName = '人员明细信息表.pdf';
                        }

                        var reader = new FileReader();
                        reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
                        reader.onload = function (e) {
                            // 转换完成，创建一个a标签用于下载
                            var a = document.createElement('a');
                            a.download = fileName + '.pdf';
                            a.href = e.target.result;
                            $("body").append(a);    // 修复firefox中无法触发click
                            a.click();
                            $(a).remove();
                        }
                    }
                };
                // 发送ajax请求
                xhr.send()
            } else if (obj.event === 'exportExcel') {
                console.log("点击导出excel");
                let a = document.createElement('a');
                a.href = AjaxUtil.ctx + 'userinfo/exportExcel';
                a.click();
                a.parentNode.removeChild(a);
            } else if (obj.event === 'downloadTemplate') {
                console.log("点击下载excel模板");
                let a = document.createElement('a');
                a.href = AjaxUtil.ctx + 'userinfo/downloadTemplate';
                a.click();
                a.parentNode.removeChild(a);
            } else if (obj.event === 'excelUpload') {
                console.log("点击上传excel模板");
                $("#excelFile").trigger("click");
            }
        });

        // 监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        // 监听行工具事件
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            console.log(data);
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'userinfo/forUpdate/' + data.userId,
                    end: function () {
                        // 重载表格
                        if (updateflag == 1)
                            currTable.reload();
                        updateflag = 0;
                        layer.close(index);
                    }
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除该用户吗？', function (index) {
                    layer.close(index);
                    AjaxUtil.get({
                        url: AjaxUtil.ctx + "userinfo/delete/" + data.userId,
                        success: function (res) {
                            if (res.code === 0) {
                                Message.success(1500, res.message, function () {
                                    // 重载表格
                                    currTable.reload();
                                });
                            } else {
                                Message.error(res.message, 1000);
                            }
                        },
                        error: function (error) {
                        }
                    });
                });
                return false;
            } else if (obj.event === 'authorize') {
                var index = layer.open({
                    title: '用户授权',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    area: ['500px', '350px'],
                    content: AjaxUtil.ctx + 'userinfo/authorize/' + data.userId,
                    end: function (index) {
                        // 重载表格
                        if (updateflag == 1)
                            currTable.reload();
                        updateflag = 0;
                    }
                });
                return false;
            } else if (obj.event === 'editpassword') {
                layer.prompt({
                    formType: 0,
                    value: 'Dky@8916.com',
                    title: '请输入密码'
                }, function (value, prompt, elem) {
                    if (isEmpty(value)) {
                        layer.msg('请输入新密码！', {icon: 5});
                        return;
                    }
                    // var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}');
                    // if(!pwdRegex.test(value)){
                    //     // layer.msg("新密码复杂度过低（密码中必须包含字母、数字、特殊字符）！", {icon: 5});
                    //     return;
                    // }

                    var index = layer.load(0, {shade: 0.1});
                    value = md5.MD5('' + value);
                    AjaxUtil.get({
                        url: AjaxUtil.ctx + 'userinfo/updatePassword/' + data.userId + "/" + value,
                        success: function (res) {
                            if (0 === res.code) {
                                layer.closeAll('dialog');
                                layer.close(index);
                                Message.success(res.message, 1000);
                            } else {
                                Message.warning(res.message, 1000);
                            }
                        },
                        error: function (error) {
                            layer.close(index);
                            Message.error(res.message, 1000);
                        }
                    });
                    layer.close(prompt);
                });
                return false;
            } else if (obj.event === 'avatar') {
                // 头像放大展示
                var url = data.avatar;
                if (url) {
                    var r = '';
                    r += '<div style="width: 100%; height: 100%; position: relative;">';
                    r += '<img src="' + url + '" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-height: 100%; max-width: 100%; margin: auto;">';
                    r += '</div>';
                    layer.open({
                        type: 1,
                        title: '图片预览',
                        area: ['400px', '600px'],
                        content: r,
                        shadeClose: true
                    });
                }
            }
        });

        // 选完excel模板后的操作
        $('#excelFile').change(function () {
            var formData = new FormData();
            formData.append("files", $("#excelFile")[0].files[0]);
            formData.append("fileName", $("#excelFile")[0].files[0].name); // 文件名字
            var index = layer.load(0, {shade: 0.1}); //0代表加载的风格，支持0-2

            AjaxUtil.upload({
                url: AjaxUtil.ctx + 'userinfo/excelUpload',
                data: formData,
                success: function (res) {
                    layer.close(index);
                    if (0 === res.code) {
                        Message.success(res.message, 1000);
                    } else {
                        Message.error(res.message, 1000);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error("服务器异常！", 1000);
                }
            });
        });

        //双击
        table.on('rowDouble(currentTableFilter)', function (obj) {
            data = obj.data;
            var index = layer.open({
                title: '查看用户',
                type: 2,
                shade: 0.2,
                maxmin: true,
                area: [layerwidth + 'px', layerheight + 'px'],
                content: AjaxUtil.ctx + 'userinfo/forView/' + data.userId,
                end: function () {
                    layer.close(index);
                }
            });
        });
    });


    /**
     *  扁平数据转树结构
     * @returns {[]}
     * @param data
     * @param firstPid
     */
    function arrayToTree(data, firstPid) {
        const result = [];
        getChildren(data, result, firstPid)
        return result;
    }

    function getChildren(data, result, parentId) {
        for (const item of data) {
            if (item.parentId === parentId) {
                const newItem = {...item, children: []};
                result.push(newItem);
                getChildren(data, newItem.children, item.deptId);
            }
        }
    }

    function setUpdateFlag() {
        updateflag = 1;
    }
</script>
</body>
</html>