<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('通讯录')" />
    <link th:href="@{/css/use/css1.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/address.css}" rel="stylesheet"/>
    <style>
        .btn-style1{
            padding: 6px 20px;
            border-radius: 5px 5px 0 0;
            background-color: #EAF9FD;
            color: #000000;
        }
        .btn-style2{
            padding: 6px 20px;
            border-radius: 0;
            color: #185EFF;
            border-color: #185EFF;
        }
        .btn-style3{
            color: #417EFA;
            padding: 0 10px;
        }
        .btn-style1:hover,.btn-style2:hover{
            background-color: #185EFF;
            color: #ffffff;
        }
        .groupDiv{
            width:calc(24% + 7px);
            position: absolute;
            top:192px;
            z-index: 99;
            border-right: 2px solid #E6E6E6;
        }
        /* 左侧分组栏 */
        .left-panel {
            width: 25%;
            padding: 10px 0 10px 10px;
        }
        .group-list {
            margin-bottom: 10px;
        }
        .group-list ul{
            margin: 0;
            padding: 0;
        }
        .group-list li{
            list-style-type: none;
            padding: 5px 0 5px 20px;
            margin: 5px 0;
            cursor: pointer;
        }
        .group-list li:hover{
            background-color: #CECECE;
        }
        .bootstrap-table .fixed-table-container.fixed-height:not(.has-footer){
            border: none;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="btn-group-sm" id="toolbar" role="group">
            <div style="width: 97vw;border-bottom: 1px solid #F1F3F7;">
                <a class="btn btn-style1">
                    我的联系人
                </a>
                <a class="btn btn-style1">
                    导入联系人
                </a>
                <a class="btn btn-style1">
                    导出联系人
                </a>
                <a class="btn btn-style1">
                    使用帮助
                </a>
            </div>
            <div style="margin-top: 10px;">
                <a class="btn btn-style2">
                    新建联系人
                </a>
                <a class="btn btn-style2 multiple disabled">
                    删除联系人
                </a>
                <a class="btn btn-style2" onclick="addressgroupAdd()">
                    创建组
                </a>
                <a class="btn btn-style2">
                    复制到组
                </a>
                <a class="btn btn-style2">
                    移动到组
                </a>
                <a class="btn btn-style2" onclick="$.table.search()">
                    刷新
                </a>
            </div>
        </div>
        <div class="col-md-12 select-table table-striped" style="min-height: 97%;width: 100%;">
            <div class="col-md-12 search-collapse" style="border:none;box-shadow: 0 5px 3px -3px rgba(0,0,0,.1);padding-right: 0;padding-left: 0;margin-bottom: 10px;">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li style="margin-left: 20px;">
                                <label>通讯录：</label>
                            </li>
                            <li class="flexLayout" style="float: right;">
                                <input type="text" class="form-control searchTag" placeholder="搜索姓名关键字"/>
                                <button class="btn btn-success"  style="width:65px;margin-left: 10px;height: 36px;background-color: #185EFF;" onclick="$.table.search()">
                                    搜索
                                </button>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div>
                <div id="grouping" class="groupDiv">
                    <div class="left-panel">
                        <div style="margin-bottom: 10px;color: #A9B2C2;">联系人分组</div>
                        <div id="groups" class="group-list">
                            <ul>
                                <li><div>所有联系人(<span id="manTotal">11</span>)</div></li>
                                <li><div>分组1(<span>4</span>)</div></li>
                                <li><div>分组2(<span>7</span>)</div></li>
                                <li><div>分组3(<span>1</span>)</div></li>
                                <li><div>分组4(<span>0</span>)</div></li>
                                <li><div>未分组联系人(<span id="notDivide">1</span>)</div></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div >
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    // 分组前缀
    // 通讯录人员前缀
    var prefix = ctx + "system/addressbook";
    var editFlag ="";

    $(function() {
        queryUserList();
        queryGroupTree();
    });

    //新增
    function addressgroupAdd() {
        var options = {
            title: '新增通讯录-组',
            url: addbook + "/addgroup",
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            width: 400,
            height: 180,
            maxmin: false,
            full: false,
            yes: function (index, layero) {
                $.modal.close(index);
                $.table.refresh(); // 关闭后刷新表格数据（不刷新页面）
            }
        };
        $.modal.openOptions(options);
    }

    function queryUserList() {
        var options = {
            url: prefix + "/list",
            height: 200,
            pagination:false,
            sidePagination: "client",
            virtualScroll: true,
            modalName: "人员信息",
            columns: [{
                checkbox: true,
            },
                {
                    field: 'id',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'bookName',
                    title: '姓名',
                    align:"center",
                    width: 25,
                    widthUnit:"%"
                },
                {
                    field: 'information',
                    title: '电话',
                    align:"center",
                    width: 25,
                    widthUnit:"%"
                },
                {
                    field: 'email',
                    title: '电子邮箱',
                    align:"center",
                    width: 25,
                    widthUnit:"%"
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn-style3 ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑</a> ');
                        actions.push('|');
                        actions.push('<a class="btn-style3" href="javascript:void(0)">详情</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
        $(".fixed-table-container.fixed-height").css({width: "calc(75% - 20px)",height:"73vh",float: "right","margin-right": "20px"});
    }

    function queryGroupTree() {

    }
</script>
</body>
</html>